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='/tomshanley/'>tomshanley</a>'s block: <a href='/tomshanley/874923fe54b173735b456479423ac7d6'>Sankey with circular link and animated dashes</a>
forked from <a href='/noblemillie/'>noblemillie</a>'s block: <a href='/noblemillie/99ecbba9dbda66f5fcf5a2d3bce43f44'>Sankey with circular link and animated dashes</a>
forked from <a href='/noblemillie/'>noblemillie</a>'s block: <a href='/noblemillie/3881527a20ce1e172f4092cf367a083b'>Sankey with circular link and animated dashes</a>
xxxxxxxxxx
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-sankey-circular.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="example-data.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100i" rel="stylesheet">
<title>Sankey with circular links</title>
<style>
body {
font-family: 'Roboto', sans-serif;
/*background: #E3D4C1;*/
/*background: #000;*/
}
rect {
shape-rendering: crispEdges;
}
text {
/*text-shadow: 0 1px 0 #fff;*/
font-size: 12px;
/*font-family: 'Roboto', sans-serif;*/
font-family: monospace;
/*fill: white;*/
}
.link {
fill: none;
}
</style>
</head>
<body>
<h1>Sankey with circular links</h1>
<div id="chart"></div>
<script>
var margin = { top: 150, right: 100, bottom: 130, left: 120 };
var width = 1000;
var height = 400;
let data = data2;
const nodePadding = 40;
const circularLinkGap = 2;
var sankey = d3.sankey()
.nodeWidth(30)
.nodePadding(nodePadding)
.nodePaddingRatio(0.5)
.scale(0.5)
.size([width, height])
.nodeId(function (d) {
return d.name;
})
.nodeAlign(d3.sankeyJustify)
.iterations(32);
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
var linkG = g.append("g")
.attr("class", "links")
.attr("fill", "none")
.attr("stroke-opacity", 0.2)
.selectAll("path");
var nodeG = g.append("g")
.attr("class", "nodes")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("g");
//run the Sankey + circular over the data
let sankeyData = sankey(data);
let sankeyNodes = sankeyData.nodes;
let sankeyLinks = sankeyData.links;
let depthExtent = d3.extent(sankeyNodes, function (d) { return d.depth; });
var nodeColour = d3.scaleSequential(d3.interpolateCool)
.domain([0,width]);
//Adjust link Y coordinates based on target/source Y positions
var node = nodeG.data(sankeyNodes)
.enter()
.append("g");
node.append("rect")
.attr("x", function (d) { return d.x0; })
.attr("y", function (d) { return d.y0; })
.attr("height", function (d) { return d.y1 - d.y0; })
.attr("width", function (d) { return d.x1 - d.x0; })
.style("fill", function (d) { return nodeColour(d.x0); })
.style("opacity", 0.5)
.on("mouseover", function (d) {
let thisName = d.name;
node.selectAll("rect")
.style("opacity", function (d) {
return highlightNodes(d, thisName)
})
d3.selectAll(".sankey-link")
.style("opacity", function (l) {
return l.source.name == thisName || l.target.name == thisName ? 1 : 0.3;
})
node.selectAll("text")
.style("opacity", function (d) {
return highlightNodes(d, thisName)
})
})
.on("mouseout", function (d) {
d3.selectAll("rect").style("opacity", 0.5);
d3.selectAll(".sankey-link").style("opacity", 0.7);
d3.selectAll("text").style("opacity", 1);
})
node.append("text")
.attr("x", function (d) { return (d.x0 + d.x1) / 2; })
.attr("y", function (d) { return d.y0 - 12; })
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function (d) { return d.name; });
node.append("title")
.text(function (d) { return d.name + "\n" + (d.value); });
var link = linkG.data(sankeyLinks)
.enter()
.append("g")
link.append("path")
.attr("class", "sankey-link")
.attr("d", sankeyPath)
.style("stroke-width", function (d) { return Math.max(1, d.width); })
.style("opacity", 0.7)
.style("stroke", function (link, i) {
return link.circular ? "red" : "black"
})
link.append("title")
.text(function (d) {
return d.source.name + " → " + d.target.name + "\n Index: " + (d.index);
});
//ARROWS
var arrowsG = linkG.data(sankeyLinks)
.enter()
.append("g")
.attr("class", "g-arrow")
.call(appendArrows, 10, 10, 4) //arrow length, gap, arrow head size
arrowsG.selectAll("path")
.style("stroke-width", "10")
//.style("stroke-dasharray", "10,10")
arrowsG.selectAll(".arrow-head").remove()
let duration = 0.1
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
}
function highlightNodes(node, name) {
let opacity = 0.3
if (node.name == name) {
opacity = 1;
}
node.sourceLinks.forEach(function (link) {
if (link.target.name == name) {
opacity = 1;
};
})
node.targetLinks.forEach(function (link) {
if (link.source.name == name) {
opacity = 1;
};
})
return opacity;
}
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js