gladly-plot 0.0.4 → 0.0.6

package/src/compute/hist.js

@@ -0,0 +1,285 @@
+import { registerTextureComputation, registerComputedData, EXPRESSION_REF, EXPRESSION_REF_OPT } from "./ComputationRegistry.js"
+import { TextureComputation, ComputedData } from "../data/Computation.js"
+import { ArrayColumn, uploadToTexture, SAMPLE_COLUMN_GLSL } from "../data/ColumnData.js"
+
+function autoBinsScott(data, options = {}) {
+  const N = data.length
+  const sampleCutoff = options.sampleCutoff || 50000
+  let sampleData
+  if (N > sampleCutoff) {
+    sampleData = new Float32Array(sampleCutoff)
+    for (let i = 0; i < sampleCutoff; i++) {
+      sampleData[i] = data[Math.floor(Math.random() * N)]
+    }
+  } else {
+    sampleData = data
+  }
+  const n = sampleData.length
+  const mean = sampleData.reduce((a, b) => a + b, 0) / n
+  let std
+  if (N <= sampleCutoff) {
+    std = Math.sqrt(sampleData.reduce((a, b) => a + (b - mean) ** 2, 0) / n)
+  } else {
+    std = Math.sqrt(sampleData.reduce((a, b) => a + (b - mean) ** 2, 0) / (n - 1))
+  }
+  const binWidth = 3.5 * std / Math.cbrt(N)
+  let min = data[0], max = data[0]
+  for (let i = 1; i < data.length; i++) {
+    if (data[i] < min) min = data[i]
+    if (data[i] > max) max = data[i]
+  }
+  return Math.max(1, Math.ceil((max - min) / binWidth))
+}
+
+function autoBins(data, options = {}) {
+  const N = data.length
+  const maxBins = options.maxBins || 2048
+  if (N < 30) return Math.min(Math.ceil(Math.log2(N) + 1), maxBins)
+  return autoBinsScott(data, options)
+}
+
+// Build a histogram texture from a column texture (4 values per texel).
+// Assumes input values are already normalized to [0, 1].
+// Returns a 4-packed texture: bins values packed 4 per texel.
+export default function makeHistogram(regl, inputTex, options = {}) {
+  const N = inputTex._dataLength ?? inputTex.width * inputTex.height * 4
+  const bins = options.bins || 1024
+
+  const nTexels = Math.ceil(bins / 4)
+  const wTexels = Math.min(nTexels, regl.limits.maxTextureSize)
+  const hTexels = Math.ceil(nTexels / wTexels)
+
+  const histTex = regl.texture({ width: wTexels, height: hTexels, type: 'float', format: 'rgba' })
+  const histFBO = regl.framebuffer({ color: histTex, depth: false, stencil: false })
+  regl.clear({ color: [0, 0, 0, 0], framebuffer: histFBO })
+
+  const pickIds = new Float32Array(N)
+  for (let i = 0; i < N; i++) pickIds[i] = i
+
+  const drawPoints = regl({
+    framebuffer: histFBO,
+    blend: { enable: true, func: { src: 'one', dst: 'one' } },
+    vert: `#version 300 es
+precision highp float;
+precision highp sampler2D;
+in float a_pickId;
+uniform sampler2D u_inputTex;
+${SAMPLE_COLUMN_GLSL}
+out float v_chan;
+void main() {
+  float value = sampleColumn(u_inputTex, a_pickId);
+  int b = int(clamp(floor(value * float(${bins})), 0.0, float(${bins - 1})));
+  int texelI = b / 4;
+  int chan = b % 4;
+  float tx = (float(texelI % ${wTexels}) + 0.5) / float(${wTexels}) * 2.0 - 1.0;
+  float ty = (float(texelI / ${wTexels}) + 0.5) / float(${hTexels}) * 2.0 - 1.0;
+  gl_Position = vec4(tx, ty, 0.0, 1.0);
+  gl_PointSize = 1.0;
+  v_chan = float(chan);
+}`,
+    frag: `#version 300 es
+precision highp float;
+in float v_chan;
+out vec4 fragColor;
+void main() {
+  int c = int(v_chan + 0.5);
+  fragColor = vec4(float(c == 0), float(c == 1), float(c == 2), float(c == 3));
+}`,
+    attributes: { a_pickId: pickIds },
+    uniforms: { u_inputTex: inputTex },
+    count: N,
+    primitive: 'points'
+  })
+
+  drawPoints()
+  histTex._dataLength = bins
+  return histTex
+}
+
+const TDR_STEP_MS = 500
+
+// ─── HistogramComputation (TextureComputation — inline expression usage) ──────
+class HistogramComputation extends TextureComputation {
+  async compute(regl, inputs, getAxisDomain) {
+    const inputCol = inputs.input  // ColumnData
+
+    let bins = inputs.bins
+    if (!bins && inputCol instanceof ArrayColumn) {
+      bins = autoBins(inputCol.array, { maxBins: inputs.maxBins || 2048 })
+    } else if (!bins) {
+      bins = inputs.maxBins || 1024
+    }
+
+    // Normalize to [0,1] for GPU histogram (CPU work)
+    let normalizedTex
+    const t0 = performance.now()
+    if (inputCol instanceof ArrayColumn) {
+      const arr = inputCol.array
+      let min = arr[0], max = arr[0]
+      for (let i = 1; i < arr.length; i++) {
+        if (arr[i] < min) min = arr[i]
+        if (arr[i] > max) max = arr[i]
+      }
+      const range = max - min || 1
+      const normalized = new Float32Array(arr.length)
+      for (let i = 0; i < arr.length; i++) normalized[i] = (arr[i] - min) / range
+      normalizedTex = uploadToTexture(regl, normalized)
+    } else {
+      // Already a GPU texture — assume values are in [0,1]
+      normalizedTex = inputCol.toTexture(regl)
+    }
+    if (performance.now() - t0 > TDR_STEP_MS)
+      await new Promise(r => requestAnimationFrame(r))
+
+    return makeHistogram(regl, normalizedTex, { bins })
+  }
+
+  schema(data) {
+    return {
+      type: 'object',
+      title: 'histogram',
+      properties: {
+        input: EXPRESSION_REF,
+        bins: { type: 'number' }
+      },
+      required: ['input']
+    }
+  }
+}
+
+registerTextureComputation('histogram', new HistogramComputation())
+
+// ─── HistogramData (ComputedData — top-level transform) ───────────────────────
+class HistogramData extends ComputedData {
+  columns() { return ['binCenters', 'counts'] }
+
+  filterAxes(params, data) {
+    if (!params.filter) return {}
+    const qk = data ? (data.getQuantityKind(params.filter) ?? params.filter) : params.filter
+    return { filter: qk }
+  }
+
+  async compute(regl, params, data, getAxisDomain) {
+    const srcCol = data.getData(params.input)
+    if (!(srcCol instanceof ArrayColumn)) {
+      throw new Error(`HistogramData: input '${params.input}' must be a plain data column`)
+    }
+    const srcV = srcCol.array
+
+    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
+
+    const bins = params.bins || Math.max(10, Math.min(200, Math.ceil(Math.sqrt(srcV.length))))
+    const binWidth = range / bins
+
+    // Normalize full input to [0,1] for bin assignment.
+    const normalized = new Float32Array(srcV.length)
+    for (let i = 0; i < srcV.length; i++) normalized[i] = (srcV[i] - min) / range
+
+    // Build optional filter mask and track filter axis for axis-reactivity.
+    let filterMask = null
+    const filterDataExtents = {}
+    if (params.filter) {
+      const filterCol = data.getData(params.filter)
+      if (!(filterCol instanceof ArrayColumn)) {
+        throw new Error(`HistogramData: filter '${params.filter}' must be a plain data column`)
+      }
+      const filterArr = filterCol.array
+      const filterQK = data.getQuantityKind(params.filter) ?? params.filter
+
+      let fMin = filterArr[0], fMax = filterArr[0]
+      for (let i = 1; i < filterArr.length; i++) {
+        if (filterArr[i] < fMin) fMin = filterArr[i]
+        if (filterArr[i] > fMax) fMax = filterArr[i]
+      }
+      filterDataExtents[filterQK] = [fMin, fMax]
+
+      // Calling getAxisDomain registers the filter axis as an accessed axis so the
+      // ComputedDataNode recomputes whenever the filter range changes.
+      const domain = getAxisDomain(filterQK)
+      const fRangeMin = domain?.[0] ?? null
+      const fRangeMax = domain?.[1] ?? null
+
+      if (fRangeMin !== null || fRangeMax !== null) {
+        filterMask = new Uint8Array(srcV.length)
+        for (let i = 0; i < filterArr.length; i++) {
+          if (fRangeMin !== null && filterArr[i] < fRangeMin) continue
+          if (fRangeMax !== null && filterArr[i] > fRangeMax) continue
+          filterMask[i] = 1
+        }
+      }
+    }
+
+    // Bin centers always span the full input range so bars don't shift when filtering.
+    const nTexels = Math.ceil(bins / 4)
+    const centersW = Math.min(nTexels, regl.limits.maxTextureSize)
+    const centersH = Math.ceil(nTexels / centersW)
+    const centersData = new Float32Array(centersW * centersH * 4)
+    for (let i = 0; i < bins; i++) centersData[i] = min + (i + 0.5) * binWidth
+    const binCentersTex = regl.texture({ data: centersData, shape: [centersW, centersH], type: 'float', format: 'rgba' })
+    binCentersTex._dataLength = bins
+
+    // Build histogram from filtered (or full) normalized values.
+    let countInput = normalized
+    if (filterMask) {
+      const filtered = []
+      for (let i = 0; i < srcV.length; i++) {
+        if (filterMask[i]) filtered.push(normalized[i])
+      }
+      countInput = new Float32Array(filtered)
+    }
+    const uploadStart = performance.now()
+    const normalizedTex = uploadToTexture(regl, countInput)
+    if (performance.now() - uploadStart > TDR_STEP_MS)
+      await new Promise(r => requestAnimationFrame(r))
+    const countsTex = makeHistogram(regl, normalizedTex, { bins })
+    countsTex._dataLength = bins
+
+    const histCpu = new Float32Array(bins)
+    for (let i = 0; i < countInput.length; i++) {
+      histCpu[Math.min(Math.floor(countInput[i] * bins), bins - 1)] += 1
+    }
+    const maxCount = Math.max(...histCpu, 0)
+
+    const xQK = (typeof params.input === 'string' && data)
+      ? (data.getQuantityKind(params.input) ?? params.input)
+      : null
+
+    return {
+      binCenters: binCentersTex,
+      counts: countsTex,
+      _meta: {
+        domains: {
+          binCenters: [min, max],
+          counts: [0, maxCount],
+        },
+        quantityKinds: {
+          binCenters: xQK,
+          counts: 'count',
+        },
+        binHalfWidth: binWidth / 2,
+        filterDataExtents,
+      }
+    }
+  }
+
+  schema(data) {
+    const cols = data ? data.columns() : []
+    return {
+      type: 'object',
+      title: 'HistogramData',
+      properties: {
+        input: { type: 'string', enum: cols, description: 'Input data column' },
+        bins: { type: 'integer', description: 'Number of bins (0 for auto)', default: 0 },
+        filter: { ...EXPRESSION_REF_OPT, description: 'Filter column — registers a filter axis (null for none)' }
+      },
+      required: ['input', 'filter']
+    }
+  }
+}
+
+registerComputedData('HistogramData', new HistogramData())

