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

    Function bindD3Chord

    • Binds a D3.js chord diagram to MAIDR.

      selector matches the ribbon <path> elements d3.ribbon() drew from d3.chord()(matrix) — the chords themselves, not the group arcs around the dial.

      Declare names. A chord layout is computed from a matrix, so each end of a ribbon is a row index ({ index, value, … }) and the labels a sighted reader takes from the ring are not in the data at all. Without names the chart announces "0 to 3" — true, and useless.

      Parameters

      • svg: Element

        The SVG element containing the D3 chord diagram.

      • config: D3FlowConfig

        Configuration specifying the selector, the group names and any data accessors.

      Returns D3BinderResult

      A D3BinderResult with the MAIDR data and generated layer.

      const chords = d3.chord()(matrix);
      svg.selectAll('path.chord').data(chords).join('path').attr('d', d3.ribbon()…);

      bindD3Chord(svgElement, {
        selector: 'path.chord',
        title: 'Migration between regions',
        axes: { x: 'Region', y: 'People' },
        names: ['Africa', 'Americas', 'Asia', 'Europe'],
      });

    Settings

    Member Visibility