Binds a D3.js diverging bar chart — a population pyramid, a Likert scale —
to MAIDR.
A diverging chart is two series drawn back to back across a shared category
axis, which is the segmented extraction with a different reading: the sign
of a value is a side, not a magnitude, and the trace pitches the
magnitude while announcing the side.
So emit the values as the chart draws them — the left-hand series
negative — and do not take their absolute value. Handed unsigned data the
trace has no way to tell the two sides apart, and the balance it reports
between them becomes a total instead of a comparison.
A pyramid is usually drawn on its side. Pass
orientation: Orientation.HORIZONTAL (with x reading the signed value and
y the category) so the axes are announced the way it was drawn.
Parameters
svg: Element
The SVG element containing the D3 diverging bar chart.
A D3BinderResult with the MAIDR data and generated layer.
Example
bindD3Diverging(svgElement, { selector:'rect.band', title:'Population by Age Band', orientation:Orientation.HORIZONTAL, axes: { x:'People, thousands', y:'Age band', fill:'Sex' }, x:'people', // negative for the side drawn to the left y:'band', fill:'sex', });
Binds a D3.js diverging bar chart — a population pyramid, a Likert scale — to MAIDR.
A diverging chart is two series drawn back to back across a shared category axis, which is the segmented extraction with a different reading: the sign of a value is a side, not a magnitude, and the trace pitches the magnitude while announcing the side.
So emit the values as the chart draws them — the left-hand series negative — and do not take their absolute value. Handed unsigned data the trace has no way to tell the two sides apart, and the balance it reports between them becomes a total instead of a comparison.
A pyramid is usually drawn on its side. Pass
orientation: Orientation.HORIZONTAL(withxreading the signed value andythe category) so the axes are announced the way it was drawn.