gladly-plot 0.0.1 → 0.0.3

package/README.md

@@ -13,8 +13,10 @@ Gladly combines WebGL rendering (via regl) with D3.js for interactive axes and z
 - 🎯 Interactive multi-axis support (up to 4 axes)
 - 🔍 Zoom and pan interactions
 - 🧩 Extensible layer type registry
-- 📏 Unit-aware axis management
-- ⚡ ~250 lines of focused source code
+- 📏 Quantity and unit-aware axis management
+- 🎨 Supports all standard colorscales
+- 🔗 Subplot axis linking
+- 🌈 Axis to coloring or filtering linking
 
 ## Documentation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gladly-plot",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "GPU-powered multi-axis plotting library with regl + d3",
   "type": "module",
 
@@ -18,6 +18,8 @@
 
   "dependencies": {
     "d3": "^7.8.5",
+    "proj4": "^2.15.0",
+    "projnames": "^0.0.2",
     "regl": "^2.1.0"
   },
 

package/src/AxisRegistry.js

@@ -16,9 +16,9 @@ export class AxisRegistry {
   }
 
   ensureAxis(axisName, axisQuantityKind, scaleOverride) {
-    if (!AXES.includes(axisName)) throw `Unknown axis ${axisName}`
+    if (!AXES.includes(axisName)) throw new Error(`Unknown axis ${axisName}`)
     if (this.axisQuantityKinds[axisName] && this.axisQuantityKinds[axisName] !== axisQuantityKind)
-      throw `Axis quantity kind mismatch on axis ${axisName}: ${this.axisQuantityKinds[axisName]} vs ${axisQuantityKind}`
+      throw new Error(`Axis quantity kind mismatch on axis ${axisName}: ${this.axisQuantityKinds[axisName]} vs ${axisQuantityKind}`)
 
     if (!this.scales[axisName]) {
       const quantityKindDef = getAxisQuantityKind(axisQuantityKind)

package/src/ColorbarLayer.js

@@ -41,7 +41,7 @@ export const colorbarLayerType = new LayerType({
       float r0 = color_scale_type > 0.5 ? log(color_range.x) : color_range.x;
       float r1 = color_scale_type > 0.5 ? log(color_range.y) : color_range.y;
       float v  = r0 + tval * (r1 - r0);
-      gl_FragColor = map_color(colorscale, vec2(r0, r1), v);
+      gl_FragColor = gladly_apply_color(map_color(colorscale, vec2(r0, r1), v));
     }
   `,
 

package/src/ColorscaleRegistry.js

@@ -38,11 +38,14 @@ export function buildColorGlsl() {
   parts.push('  return vec4(0.5, 0.5, 0.5, 1.0);')
   parts.push('}')
 
-  parts.push('vec4 map_color_s(int cs, vec2 range, float v, float scaleType) {')
+  parts.push('vec4 map_color_s(int cs, vec2 range, float v, float scaleType, float useAlpha) {')
   parts.push('  float vt = scaleType > 0.5 ? log(v) : v;')
   parts.push('  float r0 = scaleType > 0.5 ? log(range.x) : range.x;')
   parts.push('  float r1 = scaleType > 0.5 ? log(range.y) : range.y;')
-  parts.push('  return map_color(cs, vec2(r0, r1), vt);')
+  parts.push('  float t = clamp((vt - r0) / (r1 - r0), 0.0, 1.0);')
+  parts.push('  vec4 color = map_color(cs, vec2(r0, r1), vt);')
+  parts.push('  if (useAlpha > 0.5) color.a = t;')
+  parts.push('  return gladly_apply_color(color);')
   parts.push('}')
 
   return parts.join('\n')

package/src/Data.js

@@ -0,0 +1,67 @@
+export class Data {
+  constructor(raw) {
+    raw = raw ?? {}
+    // Columnar format: { data: {col: Float32Array}, quantity_kinds?: {...}, domains?: {...} }
+    // Detected by the presence of a top-level `data` property that is a plain object.
+    if (raw.data != null && typeof raw.data === 'object' && !(raw.data instanceof Float32Array)) {
+      this._columnar = true
+      this._data = raw.data
+      this._quantityKinds = raw.quantity_kinds ?? {}
+      this._rawDomains = raw.domains ?? {}
+    } else {
+      this._columnar = false
+      this._raw = raw
+    }
+  }
+
+  static wrap(data) {
+    if (data != null && typeof data.columns === 'function' && typeof data.getData === 'function') {
+      return data
+    }
+    return new Data(data)
+  }
+
+  _entry(col) {
+    if (this._columnar) {
+      const rawDomain = this._rawDomains[col]
+      let domain
+      if (Array.isArray(rawDomain)) {
+        domain = [rawDomain[0], rawDomain[1]]
+      } else if (rawDomain && typeof rawDomain === 'object') {
+        domain = [rawDomain.min, rawDomain.max]
+      }
+      return { data: this._data[col], quantityKind: this._quantityKinds[col], domain }
+    }
+
+    const v = this._raw[col]
+    if (v instanceof Float32Array) {
+      return { data: v, quantityKind: undefined, domain: undefined }
+    }
+    if (v && typeof v === 'object') {
+      let domain
+      if (Array.isArray(v.domain)) {
+        domain = [v.domain[0], v.domain[1]]
+      } else if (v.domain && typeof v.domain === 'object') {
+        domain = [v.domain.min, v.domain.max]
+      }
+      return { data: v.data, quantityKind: v.quantity_kind, domain }
+    }
+    return { data: undefined, quantityKind: undefined, domain: undefined }
+  }
+
+  columns() {
+    return this._columnar ? Object.keys(this._data) : Object.keys(this._raw)
+  }
+
+  getData(col) {
+    return this._entry(col).data
+  }
+
+  getQuantityKind(col) {
+    return this._entry(col).quantityKind
+  }
+
+  getDomain(col) {
+    return this._entry(col).domain
+  }
+}

package/src/EpsgUtils.js

@@ -0,0 +1,123 @@
+import proj4 from 'proj4'
+import { byEpsg } from 'projnames'
+import { registerAxisQuantityKind } from './AxisQuantityKindRegistry.js'
+
+/**
+ * Parse an EPSG CRS string or number to a plain integer code.
+ * Accepts: 26911, "26911", "EPSG:26911", "epsg:26911"
+ */
+export function parseCrsCode(crs) {
+  if (typeof crs === 'number') return crs
+  const m = String(crs).match(/(\d+)$/)
+  return m ? parseInt(m[1]) : null
+}
+
+/** "EPSG:26911" → "epsg_26911_x" */
+export function crsToQkX(crs) {
+  return `epsg_${parseCrsCode(crs)}_x`
+}
+
+/** "EPSG:26911" → "epsg_26911_y" */
+export function crsToQkY(crs) {
+  return `epsg_${parseCrsCode(crs)}_y`
+}
+
+/** "epsg_26911_x" or "epsg_26911_y" → 26911, or null if not matching */
+export function qkToEpsgCode(qk) {
+  const m = String(qk).match(/^epsg_(\d+)_[xy]$/)
+  return m ? parseInt(m[1]) : null
+}
+
+/**
+ * Register a proj4 CRS definition and auto-register the matching
+ * epsg_CODE_x / epsg_CODE_y quantity kinds with labels from projnames.
+ * Useful for offline/air-gapped environments where network access is unavailable.
+ *
+ * @param {number} epsgCode - e.g. 26911
+ * @param {string} proj4string - e.g. "+proj=utm +zone=11 +datum=NAD83 +units=m +no_defs"
+ */
+export function registerEpsgDef(epsgCode, proj4string) {
+  proj4.defs(`EPSG:${epsgCode}`, proj4string)
+  _registerQuantityKinds(epsgCode)
+}
+
+// ─── Internal auto-fetch machinery ───────────────────────────────────────────
+
+// Labels for EPSG codes absent from (or wrong in) the projnames package.
+const EPSG_LABEL_OVERRIDES = {
+  4326: 'WGS 84',
+}
+
+// Tracks codes whose quantity kinds have been registered (avoids duplicate work)
+const _registeredQkCodes = new Set()
+
+// In-flight fetch promises keyed by code (deduplicates concurrent requests)
+const _pendingFetches = new Map()
+
+function _registerQuantityKinds(code) {
+  if (_registeredQkCodes.has(code)) return
+  _registeredQkCodes.add(code)
+  const name = EPSG_LABEL_OVERRIDES[code] ?? byEpsg[code] ?? `EPSG:${code}`
+  registerAxisQuantityKind(`epsg_${code}_x`, { label: `${name} X`, scale: 'linear' })
+  registerAxisQuantityKind(`epsg_${code}_y`, { label: `${name} Y`, scale: 'linear' })
+}
+
+/**
+ * Ensure a CRS is defined in proj4 and has quantity kinds registered.
+ * - If already known to proj4, only registers quantity kinds (synchronous work).
+ * - Otherwise fetches the proj4 string from epsg.io (async).
+ * - Concurrent calls for the same code share a single in-flight request.
+ *
+ * @param {string|number} crs - e.g. "EPSG:26911", 26911
+ * @returns {Promise<void>}
+ */
+export async function ensureCrsDefined(crs) {
+  const code = parseCrsCode(crs)
+  if (!code) throw new Error(`Cannot parse CRS code from: ${crs}`)
+
+  const key = `EPSG:${code}`
+
+  // Register quantity kinds first — this is always synchronous (projnames lookup)
+  _registerQuantityKinds(code)
+
+  // If proj4 already has this definition (including built-ins 4326 and 3857), we're done
+  if (proj4.defs(key)) return
+
+  // Deduplicate concurrent fetches for the same code
+  if (!_pendingFetches.has(code)) {
+    const p = fetch(`https://epsg.io/${code}.proj4`)
+      .then(res => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        return res.text()
+      })
+      .then(def => {
+        proj4.defs(key, def.trim())
+      })
+      .finally(() => {
+        _pendingFetches.delete(code)
+      })
+    _pendingFetches.set(code, p)
+  }
+
+  try {
+    await _pendingFetches.get(code)
+  } catch (err) {
+    throw new Error(`Failed to fetch proj4 definition for ${key}: ${err.message}`)
+  }
+}
+
+/**
+ * Reproject a [x, y] point from one CRS to another.
+ * Both CRS strings are parsed via parseCrsCode (accepts "EPSG:N", "N", N).
+ * The CRS must already be registered (via registerEpsgDef or ensureCrsDefined).
+ *
+ * @param {string|number} fromCrs
+ * @param {string|number} toCrs
+ * @param {[number, number]} point
+ * @returns {[number, number]}
+ */
+export function reproject(fromCrs, toCrs, point) {
+  const from = `EPSG:${parseCrsCode(fromCrs)}`
+  const to = `EPSG:${parseCrsCode(toCrs)}`
+  return proj4(from, to).forward(point)
+}

