The SVG element containing the D3 contour plot.
Configuration specifying the selector and grid transforms.
A D3BinderResult with the MAIDR data and generated layer.
Timing — call after D3 has rendered. Like every D3 binder, this reads
each matched element's D3-bound __data__; calling it before
.data().join() has run (or before the SVG is mounted) throws "No elements
found for selector …".
const contours = d3.contours().size([n, m])(values);
svg.selectAll('path.contour').data(contours).join('path').attr('d', d3.geoPath());
const result = bindD3Contour(svgElement, {
selector: 'path.contour',
title: 'Density Field',
axes: { x: 'X', y: 'Y', fill: 'Density' },
x: column => x0 + column * cellWidth,
y: row => y0 + row * cellHeight,
});
Binds a D3.js contour plot to MAIDR, generating the accessible data representation.
Point
selectorat the level paths — one per threshold — and givexandythe transforms from the gridd3.contours()walked back onto the chart's axes (x: i => x0 + i * dx), or the inverse scales when the geometry isd3.contourDensity()'s pixels (x: px => xScale.invert(px)).A level drawn as several disjoint rings is flattened into one curve, in the order the rings appear: a row of the payload is a single polyline. Every point announced is a real point of that level; what a reader cannot hear is the jump from the end of one ring to the start of the next.
The rows keep the order the paths were drawn in, which for
d3.contours()is ascending threshold — the orderContourTracemeasures the gap to the adjacent* level in, which is how it reports the gradient.