31:T69f,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(); }32:T695,function drawSankey(svg, nodes, links, width) { const g = svg.append('g'); g.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0 + 1) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0 - 2) .attr("fill", d => { let c; for (const link of d.sourceLinks) { if (c === undefined) c = link.color; else if (c !== link.color) c = null; } if (c === undefined) for (const link of d.targetLinks) { if (c === undefined) c = link.color; else if (c !== link.color) c = null; } return (d3.color(c) || d3.color(color)).darker(0.5); }) .append("title") .text(d => `${d.name}\n${d.value.toLocaleString()}`); const link = g.append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("g") .attr("stroke", d => d3.color(d.color) || color) .style("mix-blend-mode", "multiply"); link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${d.value.toLocaleString()}`); g.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 g; }33:[] 2f:{"title":"Multiple Sankeys","cells":[{"id":0,"value":"md`# Multiple Sankeys\n\nSee https://talk.observablehq.com/t/examples-of-a-multi-year-sankey/1848\n\nEdit the textareas below to update the [Sankey diagram](/@d3/sankey-diagram)!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"viewof inputOrder = {\n const form = html`

Preserve input order`;\n form.i.onclick = () => (form.value = form.i.checked, form.dispatchEvent(new CustomEvent(\"input\")));\n form.value = form.i.checked;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"viewof align = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"align\") || \"justify\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"html`\n${DOM.download(await rasterize(chart), \"flow-o-matic\", \"Download as PNG\")}\n${DOM.download(await serialize(chart), \"flow-o-matic\", \"Download as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"viewof source = sourceGen(`FY13 Carry-over,FY14,38\nFY14 New Cases,FY14,16\nFY14,Closed,7\nFY14,FY14 Carry-Over,47`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"viewof source2 = sourceGen(`FY14 Carry-over,FY15,47\nFY15 New Cases,FY15,16\nFY15,Closed,20\nFY15,FY15 Carry-Over,43`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"viewof source3 = sourceGen(`FY15 Carry-over,FY16,43\nFY16 New Cases,FY16,9\nFY16,Closed,4\nFY16,FY16 Carry-Over,48`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`Each line in the textarea above represents a link in the chart. The source and target of the link are determined by the two names. (The contents of the textarea are interpreted as [CSV](https://en.wikipedia.org/wiki/Comma-separated_values), so put quotes around names if you want them to contain commas.) The thickness of the link is determined by the following value. You can also specify a fill color after the number.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"function sourceGen(source) {\n const textarea = html`

${source}`;\n  textarea.style.display = \"block\";\n  textarea.style.boxSizing = \"border-box\";\n  textarea.style.width = \"calc(100% + 28px)\";\n  textarea.style.font = \"var(--mono_fonts)\";\n  textarea.style.minHeight = \"60px\";\n  textarea.style.border = \"none\";\n  textarea.style.padding = \"4px 10px\";\n  textarea.style.margin = \"0 -14px\";\n  textarea.style.background = \"rgb(247,247,249)\";\n  textarea.style.tabSize = 2;\n  textarea.oninput = () => textarea.style.height = `${textarea.value.match(/^/gm).length * 21 + 8}px`;\n  textarea.oninput();\n  return textarea;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = source => {\n  const links = d3.csvParseRows(source, ([source, target, value, linkColor = color]) => (source && target ? {source, target, value: !value || isNaN(value = +value) ? 1 : value, color: linkColor} : null));\n  const nodeByName = new Map;\n  for (const link of links) {\n    if (!nodeByName.has(link.source)) nodeByName.set(link.source, {name: link.source});\n    if (!nodeByName.has(link.target)) nodeByName.set(link.target, {name: link.target});\n  }\n  return {nodes: Array.from(nodeByName.values()), links};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"sankey = (w,h) => d3.sankey()\n    .nodeId(d => d.name)\n    .nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])\n    .nodeSort(inputOrder ? null : undefined)\n    .nodeWidth(15)\n    .nodePadding(padding)\n    .extent([[0, 5], [w, h]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"viewof height = {\n  const form = html`<form class=\"observablehq--inspect\">height = <input name=i type=number min=0 value=720 step=1  style=\"padding:2px;margin:-2px 0;width:120px;\"></form>`;\n  (form.oninput = () => form.value = form.i.valueAsNumber)();\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"viewof padding = {\n  const form = html`<form class=\"observablehq--inspect\">padding = <input name=i type=number min=0 value=10 step=1  style=\"padding:2px;margin:-2px 0;width:120px;\"></form>`;\n  (form.oninput = () => form.value = form.i.valueAsNumber)();\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"viewof color = {\n  const form = html`<form class=\"observablehq--inspect\">color = <input name=i type=color value=\"#dddddd\" style=\"padding:2px;margin:-2px 0;\"></form>`;\n  (form.oninput = () => form.value = form.i.value)();\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}
</article></body></html>