chart = {
const width_ = width > 650 ? 850 : 350;
const height = 650;
const sankey = d3
.sankey()
.nodeSort(null)
.linkSort(null)
.nodeWidth(4)
.nodePadding(7)
.extent([
[width > 650 ? 400 : 5, 60],
[width_, height - 0]
]);
const color = d3.scaleOrdinal(["Perished"], ["blue"]).unknown("blue");
const svg = d3
.create("svg")
.attr("viewBox", [width > 650 ? 200 : 0, 0, width_, height])
.attr("width", width_)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
const { nodes, links } = sankey({
nodes: graph.nodes.map((d) => Object.create(d)),
links: graph.links.map((d) => Object.create(d))
});
svg
.append("g")
.selectAll("rect")
.data(nodes)
.join("rect")
.attr("fill", "blue")
.attr("x", (d) => d.x0)
.attr("y", (d) => d.y0)
.attr("height", (d) => d.y1 - d.y0)
.attr("width", (d) => d.x1 - d.x0)
.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)
.attr("opacity", 0.4)
.style("mix-blend-mode", "multiply")
.append("title")
.text((d) => `${d.names.join(" → ")}\n${d.value.toLocaleString()}`);
width > 650
? svg
.append("g")
.style("font", "13px sans-serif")
.selectAll("text")
.data(nodes)
.join("text")
.attr("x", (d) => (d.x0 < width_ / 2 ? d.x1 - 6 : d.x0 + 6))
.attr("y", (d) => (d.y1 + d.y0) / 2)
.attr("dy", "0.35em")
.attr("fill", "#555")
.attr("text-anchor", (d) => (d.x0 < width_ / 2 ? "end" : "start"))
.text((d) => d.name)
.append("tspan")
.attr("fill-opacity", 0.7)
.text((d) => ` ${d.value.toLocaleString()}`)
: svg
.append("g")
.style("font", "10px sans-serif")
.selectAll("text")
.data(nodes)
.join("text")
.attr("x", (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6))
.attr("y", (d) => (d.y1 + d.y0) / 2)
.attr("dy", "0.35em")
.attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end"))
.text((d) => d.name)
.append("tspan")
.attr("fill-opacity", 0.7)
.text((d) => ` ${d.value.toLocaleString()}`);
return svg.node();
}