MAIDR Documentation - v4.4.0
    Preparing search index...

    Function bindD3Parallel

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

      Point selector at the observation paths — one per row of your data — and list the axes in dimensions, in the order they are drawn. label names the observation, which is what the trace announces the row as.

      The trace derives each axis' range from the data itself and sonifies every value against its own axis, so nothing here needs per-axis minima: a car with the best economy and the worst power sounds like exactly that, rather than like the units the two variables happen to be measured in.

      Parameters

      • svg: Element

        The SVG element containing the D3 parallel coordinates plot.

      • config: D3ParallelConfig

        Configuration specifying the selector, dimensions and label.

      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 …".

      • MaidrD3
      • useD3Adapter
      const result = bindD3Parallel(svgElement, {
        selector: 'path.observation',
        title: 'Car Characteristics',
        axes: { x: 'Variable', y: 'Value', fill: 'Car' },
        dimensions: ['mpg', 'hp', 'weight'],
        label: 'name',
      });

    Settings

    Member Visibility