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

      A violin is d3.area() over the KDE bins, mirrored about each category's centre, so selector matches one <path> per category with that category's bin array bound to it — exactly the shape bindD3Line reads off a line path. Point boxSelector at the box overlay's groups, when the chart draws one, and the summary is read from them the way bindD3Box reads a box.

      Parameters

      • svg: Element

        The SVG element containing the D3 violin plot.

      • config: D3ViolinConfig

        Configuration specifying selectors and data accessors.

      Returns D3BinderResult

      A D3BinderResult whose layer is the KDE and whose layers carries the box summary too, when the chart states one.

      The KDE is never used to derive the summary. Quartiles can be computed off a density curve, and doing so would announce numbers that are not the data's: a KDE is smoothed, so its quartiles belong to the bandwidth rather than to the observations, and a reader told "Q1 is 4.2" cannot tell that it was inferred. A violin drawn without a summary is read as its curves alone.

      Timing — call after D3 has rendered, as with every binder here: the bound __data__ is what is read, so calling before .data().join() throws "No elements found for selector …".

      bindD3Violin(svgElement, {
      selector: 'path.violin',
      boxSelector: 'g.box',
      title: 'Distribution by Species',
      axes: { x: 'Species', y: 'Sepal length' },
      fill: 'species',
      value: 'v',
      density: 'estimate',
      });