The SVG element containing the D3 map.
Configuration specifying the selector and data accessors.
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 …".
Error when the selector matches nothing, when a matched element carries no D3-bound datum, or when no region resolves a value.
svg.selectAll('path.region')
.data(topojson.feature(us, us.objects.states).features)
.join('path')
.attr('d', d3.geoPath(projection));
const result = bindD3Choropleth(svgElement, {
selector: 'path.region',
title: 'Unemployment by State',
axes: { x: 'State', y: 'Rate' },
value: d => rateByFips.get(d.id),
lon: d => d3.geoCentroid(d)[0], // DEGREES — never geoPath().centroid
lat: d => d3.geoCentroid(d)[1],
});
Binds a D3.js choropleth map to MAIDR, generating the accessible data representation.
Point
selectorat the region paths — one per feature — and the defaults read the name and the value off the feature'sproperties. Passlonandlatasd3.geoCentroid(d)[0]/[1]: with them the arrow keys move north, south, east and west across the map, and without them the map is read as a region list in the order it was drawn.A region whose value does not resolve is left out of the payload rather than shaded with a zero — a map's "no data" regions are drawn, and announcing one as zero is a number the chart does not contain. Its path is left out of the highlight selectors with it, so the two stay in step.