Sci notation on continuous legend (#1450)

* sci notation on continuous legend

* significant digits

client/src/components/brushableHistogram/index.js

@@ -15,6 +15,7 @@ import * as globals from "../../globals";
 import actions from "../../actions";
 import { histogramContinuous } from "../../util/dataframe/histogram";
 import { makeContinuousDimensionName } from "../../util/nameCreators";
+import significantDigits from "../../util/significantDigits";
 
 function clamp(val, rng) {
   return Math.max(Math.min(val, rng[1]), rng[0]);
@@ -288,6 +289,23 @@ class HistogramBrush extends React.PureComponent {
     }
   };
 
+  maybeScientific = (x) => {
+    let format = ",";
+    const _ticks = x.ticks(4);
+
+    if (x.domain().some((n) => Math.abs(n) >= 10000)) {
+      /* 
+        heuristic: if the last tick d3 wants to render has one significant
+        digit ie., 2000, render 2e+3, but if it's anything else ie., 42000000 render
+        4.20e+n
+      */
+      format =
+        significantDigits(_ticks[_ticks.length - 1]) === 1 ? ".0e" : ".2e";
+    }
+
+    return format;
+  };
+
   removeHistogram = () => {
     const {
       dispatch,
@@ -406,11 +424,7 @@ class HistogramBrush extends React.PureComponent {
         d3
           .axisBottom(x)
           .ticks(4)
-          .tickFormat(
+          .tickFormat(d3.format(this.maybeScientific(x)))
-            d3.format(
-              x.domain().some((n) => Math.abs(n) >= 10000) ? ".2e" : ","
-            )
-          )
       );
 
     /* Y AXIS */

client/src/components/continuousLegend/index.js

@@ -61,7 +61,14 @@ const continuous = (selectorId, colorscale, colorAccessor) => {
   });
   */
 
-  const legendaxis = d3.axisRight().scale(legendscale).tickSize(6).ticks(8);
+  const legendaxis = d3
+    .axisRight(legendscale)
+    .ticks(6)
+    .tickFormat(
+      d3.format(
+        legendscale.domain().some((n) => Math.abs(n) >= 10000) ? ".0e" : ","
+      )
+    );
 
   const svg = d3
     .select(selectorId)

client/src/util/significantDigits.js

@@ -0,0 +1,10 @@
+/* 
+    via https://github.com/nodef/extra-number/blob/master/scripts/significantDigits.js
+*/
+
+export default (n) => {
+  return n
+    .toExponential()
+    .replace(/e[\+\-0-9]*$/, "")
+    .replace(/^0\.?0*|\./, "").length;
+};