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 descriptionA 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