2f:T897,merge2 = energy2.map(d =>{ let coalelectricity = el_coal_byyear.get(d.Year); let oilelectricity = el_oil_byyear.get(d.Year); let gaselectricity = el_gas_byyear.get(d.Year); let hydroelectricity = el_hydro_byyear.get(d.Year); let other_renewableelectricity = el_other_byyear.get(d.Year); let windelectricity = el_wind_byyear.get(d.Year); let solarelectricity = el_solar_byyear.get(d.Year); let nuclearelectricity = el_nucl_byyear.get(d.Year); let oilconsumption = oilelectricity == undefined? +d['Oil Consumption - EJ']: +d['Oil Consumption - EJ'] - oilelectricity; let gasconsumption = gaselectricity == undefined? +d['Gas Consumption - EJ']: +d['Gas Consumption - EJ'] - gaselectricity; let coalconsumption = coalelectricity == undefined? +d['Coal Consumption - EJ']: +d['Coal Consumption - EJ'] - coalelectricity; let solarconsumption = solarelectricity == undefined? +d['Solar Consumption - EJ']: +d['Solar Consumption - EJ'] - solarelectricity; let hydroconsumption = hydroelectricity == undefined? +d['Hydro Consumption - EJ']: +d['Hydro Consumption - EJ'] - hydroelectricity; let nuclearconsumption = nuclearelectricity == undefined? +d['Nuclear Consumption - EJ']: +d['Nuclear Consumption - EJ'] - nuclearelectricity; let windconsumption = windelectricity == undefined? +d['Wind Consumption - EJ']: +d['Wind Consumption - EJ'] - windelectricity; let other_renewableconsumption = other_renewableelectricity == undefined? +d['Geo Biomass Other - EJ'] + +d['Biofuels (TWh)']: +d['Geo Biomass Other - EJ'] + +d['Biofuels (TWh)'] - other_renewableelectricity; let year = d.Year; let consumption = {coalconsumption, solarconsumption, oilconsumption, gasconsumption, hydroconsumption, nuclearconsumption, windconsumption, other_renewableconsumption}; let electricity = {coalelectricity, solarelectricity, oilelectricity, gaselectricity, hydroelectricity, nuclearelectricity, windelectricity, other_renewableelectricity}; if (coalelectricity == undefined || oilelectricity == undefined || hydroelectricity == undefined) {return {year, consumption}} else {return {year, consumption, electricity}}; ;})30:T1cc7,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/sankey-diagram function SankeyChart({ nodes, // an iterable of node objects (typically [{id}, …]); implied by links if missing links // an iterable of link objects (typically [{source, target}, …]) }, { format = ",", // a function or format specifier for values in titles align = "justify", // convenience shorthand for nodeAlign nodeId = d => d.id, // given d in nodes, returns a unique identifier (string) nodeGroup, // given d in nodes, returns an (ordinal) value for color nodeGroups, // an array of ordinal values representing the node groups nodeLabel, // given d in (computed) nodes, text to label the associated rect nodeTitle = d => `${d.id}\n${format(d.value)}`, // given d in (computed) nodes, hover text nodeAlign = align, // Sankey node alignment strategy: left, right, justify, center nodeWidth = 15, // width of node rects nodePadding = 10, // vertical separation between adjacent nodes nodeLabelPadding = 6, // horizontal separation between node and label nodeStroke = "currentColor", // stroke around node rects nodeStrokeWidth, // width of stroke around node rects, in pixels nodeStrokeOpacity, // opacity of stroke around node rects nodeStrokeLinejoin, // line join for stroke around node rects linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkValue = ({value}) => value, // given d in links, returns the quantitative value linkPath = d3Sankey.sankeyLinkHorizontal(), // given d in (computed) links, returns the SVG path linkTitle = d => `${d.source.id} → ${d.target.id}\n${format(d.value)}`, // given d in (computed) links linkColor = "source-target", // source, target, source-target, or static color linkStrokeOpacity = 0.5, // link stroke opacity linkMixBlendMode = "multiply", // link blending mode colors = d3.schemeCategory10,//d3.schemeTableau10, // array of colors width = 640, // outer width, in pixels height = 400, // outer height, in pixels marginTop = 5, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 5, // bottom margin, in pixels marginLeft = 30, // left margin, in pixels } = {}) { // Convert nodeAlign from a name to a function (since d3-sankey is not part of core d3). if (typeof nodeAlign !== "function") nodeAlign = { left: d3Sankey.sankeyLeft, right: d3Sankey.sankeyRight, center: d3Sankey.sankeyCenter }[nodeAlign] ?? d3Sankey.sankeyJustify; // Compute values. const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); const LV = d3.map(links, linkValue); if (nodes === undefined) nodes = Array.from(d3.union(LS, LT), id => ({id})); const N = d3.map(nodes, nodeId).map(intern); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); // Replace the input nodes and links with mutable objects for the simulation. nodes = d3.map(nodes, (_, i) => ({id: N[i]})); links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i], value: LV[i]})); // Ignore a group-based linkColor option if no groups are specified. if (!G && ["source", "target", "source-target"].includes(linkColor)) linkColor = "currentColor"; // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = G; // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Compute the Sankey layout. d3Sankey.sankey() .nodeId(({index: i}) => N[i]) .nodeAlign(nodeAlign) .nodeWidth(nodeWidth) .nodePadding(nodePadding) .extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]]) ({nodes, links}); // Compute titles and labels using layout nodes, so as to access aggregate values. if (typeof format !== "function") format = d3.format(format); const Tl = nodeLabel === undefined ? N : nodeLabel == null ? null : d3.map(nodes, nodeLabel); const Tt = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const Lt = linkTitle == null ? null : d3.map(links, linkTitle); // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const node = svg.append("g") .attr("stroke", nodeStroke) .attr("stroke-width", nodeStrokeWidth) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-linejoin", nodeStrokeLinejoin) .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); var source = svg .append("text") .attr("transform", `translate(${width - marginRight}, ${height - 5*marginBottom})`) // .attr("y", height-150) .attr("text-anchor", "end") .attr("font-family", "sans-serif") .style("font-size", "8px") .style("font-style", "italic") .attr("fill-opacity", 0.3); txtsource.forEach(d => { source .append("tspan") .attr("x", 0) .attr("dy", 8) .text(d); }); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (Tt) node.append("title").text(({index: i}) => Tt[i]); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", linkStrokeOpacity) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", linkMixBlendMode); if (linkColor === "source-target") link.append("linearGradient") .attr("id", d => `${uid}-link-${d.index}`) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0) .call(gradient => gradient.append("stop") .attr("offset", "0%") .attr("stop-color", ({source: {index: i}}) => color(G[i]))) .call(gradient => gradient.append("stop") .attr("offset", "100%") .attr("stop-color", ({target: {index: i}}) => color(G[i]))); link.append("path") .attr("d", linkPath) .attr("stroke", linkColor === "source-target" ? ({index: i}) => `url(#${uid}-link-${i})` : linkColor === "source" ? ({source: {index: i}}) => color(G[i]) : linkColor === "target" ? ({target: {index: i}}) => color(G[i]) : linkColor) .attr("stroke-width", ({width}) => Math.max(1, width)) .call(Lt ? path => path.append("title").text(({index: i}) => Lt[i]) : () => {}); if (Tl) 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 + nodeLabelPadding : d.x0 - nodeLabelPadding) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(({index: i}) => Tl[i]); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } return Object.assign(svg.node(), {scales: {color}}); }31:[{"id":"76ef8765e998f442ff7c53b010377cbb92ca5e72f21d87ec51b95ec7519da6c6781bcf324f14eaa21ec770f345892a1beff305031ab53dbcf6cd04c283fc2b29","href":"https://static.observableusercontent.com/files/76ef8765e998f442ff7c53b010377cbb92ca5e72f21d87ec51b95ec7519da6c6781bcf324f14eaa21ec770f345892a1beff305031ab53dbcf6cd04c283fc2b29","name":"energy@8.csv","type":"text/csv","lastModified":1636722235261.633,"size":1488},{"id":"8cb51419067061e05eb7b7b1621adef03ab5d693758f0cf02fa67d54b519cd8ee8666e1a25a864a6d4fe99357db5eae14fad6a990575925171cc841221c8626e","href":"https://static.observableusercontent.com/files/8cb51419067061e05eb7b7b1621adef03ab5d693758f0cf02fa67d54b519cd8ee8666e1a25a864a6d4fe99357db5eae14fad6a990575925171cc841221c8626e","name":"electricity-prod-source-stacked.csv","type":"text/csv","lastModified":1636722344775.174,"size":418837},{"id":"d1ffec00f148770095edfd024c005651a3bc4e65f61cb98408d7e225ceb6a2b5618e8f62e853a26db7b84e56eab3377f65b81a12079dbfb6fae2a608dfed77b9","href":"https://static.observableusercontent.com/files/d1ffec00f148770095edfd024c005651a3bc4e65f61cb98408d7e225ceb6a2b5618e8f62e853a26db7b84e56eab3377f65b81a12079dbfb6fae2a608dfed77b9","name":"energy-consumption-by-source-and-region.csv","type":"text/csv","lastModified":1636722436927.959,"size":662215}] 2d:{"title":"Primary Energy Consumption & Electricity Generation by Source in 2019","cells":[{"id":0,"value":"title = md`# Primary Energy Consumption & Electricity Generation by Source in ${start_year2}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"viewof linkColor = Inputs.select(new Map([\n [\"static\", \"#aaa\"],\n [\"source-target\", \"source-target\"],\n [\"source\", \"source\"],\n [\"target\", \"target\"],\n]), {\n value: new URLSearchParams(html``.search).get(\"color\") || \"source\",\n label: \"Link color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"viewof nodeAlign = Inputs.select([\"left\", \"right\", \"center\", \"justify\"], {\n value: \"justify\",\n label: \"Node alignment\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"viewof country = Inputs.select(countries, {\n label: \"Country/Region:\",\n value: \"Thailand\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"viewof start_year2 = Inputs.range([+d3.min(merge2, d => d.year),2020], {value: 2020, step: 1, label: \"Select Year:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"viewof start_year= html`\n \n \n \n \n \n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"chart = SankeyChart({\n links: merge4\n}, {\n nodeGroup: d => d.id.split(/\\W/)[0], // take first word for color\n nodeAlign, // e.g., d3.sankeyJustify; set by input above\n linkColor, // e.g., \"source\" or \"target\"; set by input above\n format: (f => d => `${f(d)} TWh`)(d3.format(\",.0~f\")),\n width,\n height: 540\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"energy = FileAttachment(\"energy@8.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":717,"value":"file = FileAttachment(\"electricity-prod-source-stacked.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"electricity = file.filter(d => d.Entity ==country)","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"el_nucl_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from nuclear (TWh)']]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":876,"value":"el_wind_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from wind (TWh)']]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"el_oil_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from oil (TWh)']]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":872,"value":"el_solar_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from solar (TWh)']]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":868,"value":"el_other_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from other renewables (TWh)']]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"el_hydro_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from hydro (TWh)']]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":864,"value":"el_gas_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from gas (TWh)']]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":861,"value":"el_coal_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from coal (TWh)']]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":730,"value":"elbyyear= new Map(electricity.map(d => [d.Year, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":737,"value":"elbyyear.get(\"2020\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":836,"value":"/*energy5 = energy4.filter(d=>d.target=='Electricity').map(d=>{\n let source = d.target;\n let target = \"Consumption\";\n let value = d.value;\n return {source, target, value};\n})*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"//energy6 = [...energy4, ...energy5]","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"/*energy4 = energy3.filter(d=>d[0] !='Entity' && d[0] !='Code'&&d[0] !='Year').map(d=>{\n let source = d[0].replace(\" Consumption\", \"\").replace(\" - EJ\",\"\").replace(\"Electricity from \", \"\").replace(\" (TWh)\", \"\")\n .replace(/Oil|Gas|Coal|Solar|Hydro|Nuclear|Wind/gi, function(x){return x.toUpperCase();});\n let target = d[0].replace(\" - EJ\", \"\").replace(/Oil|Gas|Coal|Solar|Hydro|Nuclear|Wind/gi, \"\").replace(\" from (TWh)\", \"\").replace(\"Geo Biomass Other\",\"Consumption\").replace(\"Biofuels (TWh)\", \"Consumption\").replace(\" from other renewables (TWh)\", \"\");\n let value = d[1]; \n return {source, target, value};\n})*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"merge6 = [...merge4, ...merge5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":907,"value":"merge5 = merge4.filter(d=>d.target=='electricity').map(d=>{\n let source = d.target;\n let target = \"consumption\";\n let value = d.value;\n return {source, target, value};\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"merge4 = merge3.map(d=>{\n let source = d[0].replace(\"consumption\", \"\").replace(\"electricity\", \"\");\n let target = d[0].replace(/Oil|Gas|Coal|Solar|Hydro|Nuclear|Wind|other_renewable/gi, \"\");\n let value = d[1]; \n return {source, target, value};\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":884,"value":"merge3 = merge2.filter(d=>d.year ==start_year2).map(d=>{\n if (d.consumption && d.electricity) {\n let Consumption = Object.entries(d.consumption);\n let Electricity = Object.entries(d.electricity);\n return [...Electricity, ...Consumption];\n }\n else if (d.electricity) {\n let Electricity = Object.entries(d.electricity);\n return [...Electricity];\n }\n else {\n let Consumption = Object.entries(d.consumption);\n return [...Consumption];\n }\n})[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"/*energy3 = merge.filter(d=>d.year ==start_year).map(d=>{\n let Consumption = Object.entries(d.energy);\n Consumption.forEach(entry => entry[1] = +entry[1]);\n let Electricity = Object.entries(d.electricity);\n Electricity.forEach(entry => entry[1] = +entry[1]);\n return [...Consumption, ...Electricity];\n})[0]*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"merge.splice(56,0,{year:\"2020\", energy: undefined, electricity: elbyyear.get(\"2020\")})","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"tt = merge2.splice(56,0,add2020)","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"add2020 = {\n let coalelectricity = el_coal_byyear.get('2020');\n let oilelectricity = el_oil_byyear.get('2020');\n let gaselectricity = el_gas_byyear.get('2020');\n let hydroelectricity = el_hydro_byyear.get('2020');\n let other_renewableelectricity = el_other_byyear.get('2020');\n let windelectricity = el_wind_byyear.get('2020');\n let solarelectricity = el_solar_byyear.get('2020');\n let nuclearelectricity = el_nucl_byyear.get('2020');\n let year = '2020';\n let electricity = {coalelectricity, solarelectricity, oilelectricity, gaselectricity, hydroelectricity, nuclearelectricity,\n windelectricity, other_renewableelectricity};\n return {year, electricity};}","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"merge = energy2.map(d =>{\n let electricity = elbyyear.get(d.Year);\n let year = d.Year;\n let energy = d;\n return {year, energy, electricity};})","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"file2 = FileAttachment(\"energy-consumption-by-source-and-region.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"energy2 = file2.filter(d => d.Entity ==country)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"countries1 = file2.map(d => d.Entity).filter( function( item, index, inputArray ) {\n return inputArray.indexOf(item) == index;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1013,"value":"countries2 = file.map(d => d.Entity).filter( function( item, index, inputArray ) {\n return inputArray.indexOf(item) == index;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1017,"value":"countries = countries2.filter(value => countries1.includes(value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"d3-sankey is not part of core D3; it must be loaded separately. Here we’re using [require](/@observablehq/require) to load it, while also ensuring that its dependencies on d3-array and d3-shape resolve to the copy of D3 that we’re using elsewhere in this notebook. We don’t want to load multiple copies of these libraries!","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"d3Sankey = require.alias({\"d3-array\": d3, \"d3-shape\": d3, \"d3-sankey\": \"d3-sankey@0.12.3/dist/d3-sankey.min.js\"})(\"d3-sankey\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"import {howto} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":991,"value":"txtsource = (\n \"Chart designed by Khanh Nguyen, 2021\\nData Source: https://github.com/owid/energy-data\").split(\"\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1046,"value":"alldata = d3.csv(\n `https://raw.githubusercontent.com/owid/energy-data/master/owid-energy-data.csv`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1060,"value":"alldata.filter((d) => d.country == country)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}