Skip to main content
100%

Sankey with circular links

✓ Published0🌍 Public
TThanaporn-sk
Last edited Sep 6, 2017
Created on Sep 6, 2017

This example visualizes a Sankey diagram with circular links, showing the flow of values between interconnected processes where links can loop back to earlier stages. The diagram uses the `d3-sankey-circular` library to handle cyclic dependencies, rendering nodes as rectangles and links as curved paths. A set of animated stroke-dasharray paths, updated via `setInterval`, visually indicates the direction of flow along each link. The data is hardcoded in `example-data.js`, and the visualization is built with D3 v4, rendering to SVG with interactive hover effects that highlight connected nodes and links.

AI-generated description

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='http://bl.ocks.org/tomshanley/'>tomshanley</a>'s block: <a href='http://bl.ocks.org/tomshanley/874923fe54b173735b456479423ac7d6'>Sankey with circular link and animated dashes</a>
mit Licensed

Similar vizzes