gladly-plot 0.0.3 → 0.0.5

package/src/{Colorbar.js → floats/Colorbar.js}

@@ -1,6 +1,9 @@
-import { Plot } from "./Plot.js"
-import { linkAxes } from "./AxisLink.js"
-import "./ColorbarLayer.js"
+import { Plot } from "../core/Plot.js"
+import { getScaleTypeFloat } from "../axes/AxisQuantityKindRegistry.js"
+import { linkAxes } from "../axes/AxisLink.js"
+import "../layers/ColorbarLayer.js"
+
+const DRAG_BAR_HEIGHT = 12
 
 const DEFAULT_MARGINS = {
   horizontal: { top: 5, right: 40, bottom: 45, left: 40 },
@@ -34,7 +37,7 @@ export class Colorbar extends Plot {
 
   _getScaleTypeFloat(quantityKind) {
     if (quantityKind === this._colorAxisName && this._targetPlot) {
-      return this._targetPlot._getScaleTypeFloat(quantityKind)
+      return getScaleTypeFloat(quantityKind, this._targetPlot.currentConfig?.axes)
     }
     return super._getScaleTypeFloat(quantityKind)
   }
@@ -50,7 +53,7 @@ export class Colorbar extends Plot {
       }
       const colorscale = this._targetPlot.colorAxisRegistry?.getColorscale(this._colorAxisName)
       if (colorscale) this.colorAxisRegistry.ensureColorAxis(this._colorAxisName, colorscale)
-      const scaleType = this._targetPlot._getScaleTypeFloat(this._colorAxisName) > 0.5 ? "log" : "linear"
+      const scaleType = getScaleTypeFloat(this._colorAxisName, this._targetPlot.currentConfig?.axes) > 0.5 ? "log" : "linear"
       this.axisRegistry.setScaleType(this._spatialAxis, scaleType)
     }
     super.render()
@@ -62,3 +65,14 @@ export class Colorbar extends Plot {
     super.destroy()
   }
 }
+
+// Register the colorbar float factory so Plot._syncFloats can create colorbar floats.
+Plot.registerFloatFactory('colorbar', {
+  factory: (parentPlot, container, opts) =>
+    new Colorbar(container, parentPlot, opts.axisName, { orientation: opts.orientation }),
+  defaultSize: (opts) => {
+    const h = opts.orientation === 'horizontal' ? 70 + DRAG_BAR_HEIGHT : 220 + DRAG_BAR_HEIGHT
+    const w = opts.orientation === 'horizontal' ? 220 : 70
+    return { width: w, height: h }
+  }
+})

package/src/floats/Colorbar2d.js