package/src/FilterbarLayer.js

@@ -24,7 +24,7 @@ export const filterbarLayerType = new LayerType({
   `,
   frag: `
     precision mediump float;
-    void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); }
+    void main() { gl_FragColor = gladly_apply_color(vec4(0.0, 0.0, 0.0, 0.0)); }
   `,
 
   schema: () => ({

package/src/Layer.js

@@ -1,5 +1,5 @@
 export class Layer {
-  constructor({ type, attributes, uniforms, nameMap = {}, domains = {}, lineWidth = 1, primitive = "points", xAxis = "xaxis_bottom", yAxis = "yaxis_left", xAxisQuantityKind, yAxisQuantityKind, colorAxes = [], filterAxes = [], vertexCount = null, instanceCount = null, attributeDivisors = {} }) {
+  constructor({ type, attributes, uniforms, nameMap = {}, domains = {}, lineWidth = 1, primitive = "points", xAxis = "xaxis_bottom", yAxis = "yaxis_left", xAxisQuantityKind, yAxisQuantityKind, colorAxes = [], filterAxes = [], vertexCount = null, instanceCount = null, attributeDivisors = {}, blend = null }) {
     // Validate that all attributes are typed arrays
     for (const [key, value] of Object.entries(attributes)) {
       if (!(value instanceof Float32Array)) {
@@ -39,5 +39,6 @@ export class Layer {
     this.vertexCount = vertexCount
     this.instanceCount = instanceCount
     this.attributeDivisors = attributeDivisors
+    this.blend = blend
   }
 }

package/src/LayerType.js

@@ -11,6 +11,44 @@ function buildSpatialGlsl() {
 }`
 }
 
