Public
Edited
Jun 5, 2020
1 fork
chart = {
const svg = d3.create("svg").attr('viewBox', [0, 0, width, height]);
const { nodes, links } = sankey({
nodes: graph.nodes.map(d => Object.assign({}, d)),
links: graph.links.map(d => Object.assign({}, d))
});
svg
.append('g')
.selectAll('rect')
.data(nodes)
.join('rect')
.attr('x', d => d.x0)
.attr('y', d => d.y0)
.attr('width', d => d.x1 - d.x0)
.attr('height', d => d.y1 - d.y0)
.append("title")
.text(d => `${d.name}\n${d.value.toLocaleString()}`);
svg
.append("g")
.attr("fill", "none")
.selectAll("g")
.data(links)
.join("path")
.attr("d", d3.sankeyLinkHorizontal())
.attr("stroke", d => color(d.names[0]))
.attr("stroke-width", d => d.width)
.style("mix-blend-mode", "multiply")
.append("title")
.text(d => `${d.names.join(" → ")}\n${d.value.toLocaleString()}`);
return svg.node();
}
height = 720
width = 975
sankey = d3
.sankey()
.nodeSort(null)
.linkSort(null)
.nodeWidth(4)
.nodePadding(20)
.extent([[0, 5], [width, height - 5]])
color = d3.scaleOrdinal(["Perished"], ["#da4f81"]).unknown("#ccc")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