package/src/compute/kde.js

@@ -0,0 +1,120 @@
+import { registerTextureComputation, EXPRESSION_REF, resolveQuantityKind } from "./ComputationRegistry.js"
+import { TextureComputation } from "../data/Computation.js"
+import { SAMPLE_COLUMN_GLSL } from "../data/ColumnData.js"
+
+/**
+ * Smooth a histogram to produce a KDE texture
+ * @param {regl} regl - regl context
+ * @param {Texture} histTex - 4-packed histogram texture (_dataLength = bins)
+ * @param {Object} options
+ *   - bandwidth: Gaussian sigma in bins (default 5)
+ *   - bins: output bins (default same as input via _dataLength)
+ * @returns {Texture} - smoothed KDE texture (4-packed, _dataLength = bins)
+ */
+export default function smoothKDE(regl, histTex, options = {}) {
+  const bins = options.bins || histTex._dataLength || histTex.width * 4
+  const bandwidth = options.bandwidth || 5.0
+
+  const nTexels = Math.ceil(bins / 4)
+  const wTexels = Math.min(nTexels, regl.limits.maxTextureSize)
+  const hTexels = Math.ceil(nTexels / wTexels)
+
+  const kdeTex = regl.texture({ width: wTexels, height: hTexels, type: 'float', format: 'rgba' })
+  const kdeFBO = regl.framebuffer({ color: kdeTex, depth: false, stencil: false })
+
+  const kernelRadius = Math.ceil(bandwidth * 3)
+  const kernelSize = kernelRadius * 2 + 1
+  const kernel = new Float32Array(kernelSize)
+  let sum = 0
+  for (let i = -kernelRadius; i <= kernelRadius; i++) {
+    const w = Math.exp(-0.5 * (i / bandwidth) ** 2)
+    kernel[i + kernelRadius] = w
+    sum += w
+  }
+  for (let i = 0; i < kernel.length; i++) kernel[i] /= sum
+
+  // Kernel texture stays R-channel (internal, not exposed via sampleColumn)
+  const kernelData = new Float32Array(kernelSize * 4)
+  for (let i = 0; i < kernelSize; i++) kernelData[i * 4] = kernel[i]
+  const kernelTex = regl.texture({ data: kernelData, shape: [kernelSize, 1], type: 'float', format: 'rgba' })
+
+  const drawKDE = regl({
+    framebuffer: kdeFBO,
+    vert: `#version 300 es
+      precision highp float;
+      in vec2 position;
+      void main() { gl_Position = vec4(position, 0.0, 1.0); }
+    `,
+    frag: `#version 300 es
+      precision highp float;
+      precision highp sampler2D;
+      uniform sampler2D histTex;
+      uniform sampler2D kernelTex;
+      uniform int kernelRadius;
+      uniform int bins;
+      out vec4 fragColor;
+      ${SAMPLE_COLUMN_GLSL}
+      void main() {
+        int texelI = int(gl_FragCoord.y) * ${wTexels} + int(gl_FragCoord.x);
+        int base = texelI * 4;
+        float s0 = 0.0, s1 = 0.0, s2 = 0.0, s3 = 0.0;
+        for (int i = -16; i <= 16; i++) {
+          if (i + 16 >= kernelRadius * 2 + 1) break;
+          float kw = texelFetch(kernelTex, ivec2(i + kernelRadius, 0), 0).r;
+          s0 += sampleColumn(histTex, float(clamp(base + 0 + i, 0, bins - 1))) * kw;
+          s1 += sampleColumn(histTex, float(clamp(base + 1 + i, 0, bins - 1))) * kw;
+          s2 += sampleColumn(histTex, float(clamp(base + 2 + i, 0, bins - 1))) * kw;
+          s3 += sampleColumn(histTex, float(clamp(base + 3 + i, 0, bins - 1))) * kw;
+        }
+        fragColor = vec4(s0, s1, s2, s3);
+      }
+    `,
+    attributes: {
+      position: [[-1, -1], [1, -1], [-1, 1], [1, 1]]
+    },
+    uniforms: {
+      histTex,
+      kernelTex,
+      kernelRadius,
+      bins
+    },
+    count: 4,
+    primitive: 'triangle strip'
+  })
+
+  drawKDE()
+
+  kdeTex._dataLength = bins
+  return kdeTex
+}
+
+const TDR_STEP_MS = 500
+
+class KdeComputation extends TextureComputation {
+  async compute(regl, inputs, getAxisDomain) {
+    const t0 = performance.now()
+    const inputTex = inputs.input.toTexture(regl)
+    if (performance.now() - t0 > TDR_STEP_MS)
+      await new Promise(r => requestAnimationFrame(r))
+    return smoothKDE(regl, inputTex, { bins: inputs.bins, bandwidth: inputs.bandwidth })
+  }
+
+  getQuantityKind(params, data) {
+    return resolveQuantityKind(params.input, data)
+  }
+
+  schema(data) {
+    return {
+      type: 'object',
+      title: 'kde',
+      properties: {
+        input: EXPRESSION_REF,
+        bins: { type: 'number' },
+        bandwidth: { type: 'number' }
+      },
+      required: ['input']
+    }
+  }
+}
+
+registerTextureComputation('kde', new KdeComputation())

