25:["$","title",null,{"children":"Sankey Diagram | Chaos Alchemist | Observable"}] 49:Tf01,chart = { const offset = 25; const svg = d3 .create("svg") .attr("viewBox", [0, -offset, width, height + offset]) .style("overflow", "visible"); const { nodes, links } = sankey(data); // Append links first, so hover on nodes is uninterrupted const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.2) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); // Labels const labs = svg .append("g") .selectAll(".label") .data(labels); labs .enter() .append("text") .attr("class", "sankey-label") .text(d => d) .attr("x", (d, i) => (i == 0 ? 0 : width)) .style("text-anchor", (d, i) => (i == 0 ? "start" : "end")); // Add tooltip const format = d3.format(","); const tooltip = svg.append("g").attr("id", "tooltip"); svg .append("g") .attr("stroke", "#000") .selectAll("rect") .data(nodes) .join("rect") .on("mouseover", function(d) { let second_line = d.description || ""; tooltip .call( callout, `${d.name} ${second_line} ` ) .raise(); }) .on("mousemove", function() { // Ensuring tooltip doesn't run off the screen const bBox = tooltip.node().getBBox(); let x = d3.mouse(this)[0]; if (x < bBox.width / 2) { x = bBox.width / 2; } else if (x + bBox.width / 2 > width) { x = width - bBox.width / 2; } const y = d3.mouse(this)[1] - bBox.height - 7; tooltip.attr("transform", `translate(${x}, ${y})`); }) .on("mouseout", function() { tooltip.call(callout, null); }) .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", color); if (edgeColor === "path") { const gradient = link .append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); } link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source) : color(d.target) ) .attr("stroke-width", d => Math.max(1, d.width)); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .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) // there's got to be a better way to do this than repeating the event code..... .on("mouseover", function(d) { let second_line = d.description || ""; tooltip .call( callout, `${d.name} ${second_line} ` ) .raise(); }) .on("mousemove", function() { // Ensuring tooltip doesn't run off the screen const bBox = tooltip.node().getBBox(); let x = d3.mouse(this)[0]; if (x < bBox.width / 2) { x = bBox.width / 2; } else if (x + bBox.width / 2 > width) { x = width - bBox.width / 2; } const y = d3.mouse(this)[1] - bBox.height - 7; tooltip.attr("transform", `translate(${x}, ${y})`); }) .on("mouseout", function() { tooltip.call(callout, null); }); return svg.node(); }4a:[{"id":"d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","href":"https://static.observableusercontent.com/files/d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","name":"energy.csv","type":"text/csv","lastModified":1726723913412.713,"size":2267}] 29:{"id":"9dd99f88eb2fc389","slug":null,"title":"Sankey Diagram","thumbnail":"3d60ba7ccf787ad952bb05699a7808a154caaad256619deaa6d9ebe7927fce04","access_level":"public","create_time":"$D2024-09-19T05:31:53.412Z","update_time":"$D2024-09-19T05:31:53.412Z","view_time":null,"first_public_time":"$D2024-09-19T05:31:53.412Z","has_unpublished_edits":null,"fork":{"id":"37149459fb8a3b8b","slug":"sankey-diagram","title":"Sankey Diagram","owner":{"id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f08015db4d173040","login":"chaosalchemist","name":"Chaos Alchemist","avatar_url":"https://avatars-next.observableusercontent.com/29739a1b68a530a976fc61af325093d3fc1fccf4067ed4cfee2264934c2de71b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":366,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c29d0dcf18c494d3","login":"chaosalchemist","name":"Chaos Alchemist","avatar_url":"https://avatars-next.observableusercontent.com/29739a1b68a530a976fc61af325093d3fc1fccf4067ed4cfee2264934c2de71b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c29d0dcf18c494d3","login":"chaosalchemist","name":"Chaos Alchemist","avatar_url":"https://avatars-next.observableusercontent.com/29739a1b68a530a976fc61af325093d3fc1fccf4067ed4cfee2264934c2de71b","tier":null,"role":"editor"},{"type":"team","id":"f08015db4d173040","login":"chaosalchemist","name":"Chaos Alchemist","avatar_url":"https://avatars-next.observableusercontent.com/29739a1b68a530a976fc61af325093d3fc1fccf4067ed4cfee2264934c2de71b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sankey Diagram","cells":[{"id":0,"value":"md`# Sankey Diagram\n\nThis [Sankey diagram](https://github.com/d3/d3-sankey) visualizes the flow of energy: *supplies* are on the left, and *demands* are on the right. Links show how varying amounts of energy are converted or transmitted before being consumed or lost. Data: [Department of Energy & Climate Change](http://www.decc.gov.uk/en/content/cms/tackling/2050/calculator_on/calculator_on.aspx) via [Tom Counsell](https://tamc.github.io/Sankey/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`Pretty much the same as the [original](https://observablehq.com/@d3/sankey-diagram) I forked -- just adding labels to the top left and top right. Also adding tooltips to the nodes and text.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"labels = [\"Top Left\", \"Top Right\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof edgeColor = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"color\") || \"path\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof align = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"align\") || \"justify\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeId(d => d.name)\n .nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 5], [width - 1, height - 5]]);\n return ({nodes, links}) => sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"format = {\n const format = d3.format(\",.0f\");\n return data.units ? d => `${format(d)} ${data.units}` : format;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return d => color(d.category === undefined ? d.name : d.category);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"data = {\n const links = d3.csvParse(await FileAttachment(\"energy.csv\").text(), d3.autoType);\n const nodes = Array.from(new Set(links.flatMap(l => [l.source, l.target])), name => ({name, category: name.replace(/ .*/, \"\")}));\n return {nodes, links, units: \"TWh\"};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"// import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"// small modifications from @d3/line-chart-with-tooltip\ncallout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text =>\n text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n .attr(\"class\", (_, i) => (i ? \"tip-description\" : \"tip-title\"))\n .text(d => d)\n );\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null