All examples By author By category About

tomshanley

Sankey with circular link and animated dashes

A version of the Sankey chart with circular links, with a stroke-dasharray animated to show direction.

Compare this version which uses arrows.

The relevant piece of code:

    arrowsG.selectAll("path")
      .style("stroke-width", "10")
      .style("stroke-dasharray", "10,10")

    let duration = 5
    let maxOffset = 10;
    let percentageOffset = 1;

    var animateDash = setInterval(updateDash, duration);

    function updateDash() {

      arrowsG.selectAll("path")
      .style("stroke-dashoffset", percentageOffset * maxOffset)

      percentageOffset = percentageOffset == 0 ? 1 : percentageOffset - 0.01

    }
    ```

forked from <a href='/tomshanley/'>tomshanley</a>'s block: <a href='/tomshanley/874923fe54b173735b456479423ac7d6'>Sankey with circular link and animated dashes</a>