Merge pull request #10 from mindthemath/bugfix/axis-ticks

axes label fixes

Author: mathematicalmichael

hiplot/fetchers_demo.py

@@ -375,6 +375,29 @@ def demo_big_floats() -> hip.Experiment:
     )
 
 
+def demo_decay() -> hip.Experiment:
+    """Simulated exponential decay: remaining = initial_mass * exp(-ln2 / half_life * elapsed).
+    Produces a wide numeric range in remaining_grams (spans many orders of magnitude),
+    useful for testing log-scale tick labels alongside plain numeric columns.
+    """
+    rng = random.Random(42)
+    data: t.List[t.Dict[str, t.Any]] = []
+    for _ in range(500):
+        initial_mass = rng.uniform(50, 500)
+        half_life = rng.uniform(1, 30)
+        elapsed = rng.uniform(1, 50)
+        remaining = initial_mass * math.exp(-math.log(2) / half_life * elapsed)
+        data.append({
+            'initial_mass': initial_mass,
+            'half_life': half_life,
+            'elapsed_years': elapsed,
+            'remaining_grams': remaining,
+        })
+    xp = hip.Experiment.from_iterable(data)
+    xp.parameters_definition["remaining_grams"].type = hip.ValueType.NUMERIC_LOG
+    return xp
+
+
 README_DEMOS: t.Dict[str, t.Callable[[], hip.Experiment]] = {
     "demo": demo,
     "demo_3xcols": demo_3xcols,
@@ -404,4 +427,5 @@ def demo_big_floats() -> hip.Experiment:
     "demo_col_html": demo_col_html,
     "demo_disable_table": demo_disable_table,
     "demo_big_floats": demo_big_floats,
+    "demo_decay": demo_decay,
 }

hiplot/templates/index.html

@@ -22,6 +22,11 @@
           return;
         }
         var options = {};
+        var _sp = new URLSearchParams(location.search);
+        var _provider = _sp.get("provider");
+        if (_provider) {
+          options.dataProviderName = _provider;
+        }
         /*ON_LOAD_SCRIPT_INJECT*/
         var hiplot_instance = hiplot.render(document.getElementById("hiplot_element_id"), options);
         Object.assign(window, { hiplot_last_instance: hiplot_instance }); // For debugging

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "hiplot-mm"
-version = "0.0.4rc15"
+version = "0.0.4rc16"
 description = "High dimensional Interactive Plotting tool"
 readme = "README.md"
 license = "MIT"

src/distribution/plot.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import * as d3 from "d3";
 import style from "../hiplot.module.css";
 import { create_d3_scale_without_outliers, ParamDef } from "../infertypes";