@@ -0,0 +1,77 @@
+import { Plot } from "../core/Plot.js"
+import { getScaleTypeFloat } from "../axes/AxisQuantityKindRegistry.js"
+import { linkAxes } from "../axes/AxisLink.js"
+import "../layers/ColorbarLayer2d.js"
+
+const DRAG_BAR_HEIGHT = 12
+
+// Margins leave room for tick labels on both spatial axes.
+const DEFAULT_MARGIN = { top: 10, right: 50, bottom: 45, left: 55 }
+
+export class Colorbar2d extends Plot {
+  constructor(container, targetPlot, xAxis, yAxis, { margin } = {}) {
+    super(container, { margin: margin ?? DEFAULT_MARGIN })
+
+    this._targetPlot = targetPlot
+    this._xAxis = xAxis
+    this._yAxis = yAxis
+
+    this.update({
+      data: {},
+      config: {
+        layers: [{ colorbar2d: { xAxis, yAxis } }]
+      }
+    })
+
+    // Link the colorbar's spatial axes to the target's color axes so zoom/pan propagates.
+    this._xLink = linkAxes(this.axes["xaxis_bottom"], targetPlot.axes[xAxis])
+    this._yLink = linkAxes(this.axes["yaxis_left"],   targetPlot.axes[yAxis])
+
+    // Re-render (with sync) whenever the target plot renders.
+    this._syncCallback = () => this.render()
+    targetPlot._renderCallbacks.add(this._syncCallback)
+  }
+
+  _getScaleTypeFloat(quantityKind) {
+    if ((quantityKind === this._xAxis || quantityKind === this._yAxis) && this._targetPlot) {
+      return getScaleTypeFloat(quantityKind, this._targetPlot.currentConfig?.axes)
+    }
+    return super._getScaleTypeFloat(quantityKind)
+  }
+
+  render() {
+    // Sync range, colorscale, and scale type for both color axes from the target plot.
+    if (this.colorAxisRegistry && this.axisRegistry && this._targetPlot) {
+      for (const [colorAxisName, spatialAxisId] of [
+        [this._xAxis, "xaxis_bottom"],
+        [this._yAxis, "yaxis_left"]
+      ]) {
+        const range = this._targetPlot.getAxisDomain(colorAxisName)
+        if (range) {
+          this.setAxisDomain(spatialAxisId, range)
+          this.setAxisDomain(colorAxisName, range)
+        }
+        const colorscale = this._targetPlot.colorAxisRegistry?.getColorscale(colorAxisName)
+        if (colorscale) this.colorAxisRegistry.ensureColorAxis(colorAxisName, colorscale)
+        const scaleType = getScaleTypeFloat(colorAxisName, this._targetPlot.currentConfig?.axes) > 0.5 ? "log" : "linear"
+        this.axisRegistry.setScaleType(spatialAxisId, scaleType)
+      }
+    }
+    super.render()
+  }
+
+  destroy() {
+    this._xLink.unlink()
+    this._yLink.unlink()
+    this._targetPlot._renderCallbacks.delete(this._syncCallback)
+    super.destroy()
+  }
+}
+
+// Register the colorbar2d float factory so Plot._syncFloats can create 2D colorbar floats.
+// Default size is square since both axes carry equal weight.
+Plot.registerFloatFactory('colorbar2d', {
+  factory: (parentPlot, container, opts) =>
+    new Colorbar2d(container, parentPlot, opts.xAxis, opts.yAxis),
+  defaultSize: () => ({ width: 250, height: 250 + DRAG_BAR_HEIGHT })
+})

package/src/{Filterbar.js → floats/Filterbar.js}

@@ -1,6 +1,9 @@
-import { Plot } from "./Plot.js"
-import { linkAxes } from "./AxisLink.js"
-import "./FilterbarLayer.js"
+import { Plot } from "../core/Plot.js"
+import { getScaleTypeFloat } from "../axes/AxisQuantityKindRegistry.js"
+import { linkAxes } from "../axes/AxisLink.js"
+import "../layers/FilterbarLayer.js"
+
+const DRAG_BAR_HEIGHT = 12
 
 const DEFAULT_MARGINS = {
   horizontal: { top: 5, right: 40, bottom: 45, left: 40 },
@@ -124,7 +127,7 @@ export class Filterbar extends Plot {
           if (this._maxInput) this._maxInput.checked = range.max === null
         }
       }
-      const scaleType = this._targetPlot._getScaleTypeFloat(this._filterAxisName) > 0.5 ? "log" : "linear"
+      const scaleType = getScaleTypeFloat(this._filterAxisName, this._targetPlot.currentConfig?.axes) > 0.5 ? "log" : "linear"
       this.axisRegistry.setScaleType(this._spatialAxis, scaleType)
     }
     super.render()
@@ -136,3 +139,14 @@ export class Filterbar extends Plot {
     super.destroy()
   }
 }
+
+// Register the filterbar float factory so Plot._syncFloats can create filterbar floats.
+Plot.registerFloatFactory('filterbar', {
+  factory: (parentPlot, container, opts) =>
+    new Filterbar(container, parentPlot, opts.axisName, { orientation: opts.orientation }),
+  defaultSize: (opts) => {
+    const h = opts.orientation === 'horizontal' ? 70 + DRAG_BAR_HEIGHT : 220 + DRAG_BAR_HEIGHT
+    const w = opts.orientation === 'horizontal' ? 220 : 80
+    return { width: w, height: h }
+  }
+})

package/src/{FilterbarFloat.js → floats/Float.js}

@@ -1,36 +1,24 @@
-import { Filterbar } from "./Filterbar.js"
-import { Plot } from "./Plot.js"
-
 const DRAG_BAR_HEIGHT = 12
 const MIN_WIDTH  = 80
