MAIDR Documentation - v3.65.0
    Preparing search index...

    Function bindD3Box

    • Binds a D3.js box plot to MAIDR, generating the accessible data representation.

      Box plots in D3 are typically constructed from multiple SVG elements per box (a rect for the IQR, lines for whiskers, a line for the median, and circles for outliers). This binder extracts statistical summary data from D3-bound data on the box group elements.

      Parameters

      • svg: Element

        The SVG element containing the D3 box plot.

      • config: D3BoxConfig

        Configuration specifying selectors and data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      Timing — call after D3 has rendered. This function reads each matched box-group element's D3-bound __data__: the 5-number summary (min/q1/q2/q3/max) plus optional outlier arrays. 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".

      Typical call sites:

      • Vanilla JS: right after your selectAll(...).data(...).join(...) chain.
      • React: inside useEffect, never during render. Prefer MaidrD3 / useD3Adapter from maidr/react, which handle the post-render timing for you.
      • Async data: inside the .then(...) of your fetch, after drawing.
      • MaidrD3
      • useD3Adapter
      const result = bindD3Box(svgElement, {
        selector: 'g.box',
        title: 'Distribution by Category',
        axes: { x: 'Category', y: 'Value' },
        fill: 'category',
        min: 'whiskerLow',
        q1: 'q1',
        q2: 'median',
        q3: 'q3',
        max: 'whiskerHigh',
        lowerOutliers: 'lowOutliers',
        upperOutliers: 'highOutliers',
      });

    Settings

    Member Visibility