-import { convert_to_categorical_input } from "../lib/d3_scales";
+import { convert_to_categorical_input, getLogScaleTickValues } from "../lib/d3_scales";
 import { ParamType, Datapoint } from "../types";
 
 function labelTextFromHtml(html: string, fallback: string): string {
@@ -85,12 +85,25 @@ export class DistributionPlot extends React.Component<DistributionPlotData, {}>
   figureHeight() {
     return this.props.height - margin.top - margin.bottom;
   }
+  applyLogScaleTicks(axis: any, tickCount: number): void {
+    if (this.props.param_def.type !== ParamType.NUMERICLOG) {
+      return;
+    }
+    const tickValues = getLogScaleTickValues(this.dataScale.domain(), tickCount);
+    if (tickValues) {
+      axis.tickValues(tickValues);
+    }
+    if (this.props.param_def.ticks_format) {
+      axis.tickFormat(d3.format(this.props.param_def.ticks_format));
+    }
+  }
   createDataAxis(dataScale: any, animate: boolean): void {
     if (this.isVertical()) {
       dataScale.range([0, this.figureWidth()]);
-      d3.select(this.axisBottom.current).call(
-        d3.axisBottom(dataScale).ticks(1 + this.props.width / 50),
-      );
+      const tickCount = 1 + this.props.width / 50;
+      const axis = d3.axisBottom(dataScale).ticks(tickCount);
+      this.applyLogScaleTicks(axis, tickCount);
+      d3.select(this.axisBottom.current).call(axis);
       d3.select(this.axisBottomName.current)
         .html(null)
         .append("text")
@@ -101,15 +114,20 @@ export class DistributionPlot extends React.Component<DistributionPlotData, {}>
       this.axisRight.current.innerHTML = "";
     } else {
       dataScale.range([this.figureHeight(), 0]);
+      const tickCount = 1 + this.props.height / 50;
+      const axisRight = d3.axisRight(dataScale).ticks(tickCount);
+      const axisLeft = d3.axisLeft(dataScale).ticks(tickCount);
+      this.applyLogScaleTicks(axisRight, tickCount);
+      this.applyLogScaleTicks(axisLeft, tickCount);
       d3.select(this.axisRight.current)
         .transition()
         .duration(animate ? this.props.animateMs : 0)
-        .call(d3.axisRight(dataScale).ticks(1 + this.props.height / 50))
+        .call(axisRight)
         .attr("text-anchor", "end");
       d3.select(this.axisLeft.current)
         .transition()
         .duration(animate ? this.props.animateMs : 0)
-        .call(d3.axisLeft(dataScale).ticks(1 + this.props.height / 50));
+        .call(axisLeft);
       d3.select(this.axisBottomName.current)
         .html(null)
         .append("text")

src/lib/d3_scales.ts

@@ -242,6 +242,39 @@ export function d3_scale_percentile_values_sorted(values: Array<number>): d3Scal
   return scale;
 }
 
+/**
+ * Generate tick values restricted to powers of 10 for log scales.
+ * Thins out ticks if there are more than fit in the available space.
+ */
+export function getLogScaleTickValues(domain: number[], approxTickCount: number): number[] | null {
+  if (!Array.isArray(domain) || domain.length < 2) {
+    return null;
+  }
+  const dMin = Number(domain[0]);
+  const dMax = Number(domain[domain.length - 1]);
+  if (!Number.isFinite(dMin) || !Number.isFinite(dMax) || dMin <= 0 || dMax <= 0) {
+    return null;
+  }
+  // Use ceil/floor to keep ticks within the domain, preventing labels
+  // from bleeding outside the chart area (especially on the distribution plot).
+  const minExp = Math.ceil(Math.log10(dMin));
+  const maxExp = Math.floor(Math.log10(dMax));
+  const majorTicks: number[] = [];
+  for (let exp = minExp; exp <= maxExp; exp++) {
+    majorTicks.push(Math.pow(10, exp));
+  }
+  if (majorTicks.length > approxTickCount && majorTicks.length > 2) {
+    const step = Math.ceil(majorTicks.length / approxTickCount);
+    const thinned: number[] = [majorTicks[0]];
+    for (let i = step; i < majorTicks.length - 1; i += step) {
+      thinned.push(majorTicks[i]);
+    }
+    thinned.push(majorTicks[majorTicks.length - 1]);
+    return thinned;
+  }
+  return majorTicks.length > 1 ? majorTicks : null;
+}
+
 function cpy_properties(from, to) {
   for (var prop in from) {
     if (from.hasOwnProperty(prop)) {

src/parallel/parallel.tsx

@@ -21,6 +21,7 @@ import { HiPlotPluginData } from "../plugin";
 import { ResizableH } from "../lib/resizable";
 import { Filter, FilterType, apply_filters } from "../filters";
 import { IS_MOBILE } from "../lib/browsercompat";
+import { getLogScaleTickValues } from "../lib/d3_scales";
 
 interface StringMapping<V> {
   [key: string]: V;
@@ -347,8 +348,28 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
   }
 
   get_axis = function (d: string) {
-    const fmt = this.props.params_def[d].ticks_format;
-    var axis = this.axis.scale(this.yscale[d]).ticks(1 + this.state.height / 50, fmt);
+    const pd = this.props.params_def[d];
+    const fmt = pd.ticks_format;
+    const tickCount = 1 + this.state.height / 50;
+    var axis = this.axis.scale(this.yscale[d]).ticks(tickCount, fmt);
+    if (pd.type === ParamType.NUMERICLOG) {
+      const scale = this.yscale[d];
+      const domain = scale.domain();
+      const tickValues = getLogScaleTickValues(domain, tickCount);
+      if (tickValues) {
+        // Preserve the NaN tick if the scale includes outlier handling
+        if (scale.__scale_orig) {
+          tickValues.push(NaN);
+        }
+        axis.tickValues(tickValues);
+      } else {
+        // Clear any tickValues left from a previous column on the shared axis
+        axis.tickValues(null);
+      }
+    } else {
+      // Clear any tickValues left from a previous column on the shared axis
+      axis.tickValues(null);
+    }
     return axis;
   }.bind(this);
 

src/plotxy.tsx

@@ -17,6 +17,7 @@ import _ from "underscore";
 import { Datapoint, ParamType } from "./types";
 import { ContextMenu } from "./contextmenu";
 import { IS_MOBILE } from "./lib/browsercompat";
+import { getLogScaleTickValues } from "./lib/d3_scales";
 
 // DISPLAYS_DATA_DOC_BEGIN
 // Corresponds to values in the dict of `exp.display_data(hip.Displays.XY)`
@@ -233,34 +234,7 @@ export class PlotXY extends React.Component<PlotXYProps, PlotXYState> {
       ) {
         return null;
       }
-      const domain = scale.domain();
-      if (!Array.isArray(domain) || domain.length < 2) {
-        return null;
-      }
-      const dMin = Number(domain[0]);
-      const dMax = Number(domain[domain.length - 1]);
-      if (!Number.isFinite(dMin) || !Number.isFinite(dMax) || dMin <= 0 || dMax <= 0) {
-        return null;
-      }
-      // Generate powers of 10 spanning the domain, including boundary powers
-      // so that e.g. domain [1.05, 99.3] produces ticks [1, 10, 100]
-      const minExp = Math.floor(Math.log10(dMin));
-      const maxExp = Math.ceil(Math.log10(dMax));
-      const majorTicks: number[] = [];
-      for (let exp = minExp; exp <= maxExp; exp++) {
-        majorTicks.push(Math.pow(10, exp));
-      }
-      // Thin out if there are too many powers of 10 for the available space
-      if (majorTicks.length > approxTickCount && majorTicks.length > 2) {
-        const step = Math.ceil(majorTicks.length / approxTickCount);
-        const thinned: number[] = [majorTicks[0]];
-        for (let i = step; i < majorTicks.length - 1; i += step) {
-          thinned.push(majorTicks[i]);
-        }
-        thinned.push(majorTicks[majorTicks.length - 1]);
-        return thinned;
-      }
-      return majorTicks.length > 1 ? majorTicks : null;
+      return getLogScaleTickValues(scale.domain(), approxTickCount);
     }
     function redraw_axis() {
       me.svg.selectAll(".axis_render").remove();