// [d3-sankey](https://github.com/d3/d3-sankey) is not part of the D3 bundle
d3 = require("d3@7", "d3-sankey@0.12")
import {select} from "d3-selection";
import {sankey, sankeyLinkHorizontal} from "d3-sankey";
sankeyChart = {
const data = {
nodes: [
{ name: "Iron" },
{ name: "Mag Pressure Tank" },
],
links: [
{ source: "Iron", target: "Mag Pressure Tank", value: 10 },
]
};
const width = 960;
const height = 600;
const svg = select(html`<svg width=${width} height=${height}></svg>`);
const mySankey = sankey()
.nodeWidth(15)
.nodePadding(10)
.extent([[1, 1], [width - 1, height - 6]]);
mySankey(data);
svg.append("g")
.selectAll(".node")
.data(data.nodes)
.enter().append("rect")
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("height", d => d.y1 - d.y0)
.attr("width", d => d.x1 - d.x0)
.attr("fill", "blue");
svg.append("g")
.selectAll(".link")
.data(data.links)
.enter().append("path")
.attr("d", sankeyLinkHorizontal())
.attr("stroke", "gray")
.attr("stroke-width", d => d.width);
return svg.node();
}
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.
