here to learn
chart = {
const svg = d3.select(DOM.svg(width, height))
.style("background", "#fff")
.style("width", "100%")
.style("height", "auto");
const height1 = height/2
const data1 = data(source);
const {nodes, links} = sankey(width/3-5, height1)({
nodes: data1.nodes.map(d => Object.assign({}, d)),
links: data(source).links.map(d => Object.assign({}, d))
});
const h1 = nodes[4].y1 - nodes[4].y0;
const data2 = data(source2);
// height is divided into the heights of the left-most nodes (y1-y0) + padding in between each of them
// It seems that we need 1.5*padding here?
const height2 = h1 + 1.5*padding + (h1/data1.links[3].value)*data2.links[1].value;
const {nodes:nodes2, links:links2} = sankey(width/3-5, height2)({
nodes: data2.nodes.map(d => Object.assign({}, d)),
links: data2.links.map(d => Object.assign({}, d))
});
const h2 = nodes2[4].y1 - nodes2[4].y0;
const data3 = data(source3);
const height3 = h2 + 1.5*padding + (h2/data2.links[3].value)*data3.links[1].value;
const {nodes:nodes3, links:links3} = sankey(width/3-5, height3)({
nodes: data3.nodes.map(d => Object.assign({}, d)),
links: data3.links.map(d => Object.assign({}, d))
});
const sankey1 = drawSankey(svg, nodes, links, width/3-5);
const sx1 = nodes[4].x1+5;
const sy1 = nodes[4].y0 - nodes2[0].y0;
const sankey2 = drawSankey(svg, nodes2, links2, width/3-5)
.attr('transform', `translate(${sx1},${sy1})`);
const sx2 = nodes2[4].x1+5;
const sy2 = nodes2[4].y0 - nodes3[0].y0;
const sankey3 = drawSankey(svg, nodes3, links3, width/3-5)
.attr('transform', `translate(${sx1+sx2},${sy1+sy2})`);
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.