+function buildApplyColorGlsl() {
+  return `uniform float u_pickingMode;
+uniform float u_pickLayerIndex;
+varying float v_pickId;
+vec4 gladly_apply_color(vec4 color) {
+  if (u_pickingMode > 0.5) {
+    float layerIdx = u_pickLayerIndex + 1.0;
+    float dataIdx = floor(v_pickId + 0.5);
+    return vec4(
+      layerIdx / 255.0,
+      floor(dataIdx / 65536.0) / 255.0,
+      floor(mod(dataIdx, 65536.0) / 256.0) / 255.0,
+      mod(dataIdx, 256.0) / 255.0
+    );
+  }
+  return color;
+}`
+}
+
+function injectPickIdAssignment(src) {
+  const lastBrace = src.lastIndexOf('}')
+  if (lastBrace === -1) return src
+  return src.slice(0, lastBrace) + '  v_pickId = a_pickId;\n}'
+}
+
+function injectInto(src, helpers) {
+  const injected = helpers.filter(Boolean).join('\n')
+  if (!injected) return src
+  const versionRe = /^[ \t]*#version[^\n]*\n?/
+  const versionMatch = src.match(versionRe)
+  const version = versionMatch ? versionMatch[0] : ''
+  const rest = version ? src.slice(version.length) : src
+  const precisionRe = /^\s*precision\s+\S+\s+\S+\s*;\s*$/mg
+  const precisions = rest.match(precisionRe) ?? []
+  const body = rest.replace(precisionRe, '')
+  return version + precisions.join('\n') + '\n' + injected + '\n' + body
+}
+
 export class LayerType {
   constructor({
     name,
@@ -22,7 +60,7 @@ export class LayerType {
     // Optional dynamic resolver — overrides statics wherever it returns a non-undefined value
     getAxisConfig,
     // GPU rendering
-    vert, frag, schema, createLayer
+    vert, frag, schema, createLayer, createDrawCommand
   }) {
     this.name = name
     // Static declarations stored as-is (undefined = not declared)
@@ -38,6 +76,7 @@ export class LayerType {
     if (schema) this._schema = schema
     if (createLayer) this._createLayer = createLayer
     if (getAxisConfig) this._getAxisConfig = getAxisConfig
+    if (createDrawCommand) this.createDrawCommand = createDrawCommand
   }
 
   createDrawCommand(regl, layer) {
@@ -47,19 +86,29 @@ export class LayerType {
     // Build a single-entry uniform object with renamed key reading from the internal prop name.
     const u = (internalName) => ({ [shaderName(internalName)]: regl.prop(internalName) })
 
-    const attributes = Object.fromEntries(
-      Object.entries(layer.attributes).map(([key, buffer]) => {
-        const divisor = layer.attributeDivisors[key]
-        const attrObj = divisor !== undefined ? { buffer, divisor } : { buffer }
-        return [shaderName(key), attrObj]
-      })
-    )
+    const isInstanced = layer.instanceCount !== null
+    const pickCount = isInstanced ? layer.instanceCount : (layer.vertexCount ?? layer.attributes.x?.length ?? 0)
+    const pickIds = new Float32Array(pickCount)
+    for (let i = 0; i < pickCount; i++) pickIds[i] = i
+
+    const attributes = {
+      ...Object.fromEntries(
+        Object.entries(layer.attributes).map(([key, buffer]) => {
+          const divisor = layer.attributeDivisors[key]
+          const attrObj = divisor !== undefined ? { buffer, divisor } : { buffer }
+          return [shaderName(key), attrObj]
+        })
+      ),
+      a_pickId: isInstanced ? { buffer: regl.buffer(pickIds), divisor: 1 } : regl.buffer(pickIds)
+    }
 
     const uniforms = {
       ...u("xDomain"),
       ...u("yDomain"),
       ...u("xScaleType"),
       ...u("yScaleType"),
+      u_pickingMode: regl.prop('u_pickingMode'),
+      u_pickLayerIndex: regl.prop('u_pickLayerIndex'),
       ...Object.fromEntries(
         Object.entries(layer.uniforms).map(([key, value]) => [shaderName(key), value])
       )
@@ -79,28 +128,18 @@ export class LayerType {
     const spatialGlsl = buildSpatialGlsl()
     const colorGlsl = layer.colorAxes.length > 0 ? buildColorGlsl() : ''
     const filterGlsl = layer.filterAxes.length > 0 ? buildFilterGlsl() : ''
-    const injectInto = (src, helpers) => {
-      const injected = helpers.filter(Boolean).join('\n')
-      if (!injected) return src
-      const versionRe = /^[ \t]*#version[^\n]*\n?/
-      const versionMatch = src.match(versionRe)
-      const version = versionMatch ? versionMatch[0] : ''
-      const rest = version ? src.slice(version.length) : src
-      const precisionRe = /^\s*precision\s+\S+\s+\S+\s*;\s*$/mg
-      const precisions = rest.match(precisionRe) ?? []
-      const body = rest.replace(precisionRe, '')
-      return version + precisions.join('\n') + '\n' + injected + '\n' + body
-    }
+    const pickVertDecls = `attribute float a_pickId;\nvarying float v_pickId;`
 
     const drawConfig = {
-      vert: injectInto(this.vert, [spatialGlsl, colorGlsl, filterGlsl]),
-      frag: injectInto(this.frag, [colorGlsl, filterGlsl]),
+      vert: injectPickIdAssignment(injectInto(this.vert, [spatialGlsl, filterGlsl, pickVertDecls])),
+      frag: injectInto(this.frag, [buildApplyColorGlsl(), colorGlsl, filterGlsl]),
       attributes,
       uniforms,
       viewport: regl.prop("viewport"),
       primitive: layer.primitive,
       lineWidth: layer.lineWidth,
-      count: regl.prop("count")
+      count: regl.prop("count"),
+      ...(layer.blend ? { blend: layer.blend } : {})
     }
 
     if (layer.instanceCount !== null) {
@@ -158,6 +197,7 @@ export class LayerType {
       vertexCount: gpuConfig.vertexCount ?? null,
       instanceCount: gpuConfig.instanceCount ?? null,
       attributeDivisors: gpuConfig.attributeDivisors ?? {},
+      blend: gpuConfig.blend ?? null,
       xAxis: axisConfig.xAxis,
       yAxis: axisConfig.yAxis,
       xAxisQuantityKind: axisConfig.xAxisQuantityKind,

package/src/Plot.js

@@ -355,7 +355,8 @@ export class Plot {
   }
 
   _processLayers(layersConfig, data) {
-    for (const layerSpec of layersConfig) {
+    for (let configLayerIndex = 0; configLayerIndex < layersConfig.length; configLayerIndex++) {
+      const layerSpec = layersConfig[configLayerIndex]
       const entries = Object.entries(layerSpec)
       if (entries.length !== 1) {
         throw new Error("Each layer specification must have exactly one layer type key")
@@ -385,7 +386,8 @@ export class Plot {
 
       // Create one draw command per GPU config returned by the layer type.
       for (const layer of layerType.createLayer(parameters, data)) {
-        layer.draw = layer.type.createDrawCommand(this.regl, layer)
+        layer.configLayerIndex = configLayerIndex
+        layer.draw = layer.type.createDrawCommand(this.regl, layer, this)
         this.layers.push(layer)
       }
     }
@@ -811,7 +813,9 @@ export class Plot {
         xScaleType: xIsLog ? 1.0 : 0.0,
         yScaleType: yIsLog ? 1.0 : 0.0,
         viewport: viewport,
-        count: layer.vertexCount ?? layer.attributes.x?.length ?? 0
+        count: layer.vertexCount ?? layer.attributes.x?.length ?? 0,
+        u_pickingMode: 0.0,
+        u_pickLayerIndex: 0.0,
       }
 
       if (layer.instanceCount !== null) {
@@ -973,4 +977,92 @@ export class Plot {
 
     fullOverlay.call(zoomBehavior)
   }
+
+  lookup(x, y) {
+    const result = {}
+    if (!this.axisRegistry) return result
+    const plotX = x - this.margin.left
+    const plotY = y - this.margin.top
+    for (const axisId of AXES) {
+      const scale = this.axisRegistry.getScale(axisId)
+      if (!scale) continue
+      const qk = this.axisRegistry.axisQuantityKinds[axisId]
+      const value = axisId.includes('y') ? scale.invert(plotY) : scale.invert(plotX)
+      result[axisId] = value
+      if (qk) result[qk] = value
+    }
+    return result
+  }
+
+  on(eventType, callback) {
+    const handler = (e) => {
+      if (!this.container.contains(e.target)) return
+      const rect = this.container.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+      callback(e, this.lookup(x, y))
+    }
+    window.addEventListener(eventType, handler, { capture: true })
+    return { remove: () => window.removeEventListener(eventType, handler, { capture: true }) }
+  }
+
+  pick(x, y) {
+    if (!this.regl || !this.layers.length) return null
+
+    const fbo = this.regl.framebuffer({
+      width: this.width, height: this.height,
+      colorFormat: 'rgba', colorType: 'uint8', depth: false,
+    })
+
+    const glX = Math.round(x)
+    const glY = this.height - Math.round(y) - 1
+
+    let result = null
+    this.regl({ framebuffer: fbo })(() => {
+      this.regl.clear({ color: [0, 0, 0, 0] })
+      const viewport = {
+        x: this.margin.left, y: this.margin.bottom,
+        width: this.plotWidth, height: this.plotHeight
+      }
+      for (let i = 0; i < this.layers.length; i++) {
+        const layer = this.layers[i]
+        const xIsLog = layer.xAxis ? this.axisRegistry.isLogScale(layer.xAxis) : false
+        const yIsLog = layer.yAxis ? this.axisRegistry.isLogScale(layer.yAxis) : false
+        const props = {
+          xDomain: layer.xAxis ? this.axisRegistry.getScale(layer.xAxis).domain() : [0, 1],
+          yDomain: layer.yAxis ? this.axisRegistry.getScale(layer.yAxis).domain() : [0, 1],
+          xScaleType: xIsLog ? 1.0 : 0.0,
+          yScaleType: yIsLog ? 1.0 : 0.0,
+          viewport,
+          count: layer.vertexCount ?? layer.attributes.x?.length ?? 0,
+          u_pickingMode: 1.0,
+          u_pickLayerIndex: i,
+        }
+        if (layer.instanceCount !== null) props.instances = layer.instanceCount
+        for (const qk of layer.colorAxes) {
+          props[`colorscale_${qk}`] = this.colorAxisRegistry.getColorscaleIndex(qk)
+          const range = this.colorAxisRegistry.getRange(qk)
+          props[`color_range_${qk}`] = range ?? [0, 1]
+          props[`color_scale_type_${qk}`] = this._getScaleTypeFloat(qk)
+        }
+        for (const qk of layer.filterAxes) {
+          props[`filter_range_${qk}`] = this.filterAxisRegistry.getRangeUniform(qk)
+          props[`filter_scale_type_${qk}`] = this._getScaleTypeFloat(qk)
+        }
+        layer.draw(props)
+      }
+      const pixels = this.regl.read({ x: glX, y: glY, width: 1, height: 1 })
+      if (pixels[0] === 0) {
+        result = null
+      } else {
+        const layerIndex = pixels[0] - 1
+        const dataIndex = (pixels[1] << 16) | (pixels[2] << 8) | pixels[3]
+        const layer = this.layers[layerIndex]
+        result = { layerIndex, configLayerIndex: layer.configLayerIndex, dataIndex, layer }
+      }
+    })
+
+    fbo.destroy()
+    return result
+  }
 }

package/src/ScatterLayer.js

@@ -1,18 +1,20 @@
 import { LayerType } from "./LayerType.js"
 import { AXES } from "./AxisRegistry.js"
 import { registerLayerType } from "./LayerTypeRegistry.js"
+import { Data } from "./Data.js"
 
 export const scatterLayerType = new LayerType({
   name: "scatter",
 
-  getAxisConfig: function(parameters) {
+  getAxisConfig: function(parameters, data) {
+    const d = Data.wrap(data)
     const { xData, yData, vData, xAxis, yAxis } = parameters
     return {
       xAxis,
-      xAxisQuantityKind: xData,
+      xAxisQuantityKind: d.getQuantityKind(xData) ?? xData,
       yAxis,
-      yAxisQuantityKind: yData,
-      colorAxisQuantityKinds: [vData],
+      yAxisQuantityKind: d.getQuantityKind(yData) ?? yData,
+      colorAxisQuantityKinds: [d.getQuantityKind(vData) ?? vData],
     }
   },
 
@@ -39,13 +41,14 @@ export const scatterLayerType = new LayerType({
     uniform int colorscale;
     uniform vec2 color_range;
     uniform float color_scale_type;
+    uniform float alphaBlend;
     varying float value;
     void main() {
-      gl_FragColor = map_color_s(colorscale, color_range, value, color_scale_type);
+      gl_FragColor = map_color_s(colorscale, color_range, value, color_scale_type, alphaBlend);
     }
   `,
   schema: (data) => {
-    const dataProperties = data ? Object.keys(data) : []
+    const dataProperties = Data.wrap(data).columns()
     return {
       $schema: "https://json-schema.org/draft/2020-12/schema",
       type: "object",
@@ -76,31 +79,54 @@ export const scatterLayerType = new LayerType({
           enum: AXES.filter(a => a.includes("y")),
           default: "yaxis_left",
           description: "Which y-axis to use for this layer"
+        },
+        alphaBlend: {
+          type: "boolean",
+          default: false,
+          description: "Map the normalized color value to alpha so low values fade to transparent"
         }
       },
       required: ["xData", "yData", "vData"]
     }
   },
   createLayer: function(parameters, data) {
-    const { xData, yData, vData } = parameters
+    const d = Data.wrap(data)
+    const { xData, yData, vData, alphaBlend = false } = parameters
+
+    const xQK = d.getQuantityKind(xData) ?? xData
+    const yQK = d.getQuantityKind(yData) ?? yData
+    const vQK = d.getQuantityKind(vData) ?? vData
+
+    const x = d.getData(xData)
+    const y = d.getData(yData)
+    const v = d.getData(vData)
 
-    const x = data[xData]
-    const y = data[yData]
-    const v = data[vData]
+    if (!x) throw new Error(`Data column '${xData}' not found`)
+    if (!y) throw new Error(`Data column '${yData}' not found`)
+    if (!v) throw new Error(`Data column '${vData}' not found`)
 
-    if (!x) throw new Error(`Data property '${xData}' not found in data object`)
-    if (!y) throw new Error(`Data property '${yData}' not found in data object`)
-    if (!v) throw new Error(`Data property '${vData}' not found in data object`)
+    const domains = {}
+    const xDomain = d.getDomain(xData)
+    const yDomain = d.getDomain(yData)
+    const vDomain = d.getDomain(vData)
+    if (xDomain) domains[xQK] = xDomain
+    if (yDomain) domains[yQK] = yDomain
+    if (vDomain) domains[vQK] = vDomain
 
     return [{
-      attributes: { x, y, [vData]: v },
-      uniforms: {},
+      attributes: { x, y, [vQK]: v },
+      uniforms: { alphaBlend: alphaBlend ? 1.0 : 0.0 },
+      domains,
       nameMap: {
-        [vData]: 'color_data',
-        [`colorscale_${vData}`]: 'colorscale',
-        [`color_range_${vData}`]: 'color_range',
-        [`color_scale_type_${vData}`]: 'color_scale_type',
+        [vQK]: 'color_data',
+        [`colorscale_${vQK}`]: 'colorscale',
+        [`color_range_${vQK}`]: 'color_range',
+        [`color_scale_type_${vQK}`]: 'color_scale_type',
       },
+      blend: alphaBlend ? {
+        enable: true,
+        func: { srcRGB: 'src alpha', dstRGB: 'one minus src alpha', srcAlpha: 0, dstAlpha: 1 },
+      } : null,
     }]
   }
 })