Skip to main content
100%

Sankey with circular links

✓ Published0🌍 Public
SSwatkinsVU
Last edited Apr 29, 2020
Created on Mar 22, 2020

A Sankey diagram with circular links shows the flow of patients through hospital departments, including circular paths where nodes at later stages return to earlier ones. Each link is rendered as a red or black path, and a dashed stroke animation indicates flow direction. The graphic uses the D3.js library, specifically the `d3.sankey` module, along with SVG rendering. The code animates the stroke-dashoffset of the circular paths to show the direction of movement.

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

    }
    ```
mit Licensed

Similar vizzes