package/src/compute/scatter2dInterpolate.js

@@ -0,0 +1,277 @@
+import { registerComputedData, EXPRESSION_REF } from "./ComputationRegistry.js"
+import { ComputedData } from "../data/Computation.js"
+import { ArrayColumn, uploadToTexture, SAMPLE_COLUMN_GLSL } from "../data/ColumnData.js"
+
+function colDomain(col) {
+  if (col instanceof ArrayColumn) {
+    const arr = col.array
+    let min = arr[0], max = arr[0]
+    for (let i = 1; i < arr.length; i++) {
+      if (arr[i] < min) min = arr[i]
+      if (arr[i] > max) max = arr[i]
+    }
+    return [min, max]
+  }
+  return col.domain ?? [0, 1]
+}
+
+function makeSplatPass(regl, W, H, pickIds, xTex, yTex, valueTex, xDomain, yDomain, radius) {
+  const accTex = regl.texture({ width: W, height: H, type: 'float', format: 'rgba' })
+  const accFBO = regl.framebuffer({ color: accTex, depth: false, stencil: false })
+  regl.clear({ color: [0, 0, 0, 0], framebuffer: accFBO })
+
+  const N = pickIds.length
+  const pointSize = radius * 2.0 + 1.0
+
+  const drawSplat = regl({
+    framebuffer: accFBO,
+    blend: { enable: true, func: { src: 'one', dst: 'one' } },
+    vert: `#version 300 es
+precision highp float;
+precision highp sampler2D;
+in float a_pickId;
+uniform sampler2D u_xTex, u_yTex, u_valueTex;
+uniform float u_xMin, u_xMax, u_yMin, u_yMax;
+${SAMPLE_COLUMN_GLSL}
+out float v_value;
+void main() {
+  float xVal  = sampleColumn(u_xTex,     a_pickId);
+  float yVal  = sampleColumn(u_yTex,     a_pickId);
+  v_value     = sampleColumn(u_valueTex, a_pickId);
+  float ndcX  = (xVal - u_xMin) / max(u_xMax - u_xMin, 1e-10) * 2.0 - 1.0;
+  float ndcY  = (yVal - u_yMin) / max(u_yMax - u_yMin, 1e-10) * 2.0 - 1.0;
+  gl_Position = vec4(ndcX, ndcY, 0.0, 1.0);
+  gl_PointSize = ${pointSize.toFixed(2)};
+}`,
+    frag: `#version 300 es
+precision highp float;
+in float v_value;
+out vec4 fragColor;
+void main() {
+  vec2  pc  = gl_PointCoord - 0.5;
+  float d   = length(pc) * ${pointSize.toFixed(2)};
+  if (d > ${radius.toFixed(2)}) discard;
+  float w   = exp(-0.5 * (d / ${radius.toFixed(2)}) * (d / ${radius.toFixed(2)}));
+  fragColor = vec4(v_value * w, 0.0, 0.0, w);
+}`,
+    attributes: { a_pickId: pickIds },
+    uniforms: {
+      u_xTex: xTex,
+      u_yTex: yTex,
+      u_valueTex: valueTex,
+      u_xMin: xDomain[0], u_xMax: xDomain[1],
+      u_yMin: yDomain[0], u_yMax: yDomain[1],
+    },
+    count: N,
+    primitive: 'points'
+  })
+
+  drawSplat()
+  return accTex
+}
+
+function makeValueTexture(regl, W, H, accum1, accum2, accum3, w1, w2, w3) {
+  const totalN  = W * H
+  const nTexels = Math.ceil(totalN / 4)
+  const outW    = Math.min(nTexels, regl.limits.maxTextureSize)
+  const outH    = Math.ceil(nTexels / outW)
+
+  const outTex = regl.texture({ width: outW, height: outH, type: 'float', format: 'rgba' })
+  const outFBO = regl.framebuffer({ color: outTex, depth: false, stencil: false })
+
+  regl({
+    framebuffer: outFBO,
+    vert: `#version 300 es
+precision highp float;
+in vec2 a_position;
+void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`,
+    frag: `#version 300 es
+precision highp float;
+precision highp sampler2D;
+uniform sampler2D u_accum1, u_accum2, u_accum3;
+uniform float u_w1, u_w2, u_w3;
+out vec4 fragColor;
+
+float sampleInterp(sampler2D accum, int linearIdx) {
+  if (linearIdx >= ${totalN}) return 0.0;
+  int px = linearIdx % ${W};
+  int py = linearIdx / ${W};
+  vec4 a = texelFetch(accum, ivec2(px, py), 0);
+  if (a.a < 1e-6) return 0.0;
+  return a.r / a.a;
+}
+
+float combine(int idx) {
+  return u_w1 * sampleInterp(u_accum1, idx)
+       + u_w2 * sampleInterp(u_accum2, idx)
+       + u_w3 * sampleInterp(u_accum3, idx);
+}
+
+void main() {
+  int texelI = int(gl_FragCoord.y) * ${outW} + int(gl_FragCoord.x);
+  int base   = texelI * 4;
+  fragColor  = vec4(
+    combine(base + 0),
+    combine(base + 1),
+    combine(base + 2),
+    combine(base + 3)
+  );
+}`,
+    attributes: { a_position: [[-1, -1], [1, -1], [-1, 1], [1, 1]] },
+    uniforms: {
+      u_accum1: accum1,
+      u_accum2: accum2,
+      u_accum3: accum3,
+      u_w1: w1, u_w2: w2, u_w3: w3,
+    },
+    count: 4,
+    primitive: 'triangle strip'
+  })()
+
+  outTex._dataLength = totalN
+  outTex._dataShape  = [W, H]
+  return outTex
+}
+
+function makeCoordTexturesCorners(regl, xDomain, yDomain) {
+  // Four corners in row-major [2,2] order: index = iy*2 + ix
+  // (ix=0,iy=0)=xMin/yMin  (ix=1,iy=0)=xMax/yMin
+  // (ix=0,iy=1)=xMin/yMax  (ix=1,iy=1)=xMax/yMax
+  const xArr = new Float32Array([xDomain[0], xDomain[1], xDomain[0], xDomain[1]])
+  const yArr = new Float32Array([yDomain[0], yDomain[0], yDomain[1], yDomain[1]])
+  const xTex = uploadToTexture(regl, xArr)
+  const yTex = uploadToTexture(regl, yArr)
+  xTex._dataShape = [2, 2]
+  yTex._dataShape = [2, 2]
+  return { xTex, yTex }
+}
+
+function makeCoordTexturesFull(regl, W, H, xDomain, yDomain) {
+  const totalN  = W * H
+  const nTexels = Math.ceil(totalN / 4)
+  const outW    = Math.min(nTexels, regl.limits.maxTextureSize)
+  const outH    = Math.ceil(nTexels / outW)
+
+  const makeCoordTex = (axis) => {
+    const outTex = regl.texture({ width: outW, height: outH, type: 'float', format: 'rgba' })
+    const outFBO = regl.framebuffer({ color: outTex, depth: false, stencil: false })
+
+    regl({
+      framebuffer: outFBO,
+      vert: `#version 300 es
+precision highp float;
+in vec2 a_position;
+void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`,
+      frag: `#version 300 es
+precision highp float;
+out vec4 fragColor;
+float coordAt(int linearIdx) {
+  if (linearIdx >= ${totalN}) return 0.0;
+  int px = linearIdx % ${W};
+  int py = linearIdx / ${W};
+  ${axis === 'x'
+    ? `return ${xDomain[0].toFixed(10)} + (float(px) + 0.5) / float(${W}) * float(${(xDomain[1] - xDomain[0]).toFixed(10)});`
+    : `return ${yDomain[0].toFixed(10)} + (float(py) + 0.5) / float(${H}) * float(${(yDomain[1] - yDomain[0]).toFixed(10)});`
+  }
+}
+void main() {
+  int texelI = int(gl_FragCoord.y) * ${outW} + int(gl_FragCoord.x);
+  int base   = texelI * 4;
+  fragColor  = vec4(
+    coordAt(base + 0),
+    coordAt(base + 1),
+    coordAt(base + 2),
+    coordAt(base + 3)
+  );
+}`,
+      attributes: { a_position: [[-1, -1], [1, -1], [-1, 1], [1, 1]] },
+      uniforms: {},
+      count: 4,
+      primitive: 'triangle strip'
+    })()
+
+    outTex._dataLength = totalN
+    outTex._dataShape  = [W, H]
+    return outTex
+  }
+
+  return { xTex: makeCoordTex('x'), yTex: makeCoordTex('y') }
+}
+
+class Scatter2dInterpolateData extends ComputedData {
+  columns() { return ['value', 'x', 'y'] }
+
+  compute(regl, params, data, getAxisDomain) {
+    const xCol    = data.getData(params.x)
+    const yCol    = data.getData(params.y)
+    const valCol  = data.getData(params.value)
+
+    const W = params.resolutionX | 0
+    const H = params.resolutionY | 0
+    const radius         = params.radius ?? 5.0
+    const w1             = params.w1 ?? 0.5
+    const w2             = params.w2 ?? 0.3
+    const w3             = params.w3 ?? 0.2
+    const fullCoordinates = params.full_coordinates ?? false
+
+    const N = xCol.length
+    const pickIds = new Float32Array(N)
+    for (let i = 0; i < N; i++) pickIds[i] = i
+
+    const xTex    = xCol.toTexture(regl)
+    const yTex    = yCol.toTexture(regl)
+    const valTex  = valCol.toTexture(regl)
+
+    const xDomain = colDomain(xCol)
+    const yDomain = colDomain(yCol)
+
+    const accum1 = makeSplatPass(regl, W, H, pickIds, xTex, yTex, valTex, xDomain, yDomain, radius)
+    const accum2 = makeSplatPass(regl, W, H, pickIds, xTex, yTex, valTex, xDomain, yDomain, radius * 2)
+    const accum3 = makeSplatPass(regl, W, H, pickIds, xTex, yTex, valTex, xDomain, yDomain, radius * 4)
+
+    const valueTex = makeValueTexture(regl, W, H, accum1, accum2, accum3, w1, w2, w3)
+
+    const coordShape = fullCoordinates ? [W, H] : [2, 2]
+    const { xTex: xOutTex, yTex: yOutTex } = fullCoordinates
+      ? makeCoordTexturesFull(regl, W, H, xDomain, yDomain)
+      : makeCoordTexturesCorners(regl, xDomain, yDomain)
+
+    const xQK  = (typeof params.x     === 'string' && data) ? (data.getQuantityKind(params.x)     ?? null) : null
+    const yQK  = (typeof params.y     === 'string' && data) ? (data.getQuantityKind(params.y)     ?? null) : null
+    const valQK = (typeof params.value === 'string' && data) ? (data.getQuantityKind(params.value) ?? null) : null
+
+    return {
+      value: valueTex,
+      x:     xOutTex,
+      y:     yOutTex,
+      _meta: {
+        domains:      { value: null, x: xDomain, y: yDomain },
+        quantityKinds: { value: valQK, x: xQK, y: yQK },
+        shapes:       { value: [W, H], x: coordShape, y: coordShape },
+      }
+    }
+  }
+
+  schema(data) {
+    const cols = data ? data.columns() : []
+    return {
+      type: 'object',
+      title: 'Scatter2dInterpolate',
+      properties: {
+        x:                { type: 'string', enum: cols },
+        y:                { type: 'string', enum: cols },
+        value:            { type: 'string', enum: cols },
+        resolutionX:      { type: 'integer', default: 256 },
+        resolutionY:      { type: 'integer', default: 256 },
+        radius:           { type: 'number',  default: 5.0 },
+        w1:               { type: 'number',  default: 0.5 },
+        w2:               { type: 'number',  default: 0.3 },
+        w3:               { type: 'number',  default: 0.2 },
+        full_coordinates: { type: 'boolean', default: false },
+      },
+      required: ['x', 'y', 'value', 'resolutionX', 'resolutionY']
+    }
+  }
+}
+
+registerComputedData('Scatter2dInterpolate', new Scatter2dInterpolateData())