graph = {
const graph = layout(energy);
graph.nodes.forEach((node) => {
node.color = color(node.index / graph.nodes.length);
});
graph.links.forEach((link) => {
link.gradient = DOM.uid("gradient");
link.path = DOM.uid("path");
});
return graph;
}
layout = sankey.sankey()
.size(size)
.nodePadding(nodePadding)
.nodeWidth(nodeWidth)
format = (value) => {
let f = d3.format(",.0f");
return f(value) + " TWh";
}
color = (value) => {
return d3.interpolateRainbow(value);
}
size = [width - 2 * margin, height - 2 * margin]
height = 600
margin = 10
nodeWidth = 20
nodePadding = 10
duration = 250
arrow = "\u2192"
d3 = require("d3@5.9")
sankey = require("d3-sankey@0.12")
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.
