MAIDR Documentation - v4.4.0
    Preparing search index...
    • Binds a D3.js error-bar chart to MAIDR, generating the accessible data representation.

      Point selector at one element per estimate — the canonical D3 idiom is a <g> holding the interval's <line> and the estimate's marker, and that group is what the reader's cursor should highlight.

      The bounds are absolute positions on the value axis, not half-widths. Producers disagree about which they hand out, so the grammar fixes one and each adapter converts. The binder cannot tell an offset from a bound by looking at it, so a datum carrying ±se needs a function accessor: yMin: d => d.mean - 1.96 * d.se.

      Parameters

      • svg: Element

        The SVG element containing the D3 error-bar chart.

      • config: D3ErrorBarConfig

        Configuration specifying the selector and data accessors.

      Returns D3BinderResult

      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 …" or "Property '…' not found on datum".

      • MaidrD3
      • useD3Adapter
      const result = bindD3ErrorBar(svgElement, {
      selector: 'g.estimate',
      title: 'Mean Response by Dose',
      axes: { x: 'Group', y: 'Response' },
      x: 'group',
      y: 'mean',
      yMin: 'ciLow',
      yMax: 'ciHigh',
      });