2c:null 2d:["$","title",null,{"children":"Fossil Fuel Finance 2016-18: Sankey Diagram | Max Harper | Observable"}] 32:T797,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", "red") .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, 2*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(); }33:[{"id":"e350648303504ccc9f73d747e9f3354c289076ed041f467bf8d534a132c3a8a20a24d06f263f8b686169df0e03056192c9952df03040c7bf7403d303d85392aa","href":"https://static.observableusercontent.com/files/e350648303504ccc9f73d747e9f3354c289076ed041f467bf8d534a132c3a8a20a24d06f263f8b686169df0e03056192c9952df03040c7bf7403d303d85392aa","name":"fff_2@11.json","type":"application/octet-stream","lastModified":1572967856830.574,"size":33889}] 30:{"id":"f44e80cc36f65d44","slug":"sankey-diagram","title":"Fossil Fuel Finance 2016-18: Sankey Diagram","thumbnail":"5cb5c534dc86462b617fb9fe64542c98c8d374cec868d4ccc78ddeb26400f7a8","access_level":"public","create_time":"$D2019-11-03T17:36:36.374Z","update_time":"$D2020-01-27T17:42:04.488Z","view_time":null,"first_public_time":"$D2019-11-05T15:34:53.406Z","has_unpublished_edits":null,"fork":{"id":"99b2e903e7df3b0a","slug":"sankey-component","title":"Sankey diagram component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b17a7b5a7460e1fc","login":"maxharper","name":"Max Harper","avatar_url":"https://avatars-next.observableusercontent.com/7b8b3223a5e9778701c3593694fa374b6dfd77171262b441aef05c63034c781c","tier":"starter_2024","bio":""},"version":266,"publish_version":266,"role":null,"authored":false,"authors":[{"type":"individual","id":"e1f18683554a03c4","login":"maxharper","name":"Max Harper","avatar_url":"https://avatars-next.observableusercontent.com/7b8b3223a5e9778701c3593694fa374b6dfd77171262b441aef05c63034c781c","tier":null,"bio":""}],"members":[{"type":"individual","id":"e1f18683554a03c4","login":"maxharper","name":"Max Harper","avatar_url":"https://avatars-next.observableusercontent.com/7b8b3223a5e9778701c3593694fa374b6dfd77171262b441aef05c63034c781c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fossil Fuel Finance 2016-18: Sankey Diagram","cells":[{"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","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":"$32","pinned":true,"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 .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 f = d3.format(\",.0f\");\n return d => `${f(d)} TWh`;\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 name => color(name.replace(/ .*/, \"\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"width = 975","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 1600","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"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"