2d:null 2e:["$","title",null,{"children":"A complicated Sankey diagram | Russell Watson | Observable"}] 33:T7a2,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const {nodes, links} = sankey(data); svg.append("g") .attr("stroke", "#000") .selectAll("rect") .data(nodes) .join("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", d => color(d.name)) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); 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.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source.name) : color(d.target.name)) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg.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); return svg.node(); }34:[{"id":"e350648303504ccc9f73d747e9f3354c289076ed041f467bf8d534a132c3a8a20a24d06f263f8b686169df0e03056192c9952df03040c7bf7403d303d85392aa","href":"https://static.observableusercontent.com/files/e350648303504ccc9f73d747e9f3354c289076ed041f467bf8d534a132c3a8a20a24d06f263f8b686169df0e03056192c9952df03040c7bf7403d303d85392aa","name":"fff_2@11.json","type":"application/octet-stream","lastModified":1580374501098.815,"size":33889}] 31:{"id":"121f1119818ba6d3","slug":"untitled","title":"A complicated Sankey diagram","thumbnail":"ba4394754a199a868cd2cea360a46831626ff984d8a38c1a7dd0e1208764e655","access_level":"public","create_time":"$D2020-01-30T08:55:01.098Z","update_time":"$D2020-10-26T14:49:24.300Z","view_time":null,"first_public_time":"$D2020-10-23T16:35:07.714Z","has_unpublished_edits":null,"fork":{"id":"f44e80cc36f65d44","slug":"sankey-diagram","title":"Fossil Fuel Finance 2016-18: Sankey Diagram","owner":{"id":"b17a7b5a7460e1fc","login":"maxharper","name":"Max Harper"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2ea319d712724ad1","login":"mrwatson-de","name":"Russell Watson","avatar_url":"https://avatars-next.observableusercontent.com/2a48c13ac30c60930dd81fd54e0ba08f726a63c81c6400ef7ca118e43dc43cf4","tier":"starter_2024"},"version":275,"publish_version":275,"role":null,"authored":false,"authors":[{"type":"individual","id":"59a4c14bf9f7feae","login":"mrwatson-de","name":"Russell Watson","avatar_url":"https://avatars-next.observableusercontent.com/2a48c13ac30c60930dd81fd54e0ba08f726a63c81c6400ef7ca118e43dc43cf4","tier":null}],"members":[{"type":"individual","id":"59a4c14bf9f7feae","login":"mrwatson-de","name":"Russell Watson","avatar_url":"https://avatars-next.observableusercontent.com/2a48c13ac30c60930dd81fd54e0ba08f726a63c81c6400ef7ca118e43dc43cf4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"7d1b58290587c387","slug":"learn-d3-charts","title":"Learn d3 charts","owner":{"id":"2ea319d712724ad1","login":"mrwatson-de","name":"Russell Watson"}},"type":"notebook","body":{"title":"A complicated Sankey diagram","cells":[{"id":267,"value":"md `# A complicated Sankey diagram`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`...so can I tweak this to make it look better?`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# Fossil Fuel Finance 2016-18: Sankey Diagram\n\nThis [Sankey diagram](https://github.com/d3/d3-sankey) visualizes the flow of finance between banks on the left and large energy companies on the right. Finance is both 'project', underwriting and corporate. Find more information at RAN link below.\n\nI look forward to/invite help on: 1) connecting this to the global [energy flow](https://www.iea.org/Sankey/) sankey's already in existence , 2)connecting this to associated [greenhouse gas emissions](http://climateaccountability.org/carbonmajors.html), and 3) to [fossil fuel lobbying money](https://link.springer.com/article/10.1007%2Fs10584-018-2241-z). \n\nData: [Rainforest Action Network - Banking on Climate Change Research](https://www.ran.org/bankingonclimatechange2019/)\n\n[Forked from Bostock Sankey]\n[Tom Counsell](https://tamc.github.io/Sankey/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":11,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"sankey = {\n const sankey = d3.sankey()\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","output":"$undefined","database":"$undefined"},{"id":13,"value":"format = {\n const f = d3.format(\",.0f\");\n return d => `${f(d)} TWh`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return name => color(name.replace(/ .*/, \"\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"fff_2@11.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"width = 975","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 1600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"