Search code examples
javascriptd3.jschord-diagramchord

Toggle-able D3 chord diagram


I would like to modify the following chord diagram in D3.js,

https://observablehq.com/@d3/chord-dependency-diagram?collection=@d3/d3-chord

where clicking on a category would minimize the category and remove the ribbons


Solution

  • Done. Follow the link below to see the demo. Essentially, you just need to make an update function that updates the labels, chords, and arcs, and then add to the arcs a click event listener that modifies the matrix data and calls the update function. Adding the animation is a little tricky because you need to tween the matrix data between the two states before and after clicking an arc. Excluding the data, it could still be done in about 200 lines.

    const update = () => {
        update_chord();
        update_arcs();
        update_ribbons();
    };
    

    JSFiddle demo