-const MIN_HEIGHT = DRAG_BAR_HEIGHT + 40
-
-const DEFAULT_SIZE = {
-  horizontal: { width: 220, height: 70 + DRAG_BAR_HEIGHT },
-  vertical:   { width: 80,  height: 220 + DRAG_BAR_HEIGHT }
-}
+const MIN_HEIGHT = DRAG_BAR_HEIGHT + 30
 
-export class FilterbarFloat {
-  constructor(parentPlot, filterAxisName, {
-    orientation = "horizontal",
+// Generic draggable, resizable floating container that wraps any Plot-like widget.
+// factory(container) must return an object with a destroy() method.
+export class Float {
+  constructor(parentPlot, factory, {
     x = 10,
-    y = 100,
-    width,
-    height,
-    margin
+    y = 10,
+    width = 220,
+    height = 82
   } = {}) {
-    const defaults = DEFAULT_SIZE[orientation]
-    const w = width  ?? defaults.width
-    const h = height ?? defaults.height
-
     // Outer floating container
     this._el = document.createElement('div')
     Object.assign(this._el.style, {
       position:     'absolute',
       left:         x + 'px',
       top:          y + 'px',
-      width:        w + 'px',
-      height:       h + 'px',
+      width:        width + 'px',
+      height:       height + 'px',
       zIndex:       '10',
       boxSizing:    'border-box',
       background:   'rgba(255,255,255,0.88)',
@@ -40,6 +28,7 @@ export class FilterbarFloat {
       overflow:     'hidden'
     })
 
+    // Ensure parent is positioned so our absolute child is contained within it
     const parentEl = parentPlot.container
     if (getComputedStyle(parentEl).position === 'static') {
       parentEl.style.position = 'relative'
@@ -76,18 +65,18 @@ export class FilterbarFloat {
     })
     this._el.appendChild(this._resizeHandle)
 
-    // Sub-container for the filterbar — sits below the drag bar
-    this._filterbarEl = document.createElement('div')
-    Object.assign(this._filterbarEl.style, {
+    // Content area — sits below the drag bar, fills the rest of the float
+    this._contentEl = document.createElement('div')
+    Object.assign(this._contentEl.style, {
       position: 'absolute',
       top:      DRAG_BAR_HEIGHT + 'px',
       left:     '0',
       right:    '0',
       bottom:   '0'
     })
-    this._el.appendChild(this._filterbarEl)
+    this._el.appendChild(this._contentEl)
 
-    this._filterbar = new Filterbar(this._filterbarEl, parentPlot, filterAxisName, { orientation, margin })
+    this._widget = factory(this._contentEl)
 
     this._setupInteraction()
   }
@@ -149,9 +138,7 @@ export class FilterbarFloat {
 
   destroy() {
     this._cleanupInteraction()
-    this._filterbar.destroy()
+    this._widget.destroy()
     this._el.remove()
   }
 }
-
-Plot._FilterbarFloatClass = FilterbarFloat

package/src/{EpsgUtils.js → geo/EpsgUtils.js}

@@ -1,6 +1,6 @@
 import proj4 from 'proj4'
 import { byEpsg } from 'projnames'
-import { registerAxisQuantityKind } from './AxisQuantityKindRegistry.js'
+import { registerAxisQuantityKind } from '../axes/AxisQuantityKindRegistry.js'
 
 /**
  * Parse an EPSG CRS string or number to a plain integer code.

package/src/index.js

@@ -1,24 +1,37 @@
-export { LayerType } from "./LayerType.js"
-export { Layer } from "./Layer.js"
-export { Data } from "./Data.js"
-export { AxisRegistry, AXES } from "./AxisRegistry.js"
-export { ColorAxisRegistry } from "./ColorAxisRegistry.js"
-export { FilterAxisRegistry, buildFilterGlsl } from "./FilterAxisRegistry.js"
-export { Plot } from "./Plot.js"
-export { scatterLayerType } from "./ScatterLayer.js"
-export { registerLayerType, getLayerType, getRegisteredLayerTypes } from "./LayerTypeRegistry.js"
-export { registerAxisQuantityKind, getAxisQuantityKind, getRegisteredAxisQuantityKinds } from "./AxisQuantityKindRegistry.js"
-export { registerColorscale, getRegisteredColorscales, getColorscaleIndex, buildColorGlsl } from "./ColorscaleRegistry.js"
-export { Axis } from "./Axis.js"
-export { linkAxes } from "./AxisLink.js"
-export { Colorbar } from "./Colorbar.js"
-export { colorbarLayerType } from "./ColorbarLayer.js"
-export { Float } from "./Float.js"
-export { Filterbar } from "./Filterbar.js"
-export { filterbarLayerType } from "./FilterbarLayer.js"
-export { FilterbarFloat } from "./FilterbarFloat.js"
-export { tileLayerType, TileLayerType } from "./TileLayer.js"
-export { registerEpsgDef, parseCrsCode, crsToQkX, crsToQkY, qkToEpsgCode, reproject } from "./EpsgUtils.js"
+export { LayerType } from "./core/LayerType.js"
+export { Layer } from "./core/Layer.js"
+export { Data } from "./core/Data.js"
+export { AxisRegistry, AXES } from "./axes/AxisRegistry.js"
+export { ColorAxisRegistry } from "./axes/ColorAxisRegistry.js"
+export { FilterAxisRegistry, buildFilterGlsl } from "./axes/FilterAxisRegistry.js"
+export { Plot } from "./core/Plot.js"
+export { pointsLayerType } from "./layers/PointsLayer.js"
+export { linesLayerType } from "./layers/LinesLayer.js"
+export { registerLayerType, getLayerType, getRegisteredLayerTypes } from "./core/LayerTypeRegistry.js"
+export { registerAxisQuantityKind, getAxisQuantityKind, getRegisteredAxisQuantityKinds } from "./axes/AxisQuantityKindRegistry.js"
+export { registerColorscale, register2DColorscale, getRegisteredColorscales, getRegistered2DColorscales, getColorscaleIndex, get2DColorscaleIndex, buildColorGlsl } from "./colorscales/ColorscaleRegistry.js"
+export { Axis } from "./axes/Axis.js"
+export { linkAxes } from "./axes/AxisLink.js"
+export { Colorbar } from "./floats/Colorbar.js"
+export { colorbarLayerType } from "./layers/ColorbarLayer.js"
+export { Colorbar2d } from "./floats/Colorbar2d.js"
+export { colorbar2dLayerType } from "./layers/ColorbarLayer2d.js"
+export { Float } from "./floats/Float.js"
+export { Filterbar } from "./floats/Filterbar.js"
+export { filterbarLayerType } from "./layers/FilterbarLayer.js"
+export { tileLayerType, TileLayerType } from "./layers/TileLayer.js"
+export { histogramLayerType } from "./layers/HistogramLayer.js"
+export { registerEpsgDef, parseCrsCode, crsToQkX, crsToQkY, qkToEpsgCode, reproject } from "./geo/EpsgUtils.js"
+export { Computation, TextureComputation, GlslComputation, EXPRESSION_REF, computationSchema, registerTextureComputation, registerGlslComputation, isTexture } from "./compute/ComputationRegistry.js"
 
 // Register all matplotlib colorscales (side-effect import)
-import "./MatplotlibColorscales.js"
+import "./colorscales/MatplotlibColorscales.js"
+import "./colorscales/BivariateColorscales.js"
+
+// Register all compute texture computations (side-effect imports)
+import "./compute/filter.js"
+import "./compute/kde.js"
+import "./compute/fft.js"
+import "./compute/conv.js"
+import "./compute/hist.js"
+import "./compute/axisFilter.js"

package/src/{ColorbarLayer.js → layers/ColorbarLayer.js}

@@ -1,5 +1,5 @@
-import { LayerType } from "./LayerType.js"
-import { registerLayerType } from "./LayerTypeRegistry.js"
+import { LayerType } from "../core/LayerType.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
 
 // Four vertices for a triangle-strip quad covering the entire clip space.
 const quadCx = new Float32Array([-1, 1, -1, 1])

package/src/layers/ColorbarLayer2d.js

@@ -0,0 +1,97 @@
+import { LayerType } from "../core/LayerType.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
+
+// Four vertices for a triangle-strip quad covering the entire clip space.
+const quadCx = new Float32Array([-1, 1, -1, 1])
+const quadCy = new Float32Array([-1, -1, 1, 1])
+
+export const colorbar2dLayerType = new LayerType({
+  name: "colorbar2d",
+
+  getAxisConfig: function(parameters) {
+    const { xAxis, yAxis } = parameters
+    return {
+      xAxis: "xaxis_bottom",
+      xAxisQuantityKind: xAxis,
+      yAxis: "yaxis_left",
+      yAxisQuantityKind: yAxis,
+      colorAxisQuantityKinds: [xAxis, yAxis],
+    }
+  },
+
+  vert: `
+    precision mediump float;
+    attribute float cx;
+    attribute float cy;
+    varying float tval_x;
+    varying float tval_y;
+    void main() {
+      gl_Position = vec4(cx, cy, 0.0, 1.0);
+      tval_x = (cx + 1.0) / 2.0;
+      tval_y = (cy + 1.0) / 2.0;
+    }
+  `,
+
+  // tval_x/tval_y are [0,1] positions in the colorbar quad. We convert them to actual data
+  // values in each axis's range (undoing the log transform if needed), then pass those raw
+  // values to map_color_s_2d which re-applies the scale type internally. The exp() call
+  // is the inverse of the log() that map_color_s_2d will apply, so log-scale roundtrips
+  // correctly and linear-scale is a no-op (exp(log(v)) == v, but for linear vt == v anyway).
+  frag: `
+    precision mediump float;
+    uniform int colorscale_a;
+    uniform vec2 color_range_a;
+    uniform float color_scale_type_a;
+    uniform int colorscale_b;
+    uniform vec2 color_range_b;
+    uniform float color_scale_type_b;
+    varying float tval_x;
+    varying float tval_y;
+    void main() {
+      float r0_a = color_scale_type_a > 0.5 ? log(color_range_a.x) : color_range_a.x;
+      float r1_a = color_scale_type_a > 0.5 ? log(color_range_a.y) : color_range_a.y;
+      float vt_a = r0_a + tval_x * (r1_a - r0_a);
+      float v_a  = color_scale_type_a > 0.5 ? exp(vt_a) : vt_a;
+
+      float r0_b = color_scale_type_b > 0.5 ? log(color_range_b.x) : color_range_b.x;
+      float r1_b = color_scale_type_b > 0.5 ? log(color_range_b.y) : color_range_b.y;
+      float vt_b = r0_b + tval_y * (r1_b - r0_b);
+      float v_b  = color_scale_type_b > 0.5 ? exp(vt_b) : vt_b;
+
+      gl_FragColor = map_color_s_2d(
+        colorscale_a, color_range_a, v_a, color_scale_type_a,
+        colorscale_b, color_range_b, v_b, color_scale_type_b
+      );
+    }
+  `,
+
+  schema: () => ({
+    $schema: "https://json-schema.org/draft/2020-12/schema",
+    type: "object",
+    properties: {
+      xAxis: { type: "string", description: "Quantity kind for the x axis (color axis A)" },
+      yAxis: { type: "string", description: "Quantity kind for the y axis (color axis B)" }
+    },
+    required: ["xAxis", "yAxis"]
+  }),
+
+  createLayer: function(parameters) {
+    const { xAxis, yAxis } = parameters
+    return [{
+      attributes: { cx: quadCx, cy: quadCy },
+      uniforms: {},
+      primitive: "triangle strip",
+      vertexCount: 4,
+      nameMap: {
+        [`colorscale_${xAxis}`]:       'colorscale_a',
+        [`color_range_${xAxis}`]:      'color_range_a',
+        [`color_scale_type_${xAxis}`]: 'color_scale_type_a',
+        [`colorscale_${yAxis}`]:       'colorscale_b',
+        [`color_range_${yAxis}`]:      'color_range_b',
+        [`color_scale_type_${yAxis}`]: 'color_scale_type_b',
+      },
+    }]
+  }
+})
+
+registerLayerType("colorbar2d", colorbar2dLayerType)

package/src/{FilterbarLayer.js → layers/FilterbarLayer.js}

@@ -1,5 +1,5 @@
-import { LayerType } from "./LayerType.js"
-import { registerLayerType } from "./LayerTypeRegistry.js"
+import { LayerType } from "../core/LayerType.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
 
 export const filterbarLayerType = new LayerType({
   name: "filterbar",

package/src/layers/HistogramLayer.js

@@ -0,0 +1,212 @@
+import { LayerType } from "../core/LayerType.js"
+import { Data } from "../core/Data.js"
+import { registerLayerType } from "../core/LayerTypeRegistry.js"
+import { AXES } from "../axes/AxisRegistry.js"
+
+// Ensure the 'histogram' and 'filteredHistogram' texture computations are registered.
+import "../compute/hist.js"
+import "../compute/axisFilter.js"
+
+// Each bar is a quad drawn as a triangle strip (4 vertices).
+// Per-instance: x_center (bin centre in data space), a_pickId (bin index).
+// Per-vertex:   a_corner ∈ {0,1,2,3} — selects which corner of the rectangle.
+//   corner 0: bottom-left   corner 1: bottom-right
+//   corner 2: top-left      corner 3: top-right
+// The `count` attribute is resolved via the 'histogram' texture computation so
+// its value equals the bin count sampled at a_pickId.
+
+const HIST_VERT = `
+  precision mediump float;
+
+  attribute float a_corner;
+  attribute float x_center;
+  attribute float count;
+
+  uniform vec2  xDomain;
+  uniform vec2  yDomain;
+  uniform float xScaleType;
+  uniform float yScaleType;
+  uniform float u_binHalfWidth;
+
+  void main() {
+    float side   = mod(a_corner, 2.0);        // 0 = left, 1 = right
+    float top    = floor(a_corner / 2.0);     // 0 = bottom, 1 = top
+
+    float bx = x_center + (side * 2.0 - 1.0) * u_binHalfWidth;
+    float by = top * count;
+
+    float nx = normalize_axis(bx, xDomain, xScaleType);
+    float ny = normalize_axis(by, yDomain, yScaleType);
+    gl_Position = vec4(nx * 2.0 - 1.0, ny * 2.0 - 1.0, 0.0, 1.0);
+  }
+`
+
+const HIST_FRAG = `
+  precision mediump float;
+  uniform vec4 u_color;
+  void main() {
+    gl_FragColor = gladly_apply_color(u_color);
+  }
+`
+
+class HistogramLayerType extends LayerType {
+  constructor() {
+    super({ name: "histogram", vert: HIST_VERT, frag: HIST_FRAG })
+  }
+
+  _getAxisConfig(parameters, data) {
+    const d = Data.wrap(data)
+    const { vData, xAxis = "xaxis_bottom", yAxis = "yaxis_left", filterColumn } = parameters
+    const activeFilter = filterColumn && filterColumn !== "none" ? filterColumn : null
+    const filterQK = activeFilter ? (d.getQuantityKind(activeFilter) ?? activeFilter) : null
+    return {
+      xAxis,
+      xAxisQuantityKind: d.getQuantityKind(vData) ?? vData,
+      yAxis,
+      yAxisQuantityKind: "count",
+      ...(filterQK ? { filterAxisQuantityKinds: [filterQK] } : {}),
+    }
+  }
+
+  schema(data) {
+    const dataProperties = Data.wrap(data).columns()
+    return {
+      $schema: "https://json-schema.org/draft/2020-12/schema",
+      type: "object",
+      properties: {
+        vData: {
+          type: "string",
+          enum: dataProperties,
+          description: "Data column to histogram"
+        },
+        filterColumn: {
+          type: "string",
+          enum: ["none", ...dataProperties],
+          description: "Data column used to filter points via its filter axis, or 'none'"
+        },
+        bins: {
+          type: "integer",
+          description: "Number of bins (auto-selected by sqrt rule if omitted)"
+        },
+        color: {
+          type: "array",
+          items: { type: "number" },
+          minItems: 4,
+          maxItems: 4,
+          default: [0.2, 0.5, 0.8, 1.0],
+          description: "Bar colour as [R, G, B, A] in [0, 1]"
+        },
+        xAxis: {
+          type: "string",
+          enum: AXES.filter(a => a.includes("x")),
+          default: "xaxis_bottom"
+        },
+        yAxis: {
+          type: "string",
+          enum: AXES.filter(a => a.includes("y")),
+          default: "yaxis_left"
+        }
+      },
+      required: ["vData", "filterColumn"]
+    }
+  }
+
+  _createLayer(parameters, data) {
+    const d = Data.wrap(data)
+    const {
+      vData,
+      bins: requestedBins = null,
+      color = [0.2, 0.5, 0.8, 1.0],
+      filterColumn = "none",
+    } = parameters
+
+    const srcV = d.getData(vData)
+    if (!srcV) throw new Error(`Data column '${vData}' not found`)
+    const vQK = d.getQuantityKind(vData) ?? vData
+
+    // --- Optional filter column ---
+    const activeFilter = filterColumn && filterColumn !== "none" ? filterColumn : null
+    const filterQK = activeFilter ? (d.getQuantityKind(activeFilter) ?? activeFilter) : null
+    const srcF = activeFilter ? d.getData(activeFilter) : null
+    if (activeFilter && !srcF) throw new Error(`Data column '${activeFilter}' not found`)
+
+    // --- Compute min/max for normalization ---
+    let min = Infinity, max = -Infinity
+    for (let i = 0; i < srcV.length; i++) {
+      if (srcV[i] < min) min = srcV[i]
+      if (srcV[i] > max) max = srcV[i]
+    }
+    const range = max - min || 1
+
+    // --- Choose bin count ---
+    const bins = requestedBins || Math.max(10, Math.min(200, Math.ceil(Math.sqrt(srcV.length))))
+    const binWidth = range / bins
+
+    // --- Normalize data to [0, 1] for the histogram computation ---
+    const normalized = new Float32Array(srcV.length)
+    for (let i = 0; i < srcV.length; i++) {
+      normalized[i] = (srcV[i] - min) / range
+    }
+
+    // --- CPU histogram for domain (y-axis range) estimation ---
+    // Uses unfiltered data so the y-axis scale stays stable while the filter moves.
+    const histCpu = new Float32Array(bins)
+    for (let i = 0; i < srcV.length; i++) {
+      const b = Math.min(Math.floor(normalized[i] * bins), bins - 1)
+      histCpu[b] += 1
+    }
+    const maxCount = Math.max(...histCpu)
+
+    // --- Per-instance: bin centre positions in data space ---
+    const x_center = new Float32Array(bins)
+    for (let i = 0; i < bins; i++) {
+      x_center[i] = min + (i + 0.5) * binWidth
+    }
+
+    // --- Per-vertex: corner indices 0–3 (triangle-strip quad) ---
+    const a_corner = new Float32Array([0, 1, 2, 3])
+
+    // --- Build count attribute expression ---
+    // When a filter column is provided, use filteredHistogram so the computation
+    // re-runs whenever the filter axis domain changes.
+    const countAttr = filterQK
+      ? { filteredHistogram: { input: normalized, filterValues: srcF, filterAxisId: filterQK, bins } }
+      : { histogram: { input: normalized, bins } }
+
+    // --- Compute filter column extent for the filterbar display range ---
+    const filterDomains = {}
+    if (filterQK && srcF) {
+      let fMin = Infinity, fMax = -Infinity
+      for (let i = 0; i < srcF.length; i++) {
+        if (srcF[i] < fMin) fMin = srcF[i]
+        if (srcF[i] > fMax) fMax = srcF[i]
+      }
+      filterDomains[filterQK] = [fMin, fMax]
+    }
+
+    return [{
+      attributes: {
+        a_corner,          // per-vertex (no divisor)
+        x_center,          // per-instance (divisor 1)
+        // GPU histogram via computed attribute; sampled at a_pickId (= bin index)
+        count: countAttr,
+      },
+      attributeDivisors: { x_center: 1 },
+      uniforms: {
+        u_binHalfWidth: binWidth / 2,
+        u_color: color,
+      },
+      vertexCount: 4,
+      instanceCount: bins,
+      primitive: "triangle strip",
+      domains: {
+        [vQK]: [min, max],
+        count:  [0, maxCount],
+        ...filterDomains,
+      },
+    }]
+  }
+}
+
+export const histogramLayerType = new HistogramLayerType()
+registerLayerType("histogram", histogramLayerType)