@mapequation/d3gl

@mapequation/d3gl

GPU-accelerated rendering for d3 — especially maps with GeoJSON and grid-cell data, with switchable SVG / Canvas2D / WebGL2 backends.

d3’s generators (d3-geo’s geoPath, d3-shape, d3-hierarchy links) don’t draw; they emit path commands to a context. d3gl implements that same context across SVG / Canvas2D / WebGL2, so any context-driven d3 generator can render on the GPU unchanged. Geometry is projected & tessellated once; pan/zoom is one transform-matrix uniform and recolor/show-hide is one texture write.

Install

npm i @mapequation/d3gl
# React components also need:  npm i react react-dom   (optional peer deps)

Subpath exports

import { Scene } from "@mapequation/d3gl";            // core (root entry)
import { geoMap, plot } from "@mapequation/d3gl/map"; // interactive engines
import { fitProjection } from "@mapequation/d3gl/geo"; // project-once primitives
import { D3GL } from "@mapequation/d3gl/react";        // React component
// also: /webgl  /canvas  /svg  /labels

Subpath	Responsibility
(root)	Scene, PathContext, tessellation, stroke expansion, hit-testing
/canvas	Canvas2D backend
/webgl	luma.gl v9 WebGL2 backend (palette-texture color, GPU picking, PNG export)
/svg	SVG backend + vector export
/geo	projection + GeoJSON project-once helpers, inverse projection
/labels	HTML label overlay with culling
/map	geoMap + plot engines with d3-zoom wiring
/react	headless MapController + <D3GL> component

See the repository for full docs, examples, and the live demo.

License

MIT © Daniel Edler

Modules

Module	Description
canvas	The Canvas2D backend. CanvasBackend renders render layers to a 2D canvas context (honouring per-layer clipping and world/screen size modes), and CanvasContext is a passthrough core!PathContext that draws directly to a CanvasRenderingContext2D.
core	The backend-agnostic scene model: a retained Scene that records vector geometry through a PathContext, flattens curves, groups rings, tessellates fills, expands strokes, and packs everything into GPU-ready buffers with per-drawable color/flag side-tables. HitIndex provides CPU hit-testing over the same data.
geo	Geographic projection plus a project-once GeoJSON pipeline. fitProjection fits any d3 projection to a feature collection and viewport, featureGroup projects features into a core!Scene group exactly once, and viewTransform / lonLatFromScreen / referenceFromScreen map between screen, reference, and lon/lat space.
labels	HTML label overlay. LabelLayer keeps geometry on the GPU and renders only the visible labels into the DOM, positioning anchors (reference-space) under a core!ViewTransform; cullLabels does the viewport + collision culling.
map	The high-level engines that wire a core!Scene, a backend, and d3-zoom together: geoMap (a project-once map engine over GeoJSON) and plot (a generic 2D engine driven by per-datum draw callbacks). createBackend selects the rendering backend by BackendType.
network	-
react	React bindings. The D3GL component mounts a canvas, builds it from initial groups + a core!ViewTransform, renders, and hands back the headless MapController; GeoMap wraps the project-once map engine.
svg	The SVG backend and publication-quality vector export. SvgBackend renders render layers as SVG, SvgPathContext is a core!PathContext that records path d strings, and svgDocument / svgFromLayers serialize geometry to a standalone SVG document.
webgl	The luma.gl v9 WebGL2 backend. WebGLBackend draws render layers via a GroupRenderer (palette-texture color keyed by drawableId, a mat3 transform uniform, texture-write recolor), with GPU picking, clipFromView view math, and toPNG export.