2d:null 2e:["$","title",null,{"children":"Let's pull this Sankey Diagram page apart! | Russell Watson | Observable"}] 33:T465,md`The source data File, [here](https://mrwatson-de.static.observableusercontent.com/files/d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27energy.csv&Expires=1582761600000&Key-Pair-Id=APKAJCHFJLLLU4Y2WVSQ&Signature=pUV7rjujUDTbf4eM7ljMT~Htrslk6NIknyNd38Me8U86YQXe1GE6FGNaElA8JzS5KGpsw3TpysptOPjxt~HDMIrhEADMrGuLEGDbBKwccHVq4ZwS3fYgxX7oV80PdkN18oGgRk5twU9yG6ysdSECG21mfzCF5pimDf4LQqtmvTlbt6AEQu4ETGBQtzpmo7CFFygoQy1AqgrNVfTMy3lSBfGA1FGi8a93K2SfhLkjR87lymnWEv-uphwfmVt6NThRs9A1T4Ebl9hcxakdtzFpPx1i8L-r8kZb7-Q49hoZ7ACUa9FZHXIr5K620ZJVIdSzfd8gi4wshxJKDr1Lmx~UoQ__) is just a three column csv file with source, target and value: | source | target | value | |:------:|:------:|:-----:| | a | b | 12 | | a | c | 42 | | b | c | 66 | In other words, it is a list of weighted links. This is the basis of the Sankey Diagram - a list of flows, where fat = larger flow. The nodes and layout of the sankey diagramme is extracted from the flow-list.`34: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(); }35:[{"id":"d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","href":"https://static.observableusercontent.com/files/d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","name":"energy.csv","type":"text/csv","lastModified":1582620874709.826,"size":2267}] 31:{"id":"bdf1cb616067e3b4","slug":"lets-pull-this-sankey-diagram-page-apart","title":"Let's pull this Sankey Diagram page apart!","thumbnail":"c1c7fc93597e49dfa37a62c3dbc0860a77066d6e76a6fcaf3533437d6eeac72a","access_level":"public","create_time":"$D2020-02-25T08:54:34.709Z","update_time":"$D2020-02-27T19:42:50.419Z","view_time":null,"first_public_time":"$D2020-02-26T11:15:56.186Z","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":"2ea319d712724ad1","login":"mrwatson-de","name":"Russell Watson","avatar_url":"https://avatars-next.observableusercontent.com/2a48c13ac30c60930dd81fd54e0ba08f726a63c81c6400ef7ca118e43dc43cf4","tier":"starter_2024"},"version":570,"publish_version":570,"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":"Let's pull this Sankey Diagram page apart!","cells":[{"id":347,"value":"md`# Let's pull this Sankey Diagram page apart!\n\nFirst of all there are some neat reactive inputs at the start of the page:`","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":358,"value":"md`^^^ These are really neat, because not only do the diagrams on the page react to how you set them, but they also pick up values from the url query parameters 'color' and 'align' to initialise their values!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`# How can you query url parameters in observable?\n\nWell, it seems to be a little convoluted.\n\nFirst, you create a (otherwise seemingly pretty useless) empty anchor/link tag:\n\n\\`\\`\\`\nhtml\\`\\`\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"md`This creates, literally, an empty useless link:\n\n\\`\\`\\`\n \n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md`The trick is to then NOT output it, but rather use the \\`.search\\` method to (magically) call up the query string of the current page.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"urlQuery = html``.search","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"md`Note: Before reading further, you might want to try [adding parameter q](?q=6) to the url or even [two q parameters](?q=2&q=3)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`Once you have that, you can conjure up a URLSearchParams object to get the parameter values:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"params = new URLSearchParams(urlQuery)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"urlParams = params.toString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"params.getAll(\"q\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"params.get(\"q\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"q = new URLSearchParams(urlQuery).get(\"q\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`## and how do inputs work?\n\nUse viewof to create a reactive version of an html input.\n\nAnything you type in is instantly available to be called up and propogated through the page:\n\n (go on type something!)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"viewof inp= html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"md`…just reference the cell name:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"inp","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"md`# Using \\`Object.assign\\` to move properties around`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"md`The code for the justify input looks like this:\n\\`\\`\\`Javascript\n\nviewof align = Object.assign(html\\`\\`, {\n value: new URLSearchParams(html\\`\\`.search).get(\"align\") || \"justify\"\n})\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"md`This is doing multiple things:\n\n1. Creating an html select object\n\\`\\`\\`JavaScript\n html\\`\\`\n\\`\\`\\`\n2. Creating a value object\n\\`\\`\\`JavaScript\n { value: … }\n\\`\\`\\`\n - with the value of the align url-parameter as described above,\n\\`\\`\\`JavaScript\n new URLSearchParams(…).get(…)\n\\`\\`\\`\n - or, if that doesn't exist use the default value\n\\`\\`\\`JavaScript\n || \"justify\"\n\\`\\`\\`\n3. Using \\`Object.assign\\` to assign (i.e. add) the \\`value\\` property to the \\`html object\\`\n\\`\\`\\`JavaScript\n Object.assign( , )\n\\`\\`\\`\n4. Specifying the name of this cell\n\\`\\`\\`JavaScript\n align =\n\\`\\`\\`\n5. Outputting a reactive view of the html object, i.e. the select input\n\\`\\`\\`JavaScript\n viewof\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`# OK, now we've got the technicalities of Observable out the way, let's look at the *DATA*\n\nWell, here it is…`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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}));\n return {nodes, links};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`…but that is still biting off more than we can chew, so let's break it down a bit first:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"md`# Lets look at how the data is structured by csvParse`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"md`If you look at the code which produces the links, it compactly extracts the data into an Array 'table':`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"links = d3.csvParse(await FileAttachment(\"energy.csv\").text(), d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"md`This is not only an Array of Objects (depicting a table of records), but also has a helpful columns property:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"links.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"md`## Aside: About Javascript Arrays`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"md`Note: A JavaScript Array is both an array and an object, it thus has referencable array elements:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"record = links[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"md`as well as properties:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"links.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`…and a [host of methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), such as`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"links.slice(0,2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"links.reverse()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"md`## Tiny aside: for ... in ... loops\n\nYou can use a for ... in loop to loop across the properties of an object:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"values = {\n let values=[];\n for( var col in record) {\n values.push(col)\n }\n return values\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`THIS ANALYSIS IS STILL UNDER CONSTRUCTION`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"md`# AND HERE IT IS\n\nThis is what we are aiming to understand:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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.\n\nData: [Department of Energy & Climate Change](http://www.decc.gov.uk/en/content/cms/tackling/2050/calculator_on/calculator_on.aspx), [Tom Counsell](https://tamc.github.io/Sankey/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"md`# Where to start taking the above chart function apart?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`We have looked at the basic data structure above, but what is this 'sankey' function doing?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`This little guy helps to format the numbers\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":435,"value":"md`# Finally, working with color…`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`Here we have a function, color, which takes a name and returns a color based on that name…\n\nThe RegEx replace strips everything from the first space after the name.\n\n(Thus 'Oil' and 'Oil Imports' have the same color.)\n\n`","pinned":false,"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":409,"value":"md`# Some bits and bobs`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 600","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":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"