Binds a D3.js ridgeline (joy) plot to MAIDR, generating the accessible data
representation.
Point selector at the group curves — one <path> per ridge. Each path's
datum supplies the group's samples: the array itself, a d3.groups() tuple,
or a values/samples/points/curve property holding one.
The three per-sample fields are named for what they mean rather than for the
payload keys they land on, because a ridgeline's value axis is usually the
drawn x: group names the ridge, value is the position along the value
axis, and density is the curve's own half-width there — the density
before the ridge's baseline was added to it. Passing the drawn y for
density is the one mistake this chart type invites; the binder cannot
detect it, so it is worth checking against the array you fed
d3.area().y1(...).
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 …".
See
MaidrD3
useD3Adapter
Example
constresult = bindD3Ridgeline(svgElement, { selector:'path.ridge', title:'Delivery Time by Cohort', axes: { x:'Days', y:'Cohort', fill:'Cohort' }, group:'cohort', value:'days', density:'density', });
Binds a D3.js ridgeline (joy) plot to MAIDR, generating the accessible data representation.
Point
selectorat the group curves — one<path>per ridge. Each path's datum supplies the group's samples: the array itself, ad3.groups()tuple, or avalues/samples/points/curveproperty holding one.The three per-sample fields are named for what they mean rather than for the payload keys they land on, because a ridgeline's value axis is usually the drawn
x:groupnames the ridge,valueis the position along the value axis, anddensityis the curve's own half-width there — the density before the ridge's baseline was added to it. Passing the drawn y fordensityis the one mistake this chart type invites; the binder cannot detect it, so it is worth checking against the array you fedd3.area().y1(...).