Sankey with circular links
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 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
}
```
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>