Binds a D3.js dumbbell chart to MAIDR, generating the accessible data
representation.
Point selector at the connectors — one <line> per row — rather than
at the dots. A dumbbell draws one segment and two dots per row, so the
connectors are the elements that map one-to-one onto the data; a selector
matching the dots would produce twice as many elements as rows and the trace
would withdraw highlighting rather than pair them wrongly.
Name the two ends with startLabel / endLabel. They are what the chart's
legend gives a sighted reader for free: without them a chart of life
expectancy in 1990 against 2020 tells the reader they are on the "start"
dot, which is the one thing they already knew.
A D3BinderResult with the MAIDR data and generated layer.
Remarks
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 …" or "Property '…' not found on datum".
Binds a D3.js dumbbell chart to MAIDR, generating the accessible data representation.
Point
selectorat the connectors — one<line>per row — rather than at the dots. A dumbbell draws one segment and two dots per row, so the connectors are the elements that map one-to-one onto the data; a selector matching the dots would produce twice as many elements as rows and the trace would withdraw highlighting rather than pair them wrongly.Name the two ends with
startLabel/endLabel. They are what the chart's legend gives a sighted reader for free: without them a chart of life expectancy in 1990 against 2020 tells the reader they are on the "start" dot, which is the one thing they already knew.