TNCC Workflow for LSP
This visualization demonstrates a Tensor Network (TNCC) workflow using a Sankey diagram with circular links, rendered using D3 v4. The chart displays the flow of data through multiple processing stages—from startA and startB, through a series of processes (process1 through process16), to finishA and finishB. The distinctive feature is the animated stroke-dasharray applied to the links: dashes move along each path to indicate the direction of flow. This animation is implemented via a `setInterval` that updates the `stroke-dashoffset` style in small increments, creating a continuous streaming effect that replaces static arrow markers. The circular link handling is provided by the d3-sankey-circular library, enabling visualization of cycles and feedback loops within the network.
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>
forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/f152f0dfcff68e1e0a677f5dedece3ed'>Sankey with circular link and animated dashes</a>