31:T70b,chart = { const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const {nodes, links} = sankey(data); svg.append("g") .attr("stroke", "#000") .selectAll("rect") .data(nodes) .enter().append("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) .enter().append("g") .style("mix-blend-mode", "multiply"); 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 => d.uid) .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) .enter().append("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(); }32:T605,md`Sankey diagrams visualize the magnitude of flow between nodes in a network. This intricate diagram shows a possible scenario for UK energy production and consumption in 2050: energy supplies are on the left, and demands are on the right. Intermediate nodes group related forms of production and show how energy is converted and transmitted before it is consumed or lost. The thickness of each link encodes the amount of flow from source to target. This notebook is built with d3-sankey, which computes positions via iterative relaxation. After fixing the horizontal position of each node, the algorithm starts from the sources on the left, positioning downstream nodes so as to minimize link distance. A reverse pass is then made from right-to-left, and then the entire process is repeated several times. Overlapping nodes are shifted to avoid collision. The fully automatic layout is convenient for rapid visualization—positioning nodes manually is tedious! However, the algorithm is not perfect; it could be improved to minimize link crossings and to prevent links from intersecting unrelated nodes. It also does not support cyclical networks. Data: Department of Energy & Climate Change, Tom Counsell`33:[] 2f:{"title":"D3 Sankey Diagram","cells":[{"id":0,"value":"md`# D3 Sankey Diagram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"sankey = {\n const sankey = d3.sankey()\n .nodeId(function (d) { return d.name; })\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 1], [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":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"format = {\n const f = d3.format(\",.0f\");\n return d => `${f(d)} TWh`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return name => color(name.replace(/ .*/, \"\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"rawData = d3.csv(\"https://gist.githubusercontent.com/john-guerra/c084cbdf405d934d7d9cab8263f64e08/raw/d72b53c60fd5545d86aa978601849ebc8928062c/shorter.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"nestedData = d3.nest()\n .key(function (d) { return d.LOCATION_TYPE;})\n .key(function (d) { return d.ROAD_TYPE;})\n .key(function (d) { return d.PEDESTRIAN_ACCIDENT;})\n .entries(rawData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"nodes = {\n var nodes = [];\n \n // Add the LOCATION_TYPEs\n nodes = nodes.concat( d3.set(rawData, function (d) { return d.LOCATION_TYPE;}).values());\n nodes = nodes.concat( d3.set(rawData, function (d) { return d.ROAD_TYPE;}).values());\n nodes = nodes.concat( d3.set(rawData, function (d) { return d.PEDESTRIAN_ACCIDENT;}).values());\n \n return nodes.map(function (d) { return {name:d}; } );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"links = [\n {source: \"Not State Highway\", target: \"Non-Highway\", value: 700},\n {source: \"Not State Highway\", target: \"Highway\", value: 100},\n {source: \"Non-Highway\", target: \"\", value: 200},\n {source: \"Non-Highway\", target: \"Y\", value: 300},\n {source: \"Highway\", target: \"\", value: 20},\n {source: \"Highway\", target: \"Y\", value: 30},\n \n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"olddata = d3.json(\"https://gist.githubusercontent.com/mbostock/ca9a0bb7ba204d12974bca90acc507c0/raw/398136b7db83d7d7fd89181b080924eb76041692/energy.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"data = {\n return {\n nodes:nodes,\n links:links\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"width = 964","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3-selection@1\", \"d3-fetch@1\", \"d3-format@1\", \"d3-scale@2\", \"d3-scale-chromatic@1\", \"d3-sankey@0.7\", \"d3-collection\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}