2d:null 2e:["$","title",null,{"children":"Project - World Energy Trends | emile-f | Observable"}] 33:T40a,--- ## 1. Worldwide Power Consumption Trends Lets start off by taking a look at the big picture. In this case that is our entire total global power consumption. As the population of the planet grows and technology advances, there is a clear need for more energy resulting in a steady increase in consumption as well. In 2020, largely as a result of the covid pandemic was the first year in a while that global energy consumption has fallen (by almost 5%). This decline was mostly due to the drop in demand for oil which dipped 15 EJ (almost 9% since the previous year). With the current ongoing war in Ukraine and Oil being a hot topic I belive this trend will continue as well. Despite this dip in consumption, renewable and hydro energy remained unaffected and with renewables alone tripling over the course of the last 10 years. Still, it remains a rather small proportion of total energy consumption but with the world becoming more climate active and various climate agreements I hope it can also continue in the future. 34:T700,sbc_r = !normalizesac ? StackedBarChart( totalcons_regionp.filter( (e) => e.country != "World" && new Date(e.year).getFullYear() === baryear - 1 ), { x: (d) => d.value, y: (d) => d.country, z: (d) => d.source, xLabel: "Energy Consumption (exajoules) →", yDomain: d3.groupSort( totalcons_regionp.filter( (e) => e.country != "World" && new Date(e.year).getFullYear() === baryear - 1 ), (D) => d3.sum(D, (d) => d.value), (d) => d.country ), // sort y by x zDomain: sources, colors: [ "#d73027", "#f46d43", "#fdae61", "#fee08b", "#a6d9f5", "#66bd63" ], marginRight: 25, marginLeft: 150, width, height: 170, xFormat: ".1f" } ) : StackedBarChart( totalcons_regionp.filter( (e) => e.country != "World" && new Date(e.year).getFullYear() === baryear - 1 ), { x: (d) => d.proportion, y: (d) => d.country, z: (d) => d.source, xLabel: "Energy Consumption (exajoules) →", yDomain: d3.groupSort( totalcons_regionp.filter( (e) => e.country != "World" && new Date(e.year).getFullYear() === baryear - 1 ), (D) => d3.sum(D, (d) => d.value), (d) => d.country ), // sort y by x zDomain: sources, colors: [ "#d73027", "#f46d43", "#fdae61", "#fee08b", "#a6d9f5", "#66bd63" ], marginLeft: 150, marginRight: 25, width, height: 170, offset: d3.stackOffsetExpand, xFormat: ".1%" } )35:T908,sbc = !normalizesac ? StackedBarChart( totalcons_countryp_filled .filter( (e) => (new Date(e.year).getFullYear() === baryear - 1) & (e.country != "World") ) .concat(getrow(baryear - 1, no_countries1)), { x: (d) => d.value, y: (d) => d.country, z: (d) => d.source, xLabel: "Energy Consumption (exajoules) →", yDomain: ["Rest of World"].concat( d3 .groupSort( totalcons_countryp_filled.filter( (e) => (new Date(e.year).getFullYear() === baryear - 1) & (e.country != "World") ), (D) => d3.sum(D, (d) => d.value), (d) => d.country ) .slice(-no_countries1) ), // sort y by x zDomain: sources, colors: [ "#d73027", "#f46d43", "#fdae61", "#fee08b", "#a6d9f5", "#66bd63" ], marginLeft: 150, marginRight: 25, width, xFormat: ".1f", height: 50 + no_countries1 * 20 } ) : StackedBarChart( totalcons_countryp_filled .filter( (e) => (new Date(e.year).getFullYear() === baryear - 1) & (e.country != "World") ) .concat(getrow(baryear - 1, no_countries1)), { x: (d) => d.proportion, y: (d) => d.country, z: (d) => d.source, xLabel: "Energy Consumption (exajoules) →", yDomain: ["Rest of World"].concat( d3 .groupSort( totalcons_countryp_filled.filter( (e) => (new Date(e.year).getFullYear() === baryear - 1) & (e.country != "World") ), (D) => d3.sum(D, (d) => d.value), (d) => d.country ) .slice(-no_countries1) ), // sort y by x zDomain: sources, colors: [ "#d73027", "#f46d43", "#fdae61", "#fee08b", "#a6d9f5", "#66bd63" ], marginLeft: 150, marginRight: 25, width, offset: d3.stackOffsetExpand, xFormat: ".1%", height: 50 + no_countries1 * 20 } )36:T441,sac_country = !normalize2 ? StackedAreaChart( totalcons_countryp_filled.filter((e) => e.country === countryselect), { x: (d) => d.year, y: (d) => d.value, z: (d) => d.source, yLabel: "↑ Energy Consumption (Exajoules)", colors: [ "#d73027", "#f46d43", "#fdae61", "#fee08b", "#a6d9f5", "#66bd63" ], width, height: c1height, marginRight: 30, marginLeft: 35 } ) : StackedAreaChart( totalcons_countryp_filled.filter((e) => e.country === countryselect), { x: (d) => d.year, y: (d) => d.value, z: (d) => d.source, yLabel: "↑ Percentage of Total Energy Consumption", colors: [ "#d73027", "#f46d43", "#fdae61", "#fee08b", "#a6d9f5", "#66bd63" ], width, height: c1height, offset: d3.stackOffsetExpand, yFormat: "%", marginRight: 30, marginLeft: 35 } )37:T469,line2 = !normalize2 ? LineChart( totalcons_countryp_filled.filter((e) => e.country === countryselect), { x: (d) => d.year, y: (d) => d.value, z: (d) => d.source, yLabel: "↑ Energy Consumption (Exajoules)", color: function (x) { return cmap.get(x); }, width, height: c1height, title: (d) => `${new Date(d.year).getFullYear() + 1}: ${d.value.toFixed(2)} ${d.source} EJ`, marginRight: 30, marginLeft: 30 } ) : LineChart( totalcons_countryp_filled.filter((e) => e.country === countryselect), { x: (d) => d.year, y: (d) => d.proportion, z: (d) => d.source, yLabel: "↑ Percentage of Total Energy Consumption", color: function (x) { return cmap.get(x); }, width, height: c1height, title: (d) => `${new Date(d.year).getFullYear() + 1}: ${(d.proportion * 100).toFixed(1)} % ${ d.source }`, yFormat: "%", marginRight: 30, marginLeft: 30 } )38:T413,bcr = BarChart( totalcons_regionp.filter( (e) => e.country != "World" && e.year.getFullYear() === baryear2 - 1 && e.source == barsource ), { x: (d) => d.value, y: (d) => d.country, z: (d) => d.source, xLabel: "Energy Consumption (exajoules) →", yDomain: d3 .groupSort( totalcons_regionp.filter( (e) => e.year.getFullYear() === baryear2 - 1 && e.source == barsource && e.country != "World" ), (D) => d3.sum(D, (d) => d.value), (d) => d.country ) .reverse(), zDomain: sources, color: new Map([ ["Oil", "#d73027"], ["Natural Gas", "#f46d43"], ["Coal", "#fdae61"], ["Nuclear", "#ffd459"], ["Hydro", "#a6d9f5"], ["Renewables", "#66bd63"] ]).get(barsource), //colors: ["#d73027", "#f46d43", "#fdae61", "#fee08b", "#a6d9f5", "#66bd63"], marginLeft: 150, marginRight: 20, marginBottom: 0, width, height: 170, xFormat: ".2f" } )39:T4c2,bc = BarChart( totalcons_countryp_filled .filter( (e) => e.country != "World" && e.year.getFullYear() === baryear2 - 1 ) .concat(getrow(baryear2 - 1, no_countries2)) .filter((e) => e.source == barsource), { x: (d) => d.value, y: (d) => d.country, z: (d) => d.source, xLabel: "Energy Consumption (exajoules) →", yDomain: d3 .groupSort( totalcons_countryp_filled.filter( (e) => e.year.getFullYear() === baryear2 - 1 && e.source == barsource && e.country != "World" ), (D) => d3.sum(D, (d) => d.value), (d) => d.country ) .reverse() .slice(0, no_countries2) .concat(["Rest of World"]), // sort y by x zDomain: sources, color: new Map([ ["Oil", "#d73027"], ["Natural Gas", "#f46d43"], ["Coal", "#fdae61"], ["Nuclear", "#ffd459"], ["Hydro", "#a6d9f5"], ["Renewables", "#66bd63"] ]).get(barsource), //colors: ["#d73027", "#f46d43", "#fdae61", "#fee08b", "#a6d9f5", "#66bd63"], marginLeft: 150, marginRight: 20, marginBottom: 0, width, height: 50.1 + no_countries2 * 20.1, xFormat: ".2f" } )3a:T501,function convertData(rawData, source) { let data = []; const keysToArray = (ob) => { const arr = []; _.keys(ob).forEach((k) => { arr.push(ob[k]); }); return arr; }; const createObject = (list, list2) => { const r = {}; _.forEach(list, (a, i) => { if (list2[i]) { if (i == 0) { r["country"] = list2[i].trim(); } else { if (!r[a]) { r[a] = list2[i]; } } } }); return r; }; let heading = []; _.forEach(rawData, (a, i) => { if (i == 2) { heading = keysToArray(a); } if (i > 2) { const v = keysToArray(a); const insert = createObject(heading, v); if (insert["country"]) { data.push(insert); } } }); // make a separate objects for every year const formattedData = []; _.forEach(data, (a, i) => { let country = a["country"]; if (country == "Total World") { country = "World"; } _.keys(a).forEach((k) => { if ( a[k] != "n/a" && new Date(k).toString() != "Invalid Date" && !_.includes(country, "Total") ) { formattedData.push({ country, year: new Date(k), value: a[k], source }); } }); }); return formattedData; }3b:T426,function convertToBarChart(data) { /* { country: "Total World" year: 1975-01-01 value: 341.12861639999954 } */ const w = _.filter(data, { country: 'World'}) const tmpData = {} const sortByCountAsc = (arr) =>{ return _.reverse(_.sortBy(arr, ['count'])) } _.forEach(w,(d)=>{ tmpData[d.year] = { item: d.year, count: d.value, subKey: {} } }); _.forEach(data,(d)=>{ if(tmpData[d.year]){ tmpData[d.year].subKey[d.country] = d.value; } }); // make the subKey an array for later use let newStructure = []; _.keys(tmpData).map((item)=>{ if(tmpData[item].subKey){ const list = [] _.keys(tmpData[item].subKey).forEach((k)=>{ if(k != 'World' && !_.includes(k,'OECD') && !_.includes(k,'#') ){ list.push({item: k , count: tmpData[item].subKey[k]}) } }) tmpData[item].subKey = sortByCountAsc(list); } tmpData[item].count = tmpData[item].count newStructure.push(tmpData[item]) }) return newStructure }3c:T15cd,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/line-chart function LineChartAnimation(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value title, defined, // for gaps in data curve = d3.curveBasis, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleUtc, // the x-scale type xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // the y-scale type yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis color = "currentColor", // stroke color of line strokeLinecap = "round", // stroke line cap of the line strokeLinejoin = "round", // stroke line join of the line strokeWidth = 1.5, // stroke width of line, in pixels strokeOpacity = 1, // stroke opacity of line triggerAnimation = false, triggerFunctionName = 'LineChartAnimation' } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(X.length); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y)]; // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); // Compute titles. if (title === undefined) { const formatDate = xScale.tickFormat(null, "%Y"); const formatValue = yScale.tickFormat(100, yFormat); title = i => `${formatDate(X[i])}\n${formatValue(Y[i])} Million tonnes`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } function tweenDash() { const l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); return function(t) { return i(t) }; } function transition(path) { path.transition() .duration(7500) .attrTween("stroke-dasharray", tweenDash) .on("end", () => { d3.select(this).call(transition); }); } // Construct a line generator. const line = d3.line() .defined(i => D[i]) .curve(curve) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); 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;") .on("pointerenter pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const animationLine = svg.append("path") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-opacity", strokeOpacity) .attr("d", line(I)) if(!window.emile){ window.emile = {} } window.emile[triggerFunctionName] = function name(params) { transition(animationLine); } if(!triggerAnimation){ window.emile[triggerFunctionName]() } const tooltip = svg.append("g") .style("pointer-events", "none"); function pointermoved(event) { const i = d3.bisectCenter(X, xScale.invert(d3.pointer(event)[0])); tooltip.style("display", null); tooltip.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); const path = tooltip.selectAll("path") .data([,]) .join("path") .attr("fill", "white") .attr("stroke", "black"); const text = tooltip.selectAll("text") .data([,]) .join("text") .call(text => text .selectAll("tspan") .data(`${title(i)}`.split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => i ? null : "bold") .text(d => d)); const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); svg.property("value", D[i]).dispatch("input", {bubbles: true}); } function pointerleft() { tooltip.style("display", "none"); svg.node().value = null; svg.dispatch("input", {bubbles: true}); } return svg.node(); }3d:T1651,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function LineChartMultiple(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveBasis, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleUtc, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis zDomain, // array of z-values color = "currentColor", // stroke color of line, as a constant or a function of *z* strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply", // blend mode of lines voronoi // show a Voronoi overlay? (for debugging) } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, d => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y, d => typeof d === "string" ? +d : d)]; if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter(i => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. const T = title === undefined ? Z : title === null ? null : d3.map(data, title); // Construct a line generator. const line = d3.line() .defined(i => D[i]) .curve(curve) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); 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;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); // An optional Voronoi display (for fun). if (voronoi) svg.append("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr("d", d3.Delaunay .from(I, i => xScale(X[i]), i => yScale(Y[i])) .voronoi([0, 0, width, height]) .render()); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(voronoi ? () => {} : g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const path = svg.append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .selectAll("path") .data(d3.group(I, i => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("d", ([, I]) => line(I)); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)); // closest point path.style("stroke", ([z]) => Z[i] === z ? null : "#ddd").filter(([z]) => Z[i] === z).raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) dot.select("text").text(T[i]); svg.property("value", O[i]).dispatch("input", {bubbles: true}); } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", "multiply").style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", {bubbles: true}); } return Object.assign(svg.node(), {value: null}); }3e:T1983,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/bar-chart function BarChartWithFilterAndScroll(ogDate, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text marginTop = 20, // the top margin, in pixels marginRight = 0, // the right margin, in pixels marginBottom = 30, // the bottom margin, in pixels marginLeft = 40, // the left margin, in pixels width = 640, // the outer width of the chart, in pixels height = 400, // the outer height of the chart, in pixels xDomain, // an array of (ordinal) x-values xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // y-scale type yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] xPadding = 0.1, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis color = "currentColor", // bar fill color parent } = {}) { let filtered = false; function filterData(d, filter) { return _.filter(d , { item: new Date(filter) }) } function type(d) { d.value = +d.value; return d; } const addButton = () =>{ const btn = parent.append('div') .attr("style", 'position: absolute; width: 200px; height: 30px; right: 0; top: 0; border: 1px solid black;') .attr("class","btn") .attr("x", width - marginRight - 200) .attr("height", 30) .attr("width", 200) .style("stroke","#444") .on("click", () => { if(filtered){ d3.select(this).style('fill', 'red'); //just to make sure filtered = false update(ogDate); } }); btn.append('p') .attr("class","btn") .attr("fill", 'black') .attr("style","pointer-events: none; line-height: 27px; text-align: center;") .attr('font-size' ,15) .text('Reset filter'); } const update = (data)=>{ parent.selectAll("*:not(.btn)").remove(); if(filtered){ width = data.length * 150 } else { width = data.length * 50 } xRange = [marginLeft, width - marginRight] const svg = parent.append('svg') .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "height: auto; height: intrinsic;"); // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); // make sure we reset the data when updating xDomain = undefined; yDomain = undefined; title = undefined; // Compute default domains, and unique the x-domain. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; // Convert date to year only on the x-axes if(isNaN(Date.parse(X[0])) == false){ for (let q = 0; q < xDomain.length; ++q) { xDomain[q] = new Date(xDomain[q]).getFullYear() +1 } } xDomain = new d3.InternSet(xDomain); // Omit any data not present in the x-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i])); // Construct scales, axes, and formats. // xRange = [marginLeft , (X.length * 40) - marginRight] // const totalWidth = xRange[0] + xRange[1]; const xScale = d3.scaleBand(xDomain, xRange).padding(xPadding); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svgYAxes = parent.append('svg') .style("position", "absolute") .style("pointer-events", "none") .style("top", "0") .style("left", "0") .style("z-index", 1) .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) svgYAxes.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .attr("fill", color) .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i])) .attr("y", i => yScale(0)) .attr("height", 0) // always equal to 0 .attr("width", xScale.bandwidth()) .attr("fill", 'transparant') .attr('data', i => X[i]) .on("click", function(d) { if(!filtered){ d3.select(this).style('fill', 'red'); //just to make sure const t = this.getAttribute('data') const filter = filterData(data, t) if(filter && filter.length && filter.length > 0){ filtered = true; const newData = filter[0].subKey update(newData.slice(0,11)); } } }) .on('mouseover', function(d) { if(!filtered){ d3.select(this).style('stroke', 'rgba(0, 142, 196, 1)'); } }) .on('mouseout', function(d) { if(!filtered){ d3.select(this).style('stroke', 'transparent'); } }); bar .transition() .duration(1000) .attr("y", i => yScale(Y[i])) .attr("height", i => yScale(0) - yScale(Y[i])) .delay(function(d,i){return(i*100)}); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) } // set default data update(ogDate); // fix issue with labes not wrapping setTimeout(()=>{ update(ogDate); }, 10) addButton(); return; }3f:T548,Carbon Dioxide is the gas emitted by humans. This includes gasses like methane, nitrous oxide, and fluorinated gases methane, nitrous oxide, and fluorinated gases. These gasses get trapped in the atmosphere, causing global warming. As most people know the world is collectively trying to reduce Carbon Dioxide emissions to slow down the impact it has on global warming. Gas flaring is the practice of burning gas associated with oil extraction. this has been done since the beginning of oil production. This process is very wasteful and polluting to the environment but the major reason why we still do gas flaring is that it's relatively safe and the export of gas requires an economically viable market as the company doing the oil production needs to capture, transport, process, and sell the gas. As we can see from the charts below on a World scale Carbon Dioxide emissions didn't really drop down over the last 20 years. We saw a drop in natural gas and total flaring in the 1980s but not from non-flaring emissions. And after the drop to 195 million tonnes of carbon dioxide, we saw an increase to 300 million tonnes of carbon dioxide in the year 2020. source: https://www.nytimes.com/guides/year-of-living-better/how-to-reduce-your-carbon-footprint source: https://www.worldbank.org/en/programs/gasflaringreduction/gas-flaring-explained40:Tdd6,function convertDataOil(rawData, source) { // Carbon Dioxide Emissions from Flaring let data = []; const keysToArray = (ob) => { const arr = []; _.keys(ob).forEach((k) => { arr.push(ob[k]); }); return arr; }; const createObject = (list, list2) => { const r = {}; _.forEach(list, (a, i) => { if (list2[i]) { if (i == 0) { r["country"] = list2[i].trim(); } else { if (!r[a]) { r[a] = list2[i]; } } } }); return r; }; let heading = []; _.forEach(rawData, (a, i) => { if (i == 2) { heading = keysToArray(a); } if (i > 3) { const v = keysToArray(a); const insert = createObject(heading, v); if(i < 27){ insert.type = 'import crude' }else{ insert.type = 'import product' } if (insert["country"]) { data.push(insert); } } }); // rename total export _.map(data, (a) => { if(a['Total']){ a['Total export'] = a['Total'] delete a['Total'] } return a; }) const seperateData = (rawData, normalData, TotalData) => { _.forEach(rawData, (a, i) => { let FromCountry = a["country"]; _.keys(a).forEach((k) => { let toCountry = k if(_.isNumber(a[k])){ if(_.includes(a["country"] , 'Total') || _.includes(k , 'Total')){ let type = FromCountry; let country = toCountry if(_.includes(toCountry , 'Total')){ type = toCountry country = FromCountry } TotalData.push({ type , country, value: a[k]}); }else{ normalData.push({ from: FromCountry , to: toCountry, value: a[k]}); } } }) }); } // make a separate objects for every year const formattedDataCrude = []; const formattedDataProduct = []; const formattedDataCrudeTotal = []; const formattedDataProductTotal = []; // find import/export crude oil const d1 = _.filter(data , {type: 'import crude'}) seperateData(d1,formattedDataCrude,formattedDataCrudeTotal) // _.forEach(d1, (a, i) => { // let FromCountry = a["country"]; // _.keys(a).forEach((k) => { // let toCountry = k // if(_.isNumber(a[k])){ // if(_.includes(a["country"] , 'Total') || _.includes(k , 'Total')){ // let type = FromCountry; // let country = toCountry // if(_.includes(toCountry , 'Total')){ // type = toCountry // country = FromCountry // } // formattedDataCrudeTotal.push({ type , country, value: a[k]}); // }else{ // formattedDataCrude.push({ from: FromCountry , to: toCountry, value: a[k]}); // } // } // }) // }); const d2 = _.filter(data , {type: "import product"}) seperateData(d2,formattedDataProduct,formattedDataProductTotal) _.forEach(data, (a, i) => { let FromCountry = a["country"]; _.keys(a).forEach((k) => { let toCountry = k if(_.includes(FromCountry , 'Total') && _.isNumber(a[k])){ // formattedDataCrudeTotal.push({ from: FromCountry , to: toCountry, value: a[k]}) } else if(_.isNumber(a[k])){ // formattedDataCrude.push({ from: FromCountry , to: toCountry, value: a[k]}); } }); }); return { dataCrudeOil: formattedDataCrude , datProductOil: formattedDataProduct, totalImportCrude: formattedDataCrudeTotal , totalImportProduct: formattedDataProductTotal }; }41:T2b59,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/force-directed-graph function customForceGraph({ nodes, // an iterable of node objects (typically [{id}, …]) links, // an iterable of link objects (typically [{source, target}, …]) groups, }, { 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 nodeTitle, // given d in nodes, a title string nodeFill = "currentColor", // node stroke fill (if not using a group color encoding) nodeStroke = "#fff", // node stroke color nodeStrokeWidth = 1.5, // node stroke width, in pixels nodeStrokeOpacity = 1, // node stroke opacity nodeRadius = 5, // node radius, in pixels nodeStrength, linkSource = ({source}) => source, // given d in links, returns a node identifier string linkTarget = ({target}) => target, // given d in links, returns a node identifier string linkStroke = "#999", // link stroke color linkStrokeOpacity = 0.6, // link stroke opacity linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels linkStrokeLinecap = "round", // link stroke linecap linkStrength, colors = d3.schemeTableau10, // an array of color strings, for the node groups width = 640, // outer width, in pixels height = 400, // outer height, in pixels invalidation // when this promise resolves, stop the simulation } = {}) { // Compute values. const N = d3.map(nodes, nodeId).map(intern); const LS = d3.map(links, linkSource).map(intern); const LT = d3.map(links, linkTarget).map(intern); if (nodeTitle === undefined) nodeTitle = (_, i) => N[i]; const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle); const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern); const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth); const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke); const rad = [] _.forEach(nodes , (node)=>{ rad.push(Math.sqrt(node.import + node.export)) }) // 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': links[i].value})); // Compute default domains. if (G && nodeGroups === undefined) nodeGroups = d3.sort(G); // Construct the scales. const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors); // Construct the forces. const forceNode = d3.forceManyBody(); const forceLink = d3.forceLink(links).id(({index: i}) => N[i]); if (nodeStrength !== undefined) forceNode.strength(nodeStrength); if (linkStrength !== undefined) forceLink.strength(linkStrength); const simulation = d3.forceSimulation(nodes) .force("link", forceLink) .force("charge", forceNode) .force("center", d3.forceCenter(width / 2 , height /2 -50).strength(0.5)) // make animation smooth .on("tick", ticked); const svg = d3.create("svg") .attr("width", width) .attr("height", height) // .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const link = svg.append("g") .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null) .attr("stroke-opacity", linkStrokeOpacity) .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null) .attr("stroke-linecap", linkStrokeLinecap) .selectAll("line") .data(links) .join("line"); const node = svg.append("g") .attr("fill", nodeFill) .attr("stroke", nodeStroke) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-width", nodeStrokeWidth) .selectAll("circle") .data(nodes) .join("circle") .attr('id' , (d)=>{ return d.id;}) .attr("r", ({index: i}) => (rad[i])) .call(drag(simulation)); const linkNode = svg.selectAll("line") node.on("mouseover", (d)=> { const c = d.target.getAttribute('id'); selectedCountry.text(c) let im = []; let ex = []; linkNode.attr('stroke-opacity', function (l) { // create from links const v = _.round(l.value , 2) if(c === l.source.id){ ex.push({ key: l.target.id, value: v}); }else if(c === l.target.id)( im.push({ key: l.source.id, value: v}) ) // change stroke and opacity if (c === l.source.id || c === l.target.id) return 1; else return 0.5; }); linkNode.attr('stroke', function (l) { if(c === l.source.id){ // export return 'red' }else if (c === l.target.id){ // import return 'green'; } else return '#999'; }); if(im.length > 0){ const s = _.reverse(_.sortBy(im , 'value')) let j = [] _.each(s , (k)=>{ j.push(`${k.key}: ${k.value}`) }) appendTextWithLineBreaks(j.join(',') , selectedLinksImport) } if(ex.length > 0){ const s = _.reverse(_.sortBy(ex , 'value')) let j = [] _.each(s , (k)=>{ j.push(`${k.key}: ${k.value}`) }) appendTextWithLineBreaks(j.join(',') , selectedLinksExport) } }) node.on("mouseout", function (d) { linkNode.attr('stroke-opacity', 0.5) linkNode.attr('stroke', '#999') selectedCountry.text('-') appendTextWithLineBreaks('-' , selectedLinksImport) appendTextWithLineBreaks('-' , selectedLinksExport) }); if (W) link.attr("stroke-width", ({index: i}) => W[i]); if (L) link.attr("stroke", ({index: i}) => L[i]); if (G) node.attr("fill", ({index: i}) => color(G[i])); if (T) node.append("title").text(({index: i}) => T[i]); if (invalidation != null) invalidation.then(() => simulation.stop()); function intern(value) { return value !== null && typeof value === "object" ? value.valueOf() : value; } function ticked() { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); } function drag(simulation) { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } const appendTextWithLineBreaks = (t , element)=>{ element.selectAll("*").remove() var arr = t.split(","); if (arr != undefined) { for (let i = 0; (i < arr.length && i < 10) ; i++) { element.append("tspan") .text(arr[i]) .attr("dy", i ? "1.2em" : 0) .attr("x", width - offset) .attr("text-anchor", "left") .attr("class", "tspan" + i); } if(arr.length > 10){ element.append("tspan") .text('...') .attr("dy", 11 ? "1.2em" : 0) .attr("x", width - offset) .attr("text-anchor", "left") .attr("class", "tspan" + 11); } } } const offset = 250; const offsetCountry = 450 svg.append('text') .attr('x' , width - offsetCountry) .attr('y' , 30) .text('Selected country:'); const selectedCountry = svg.append('text') .attr('fill' , '#999') .attr('x' , width - offsetCountry) .attr('y' , 60) .text('-'); svg.append('text') .attr('x' , width - offset) .attr('y' , 30) .text('Selected country trade routes:'); svg.append('text') .attr('x' , width - offset) .attr('y' , 60) .attr('fill', 'green') .text('Import from (million tonnes):'); const selectedLinksImport = svg.append('text') .attr('x' , width - offset) .attr('fill', 'green') .attr('y' , 90) appendTextWithLineBreaks('-' , selectedLinksImport) svg.append('text') .attr('x' , width - offset) .attr('y' , 330) .attr('fill', 'red') .text('Export to (million tonnes):'); const selectedLinksExport = svg.append('text') .attr('fill', 'red') .attr('x' , width - offset) .attr('y' , 360) appendTextWithLineBreaks('-' , selectedLinksExport) // create legend // colors // groups const addCircle = (g , color, yPos, textNode)=>{ svg.append("circle") .attr("fill", color) .attr("stroke", nodeStroke) .attr("stroke-opacity", nodeStrokeOpacity) .attr("stroke-width", nodeStrokeWidth) .attr("r", 10) .attr("cx", 10) .attr("cy", yPos) .append('title') .text(g.join(', ')); } function wrap(text, width) { text.each(function () { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, // ems x = text.attr("x"), y = text.attr("y"), dy = 0, //parseFloat(text.attr("dy")), tspan = text.text(null) .append("tspan") .attr("x", x) .attr("y", y) .attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan") .attr("x", x) .attr("y", y) .attr("dy", ++lineNumber * lineHeight + dy + "em") .text(word); } } }); } const addText = (g , yPos , op)=>{ const t = svg.append('text') .attr('x' , 25) .attr('y' , yPos + 7) .style('opacity' , op) .style('pointer-events', 'none') .text(g.join(', ')) return t; } svg.append('text') .attr('x' , 10) .attr('y' , 30) .text('Group legend:'); let currentY = 30 let currentColor = 0 _.forEach(groups, (group, index)=>{ currentY += 45; const t = addText(group , currentY , 1) setTimeout(()=>{ // force add text to wrap(t,300) },0) addCircle(group, colors[index] , currentY, t); }) return Object.assign(svg.node(), {scales: {color}}); }42:T417,As most people know the oil trade is an important factor of the world economy. The price of oil can vary a lot depending on supply and the demand. Like in 2014 when Saudi Arabia decided not to scale down there production and the US also kept producing its steady amount we got an over production and prices fell sharply. It would be interesting to do the same study about the global trade of crude/produced oil in the year 2022 as we have a war going on and this would drastically change trade relations between countries. The following network represents the trade oil crude/produced oil in the Year 2020. The nodes size represents the total import and export a country does while the line thingness of the links represents the trade of those countries. When hovering over a country it shows the import of oil with green line color and export with a red color. Hovering also reveals more info on the right side of the chart for easier reading and specific values of trades. The legend has a hoverable state to reveal the countries un that group.43:T54d,--- ## Conclusion Over the last 50 years, our global energy consumption habits have gone through a lot of change. Our total consumption has almost tripled in that time, and the largest contributors are still oil, natural gas, and coal. While renewable energy usage is also on the rise, some regions still remain heavily dependent on these traditional dirty energy sources so this is a point to improve on in the future. Similarly, our carbon emissions have risen alongside our energy consumption. Because of this dip in oil, natural gas, and coal consumption, 2020 saw the largest decline in our carbon dioxide emissions. Inspecting carbon dioxide emissions closer we observe that on a global scale we are stabilizing but most western countries are increasing in carbon dioxide emissions we see a big drop in countries like Nigeria, Saudi Arabia and United Arab Emirates. These countries are major players in the oil trade and export of crude oil. While the US, China and Asia Pacific countries have large export of produced oil. Looking to the future, while we have come far already there is still a lot of room for improvements. Global hydro and renewable use are still lagging behind the more popular dirtier alternatives, especially in less developed countries. For a better future, we all need to work together towards a more sustainable future. 44:T41a,function getrow(year, nr_countries) { const notin = d3 .groupSort( totalcons_countryp_filled.filter( (e) => e.year.getFullYear() == year && // e.source == mapsource && e.country != "World" ), (D) => d3.sum(D, (d) => d.value), (d) => d.country ) .slice(0, -nr_countries); const res = new Array(6).fill().map((e, i) => { return { country: "Rest of World", year: new Date(String(year)), value: d3 .rollup( totalcons_countryp_filled.filter( (e) => (e.year.getFullYear() == year) & (e.country != "World") & notin.includes(e.country) ), (v) => d3.sum(v, (d) => d.value), (d) => d.source ) .get(sources[i]), source: sources[i] }; }); const total = d3.sum(res, (d) => d.value); // res.forEach((e) => (e.proportion = e.value / total)); const fin = res.map((e) => {e.proportion = e.value / total; return e;}) return fin; }45:Td10,function maprename(oldarr) { const newarr = []; const irename = new Map([ ["US", "United States of America"], ["Trinidad & Tobago", "Trinidad and Tobago"], ["Czech Republic", "Czechia"], ["North Macedonia", "Macedonia"], ["Russian Federation", "Russia"], ["China Hong Kong SAR", "Hong Kong"] ]); oldarr.forEach((d) => { if (d.country == "USSR") { [ "Russia", //"Georgia", "Ukraine", "Latvia", "Estonia", "Lithuania", "Belarus" ].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else if (d.country == "Eastern Africa") { [ "Sudan", "Mozambique", "Madagascar", "Malawi", "Uganda", "Zambia", "Zimbabwe", "Ethiopia", "Somalia", "Kenya", "Tanzania" ].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else if (d.country == "Middle Africa") { [ "Angola", "Cameroon", "Central African Rep.", "Chad", "Dem. Rep. Congo", "Congo", "Eq. Guinea", "Gabon", "São Tomé and Principe" ].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else if (d.country == "Western Africa") { [ "Mauritania", "Nigeria", "Burkina Faso", "Cabo Verde", "Mali", "Niger" ].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else if (d.country == "Central America") { [ "Belize", "Costa Rica", "El Salvador", "Guatemala", "Honduras", "Nicaragua", "Panama" ].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else if (d.country == "Other Caribbean") { ["Cuba", "Haiti", "Dominican Rep.", "Puerto Rico"].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else if (d.country == "Other South America") { ["Guyana", "Suriname", "Bolivia", "Paraguay", "Uruguay"].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else if (d.country == "Other Middle East") { ["Syria", "Jordan"].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else if (d.country == "Other Northern Africa") { ["Libya", "Tunisia"].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else if (d.country == "Other Southern Africa") { ["Botswana", "Lesotho", "Namibia"].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else if (d.country == "Other Asia Pacific") { [ "Brunei", "Cambodia", "Macao", "Laos", "Mongolia", "North Korea", "Afghanistan", //"Bangladesh", "Myanmar", "Nepal", "Papua New Guinea" ].forEach((c) => { newarr.push(_.assign(_.clone(d), { country: c })); }); } else { newarr.push(d); } }); const res = newarr.map((d) => _.assign(d, { country: irename.get(d.country) || d.country }) ); return res; }46:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1649124820027.892,"size":756420},{"id":"36020f5b8df5346d301c298f9a2ecbc50ff405873e0a443984e67fd31f1da9559d2ec2dabf6c9dcc0f4dddf3dcaac74ee995d0f18f4075071209470886ee160c","href":"https://static.observableusercontent.com/files/36020f5b8df5346d301c298f9a2ecbc50ff405873e0a443984e67fd31f1da9559d2ec2dabf6c9dcc0f4dddf3dcaac74ee995d0f18f4075071209470886ee160c","name":"chlorototalcons.json","type":"application/json","lastModified":1651442510640.265,"size":5700219},{"id":"8f0ca8d1b1449aed0794bc233b29ee1a0399e55ee3b0ddbae747471511d0ef4560e29e541e60a34399bb392a43b5ef5cd80720e63c34327e3fca0f12e80db89e","href":"https://static.observableusercontent.com/files/8f0ca8d1b1449aed0794bc233b29ee1a0399e55ee3b0ddbae747471511d0ef4560e29e541e60a34399bb392a43b5ef5cd80720e63c34327e3fca0f12e80db89e","name":"totalcons_countryp_filled.json","type":"application/json","lastModified":1651442522273.48,"size":4510361},{"id":"49cbc6c4afa05900c09ce38026001a83bf6a37947feccd7b78e94f401fd388ac617820b90a9026c0447477ddaa56f97112ab043764b8b3e5380f150fb322135e","href":"https://static.observableusercontent.com/files/49cbc6c4afa05900c09ce38026001a83bf6a37947feccd7b78e94f401fd388ac617820b90a9026c0447477ddaa56f97112ab043764b8b3e5380f150fb322135e","name":"totalcons_regionp.json","type":"application/json","lastModified":1651442524757.527,"size":416876},{"id":"6c585f97405f84ee8849f2f70c059ffbf7d1ee59fc5591bbf5cb66270fd4a275ac219d32860a838015b044a3fb91993c6b98bad6bfee515214e39820da6bd42f","href":"https://static.observableusercontent.com/files/6c585f97405f84ee8849f2f70c059ffbf7d1ee59fc5591bbf5cb66270fd4a275ac219d32860a838015b044a3fb91993c6b98bad6bfee515214e39820da6bd42f","name":"objectData.json","type":"application/json","lastModified":1651448562440.005,"size":961443}] 31:{"id":"3824de9a154ffda0","slug":"project-world-energy-trends","title":"Project - World Energy Trends","thumbnail":"e7dea8781acb9c320bdefc07dc1eeaafaa91e028928bfb3f3fe30fee5b8bc705","access_level":"public","create_time":"$D2022-04-05T01:24:04.878Z","update_time":"$D2022-05-05T23:53:44.453Z","view_time":null,"first_public_time":"$D2022-05-04T21:38:47.977Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"b2814c931e18558f","login":"emile-f","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fb376a03c0887e54259b389cf0d0990d8bfa4969986dfd5295e7f227f9134577","tier":"starter_2024"},"version":2428,"publish_version":2428,"role":null,"authored":false,"authors":[{"type":"individual","id":"af96e6f2b5626d88","login":"af96e6f2b5626d88","name":"David Pan","avatar_url":"https://avatars-next.observableusercontent.com/61c3916ed20730d9ae97e8727a3a0e9c2787a954c0bcb3a9942935b491fa28d7","tier":null},{"type":"individual","id":"3fec1496d1f775c9","login":"emile-f","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fb376a03c0887e54259b389cf0d0990d8bfa4969986dfd5295e7f227f9134577","tier":null}],"members":[{"type":"individual","id":"af96e6f2b5626d88","login":"af96e6f2b5626d88","name":"David Pan","avatar_url":"https://avatars-next.observableusercontent.com/61c3916ed20730d9ae97e8727a3a0e9c2787a954c0bcb3a9942935b491fa28d7","tier":null,"role":"editor"},{"type":"individual","id":"3fec1496d1f775c9","login":"emile-f","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fb376a03c0887e54259b389cf0d0990d8bfa4969986dfd5295e7f227f9134577","tier":null,"role":"editor"}],"comments":[{"id":"e162a4f6cb5e99ae","reply_to_id":null,"content":"this is a graph","create_time":"$D2022-05-05T18:33:55.156Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"af96e6f2b5626d88","login":"af96e6f2b5626d88","name":"David Pan","avatar_url":"https://avatars-next.observableusercontent.com/61c3916ed20730d9ae97e8727a3a0e9c2787a954c0bcb3a9942935b491fa28d7","tier":null}},{"id":"3f4b99d75e3ec75c","reply_to_id":"e162a4f6cb5e99ae","content":"Was very confused - that makes sense. Thanks","create_time":"$D2022-05-05T19:24:19.670Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"af96e6f2b5626d88","login":"af96e6f2b5626d88","name":"David Pan","avatar_url":"https://avatars-next.observableusercontent.com/61c3916ed20730d9ae97e8727a3a0e9c2787a954c0bcb3a9942935b491fa28d7","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Project - World Energy Trends","cells":[{"id":0,"value":"# Project - World Energy Trends\n## Authors: Emile F & David P\n\n#### Class link: https://johnguerra.co/classes/data_visualization_spring_2022/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1665,"value":"## Intro\nThe covid pandemic has had a massive impact on our lives. The effects of this are also felt in energy markets where global primary energy consumption fell by 4.5% and carbon emissions fall by 6.3% in the largest year-to-year decline in over 50 years. The issue of oil from Russia, has also become a problem recently as well. All the while the world aims to be moving towards greener more renewable energy sources. \n\nWith our visualizations we want to show what sources the power we are consuming to generate our power and to show features and historic trends between countries. \n\nWebsite: https://emile-f.github.io/2020-World-energy-review/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"# Abstraction\n## Users:\n -\tClimate enthusiasts\n -\tGeography students\n -\tPotential energy investors\n -\tYoung people\n\n\n## Data:\n - Original Data Source: [BP Statistical Review of World Energy](https://www.bp.com/en/global/corporate/energy-economics/statistical-review-of-world-energy.html)\n - Dataset type: Tables - temporal\n - Data availability: Static\n\n\n### Used Tables all attributes:\n - Oil Consumption - EJ\n - Gas Consumption - EJ\n - Coal Consumption - EJ\n - Nuclear Consumption - EJ\n - Hydro Consumption - EJ\n - Renewables Consumption - EJ\n - CO2 From Flaring - Million tonnes of carbon dioxide\n - CO2 Excluding Flaring - Million tonnes of carbon dioxide\n - Oil - Inter-area movements - million tonnes\n\n### Derived attributes:\n - Choropleth map country mapping\n - Separating regions from countries from world data\n - Calculating proportions of energy usage by source\n - For more info check the respective preprocessing sections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":362,"value":"---\n## David","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1666,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":361,"value":"---\n**Insights 1.1**: \n - The global power consumption dip in 2020 from covid was the largest dip in the last 50 years.\n - The largest factor in this decline was oil (-15EJ) with coal (-6EJ) and natural gas (-3EJ) falling as well. \n - Hydro & renewable consumption were unaffected and continued to rise. \n\n**T1.1: ** Discover features and trends for worldwide energy consumption (present/discover, trends)\n\nIdiom: Stacked area chart\n - Marks: Area\n - Channels: Color represent source, x represents time, y height represents consumption by source\n\n+\n\nIdiom: Line Chart\n - Marks: Lines\n - Channels: Color represent source, x represents time, y position represents consumption by source","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1668,"value":"---\n### Total Global Energy Consumption\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1669,"value":"viewof normalize1 = Inputs.toggle({\n label: html` View percentages (normalize):`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1670,"value":"sackey1 = Swatches(sac_world.scales.color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1671,"value":"sac_world = !normalize1\n ? StackedAreaChart(cons_world, {\n x: (d) => d.year,\n y: (d) => d.value,\n z: (d) => d.source,\n yLabel: \"↑ Energy Consumption (Exajoules)\",\n colors: [\n \"#d73027\",\n \"#f46d43\",\n \"#fdae61\",\n \"#fee08b\",\n \"#a6d9f5\",\n \"#66bd63\"\n ],\n width,\n height: c1height,\n yDomain: [0, 600],\n marginRight: 30,\n marginLeft: 30\n })\n : StackedAreaChart(cons_world, {\n x: (d) => d.year,\n y: (d) => d.value,\n z: (d) => d.source,\n yLabel: \"↑ Percentage of Total Energy Consumption\",\n colors: [\n \"#d73027\",\n \"#f46d43\",\n \"#fdae61\",\n \"#fee08b\",\n \"#a6d9f5\",\n \"#66bd63\"\n ],\n width,\n height: c1height,\n offset: d3.stackOffsetExpand,\n yFormat: \"%\",\n marginRight: 30,\n marginLeft: 30\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"### Global Energy Consumption - Individual Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1673,"value":"line1 = !normalize1\n ? LineChart(cons_world, {\n x: (d) => d.year,\n y: (d) => d.value,\n z: (d) => d.source,\n yLabel: \"↑ Energy Consumption (Exajoules)\",\n color: function (x) {\n return cmap.get(x);\n },\n width,\n height: c1height,\n title: (d) =>\n `${new Date(d.year).getFullYear() +1 }: ${d.value.toFixed(2)} ${d.source} EJ`,\n yDomain: [0, 200],\n marginRight: 30,\n marginLeft: 30\n })\n : LineChart(cons_world, {\n x: (d) => d.year,\n y: (d) => d.proportion,\n z: (d) => d.source,\n yLabel: \"↑ Percentage of Total Energy Consumption\",\n color: function (x) {\n return cmap.get(x);\n },\n width,\n height: c1height,\n title: (d) =>\n `${new Date(d.year).getFullYear() +1 }: ${(d.proportion * 100).toFixed(1)} % ${\n d.source\n }`,\n yFormat: \"%\",\n yDomain: [0, 0.5],\n marginRight: 30,\n marginLeft: 30\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1674,"value":"---\nNext, we can take a closer look and explore the individual regions & countries. Historically the US was the leading energy consumer until they were overtaken by China in 2009 who have led the world since then. India has also been steadily climbing the ranks in the meantime as well. \n\nA clear trend that is visible on the visualizations below is that more developed nations also have higher energy consumption. This obviously makes a lot of sense. However it did not mean that they were using higher proportions of cleaner energy sources. In fact while the general overall trend is that renewable energy consumption is increasing, only around half of the highest 25 consumers in 2020 consume more than 10% of clean (hydro or renewable) energy. The leaders in that regard are Brazil with over 40% of their power coming from clean sources (most of which is from hydro) and then Canada with almost 30%.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2039,"value":"---\n**Insights 1.2**: \n - The largest energy consumers tend to also be more developed countries. However, renewable consumption rate is still quite low (<12% hydro + renewable on average) amongst them even in in 2020.\n - Brazil is one of the outliers with high hydro & renewable energy consumption with around 45% of power consumed in 2020 coming from those 2 sources combined. \n\n**T1.2: ** Compare energy consumption between different regions/ countries (compare, features)\n\nIdiom: Stacked bar chart\n - Marks: Line/area\n - Channels: Color represent source, x width represents energy from a particular source, y is categorical between regions & countries and is ordered by total consumption","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1675,"value":"---\n### Worldwide Energy Consumption by Region","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1676,"value":"viewof normalizesac = Inputs.toggle({\n label: html` View percentages (normalize):`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1677,"value":"viewof baryear = Inputs.range([1965, 2020], {\n value: 2020,\n step: 1,\n label: html` Year: `,\n width: 300\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"sbckey_r = Swatches(sbc_r.scales.color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"### Worldwide Energy Consumption by Country\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1681,"value":"viewof no_countries1 = Inputs.range(\n [\n 1,\n d3.groupSort(\n totalcons_countryp_filled,\n (D) => d3.sum(D, (d) => d.value),\n (d) => d.country\n ).length - 1\n ],\n {\n value: 20,\n step: 1,\n label: html` Number of countries shown: `,\n width: 300\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1682,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1683,"value":"----\n### Energy Consumption by Country\nHere we can take an even closer look at a single countries power consumption history. Are there any countries you are curious about? Take a look at their consumption history here. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2051,"value":"---\n**Insights 1.3**: \n - Norway is the world leader in hydro consumption with a steady 60% of their power coming from hydro sources since 1965.\n - Singapore practically only consumes oil with a little bit of natural gas recently and practically nothing else.\n\n**T1.1: ** Browse individual country energy consumption (lookup/browse, features)\n\nSame as before: \nIdiom: Stacked area chart\n - Marks: Area\n - Channels: Color represent source, x represents time, y height represents consumption by source\n\n+\n\nIdiom: Line Chart\n - Marks: Lines\n - Channels: Color represent source, x represents time, y position represents consumption by source","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1684,"value":"md`\n### Total ${countryselect} Energy Consumption`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"viewof countryselect = Inputs.select(\n [...new Set(totalcons_countryp_filled.map((o) => o.country))].sort(),\n {\n value: \"United States of America\",\n label: html` Aggrigate data by country:`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"viewof normalize2 = Inputs.toggle({\n label: html` View percentages (normalize):`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1687,"value":"sackey2 = Swatches(sac_country.scales.color)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1688,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"md`### ${countryselect} Energy Consumption - Individual Sources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1690,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"---\n## 2. Worldwide Power Consumption by Source\n\n### Global Trends Overview - Map\n\nNow that we have general overview lets break it down and take a look at each individual power source. \nFirstly, lets take a look at a map visualization of consumption by source. The option to view the proportion instead of the absolute value especially highlights which regions are most reliant on what energy source. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"---\n**Insights 2.1**: \n - Central American and African countries tend to be more reliant on oil.\n - Northern African, middle eastern and Russia are the most reliant on natural gas.\n - South Africa and Asian countries, especially India and China are the most reliant on coal sourced energy.\n - France is the only european country that is still consuming nuclear energy. Most of the other countries slowly phased out nuclear use after the Chernobyl disaster (1986). \n - Europe and some south American countries (Brazil & Chile mainly) are the current (2020) leaders in renewable energy usage.\n\n**T2.1: ** Discover geographic trends in energy consumption (discover/ present, trends)\n\nIdiom - Choropleth map\n\nMarks: Areas\n\nChannels: Color - hue represent power source, color - saturation & luminance represent respective values, map location represents country","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1692,"value":"md`\n---\n### Map of Energy Consumption in ${mapyear} from ${mapsource}\\n\n\n\n${mapyear} Total Energy From ${mapsource}: ${chlorototalcons\n .filter(\n (e) =>\n e.year.getFullYear() === mapyear - 1 &&\n e.country == \"World\" &&\n e.source == mapsource\n )[0]\n .value.toLocaleString(\"en\")} EJ. \n\\nWhich is ${(\n chlorototalcons\n .filter(\n (e) =>\n e.year.getFullYear() === mapyear - 1 &&\n e.country == \"World\" &&\n e.source == mapsource\n )[0]\n .proportion.toLocaleString(\"en\") * 100\n).toFixed(2)}% of Total World Energy Consumed. \n\n${mapyear} Total Annual Energy Consumed: ${chlorototalcons\n .filter(\n (e) => e.year.getFullYear() === mapyear - 1 && e.country == \"World\"\n )[0]\n .total.toLocaleString(\"en\")} EJ.\\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1693,"value":"viewof mapsource = Inputs.select(sources, {\n value: \"Oil\",\n label: html`Energy Source: `\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"viewof viewpct = Inputs.toggle({\n label: html` View as proportion of countries total power: `,\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1695,"value":"key1 = !viewpct\n ? Legend(consumptionmap.scales.color, {\n title: \"Country power consumption (exajoules) → \"\n })\n : Legend(consumptionmap.scales.color, {\n title: \"Country power consumption (percentage of countries total) → \",\n tickFormat: \"%\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1696,"value":"consumptionmap = Choropleth(\n chlorototalcons.filter(\n (e) => e.year.getFullYear() === mapyear - 1 && e.source === mapsource\n ),\n {\n id: (d) => d.country,\n value: (d) => (!viewpct ? d.value : d.proportion),\n range: dropdown.get(mapsource),\n features: worldcountries,\n featureId: (d) => d.properties.name,\n borders: countrymesh,\n projection: d3.geoEqualEarth(),\n width,\n domain: !viewpct\n ? undefined\n : mapsource == \"Renewables\" || mapsource == \"Nuclear\"\n ? [0, 0.5]\n : [0, 1],\n stroke: \"#DBDBDB\",\n fill: \"#DBDBDB\",\n unknown: \"white\",\n format: !viewpct ? \".2f\" : \".2%\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1697,"value":"viewof mapyear = Scrubber(\n Array.from({ length: (2020 - 1965) / 1 + 1 }, (_, i) => 1965 + i),\n { loop: false, delay: 150, autoplay: false, initial: 2020 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"---\nWhile pleasing to look at and good for geographic trends, a map might not be ideal for comparing between countries. So again, let us take a closer look and explore the individual countries. \nWe saw above that oil primarily declined in 2020, but coal and natural gas also had significant dips as well. The largest contributing countries to this decline were US, India and Russia. On the other side, China virtually the few countries that actually increased their power consumption from all of these sources at this time (growing +0.6, +0.8, +0.5 EJ respectively). \n\nIn fact, China's power consumption grew in every category with them also being the largest individual contributor towards renewable energy growth in 2020 growing by 1 EJ followed by the US with a growth of 0.4. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2078,"value":"---\n**Insights 2.2**: \n - Singapore for a country that tiny is ranked 12th for global power consumption. \n - France accounts for almost half of Europe's nuclear power consumption.\n - China is the only country in the top 20 that had all sources of consumption **increase** in 2020. Other countries all had decreases in at least one source. \n\n**T2.2: ** Compare energy consumption between different regions/ countries by energy source (lookup/ browse, features & trends)\n\nIdiom: Bar chart\n - Marks: Line/area\n - Channels: Color represent source, x width represents energy from a particular source, y is categorical between regions & countries and is ordered by total consumption","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1699,"value":"md`\n### ${barsource} Consumption by Region\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"viewof barsource = Inputs.select(sources, {\n value: \"Oil\",\n label: html`Energy Source: `\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"viewof baryear2 = Inputs.range([1965, 2020], {\n value: 2020,\n step: 1,\n label: html` Year: `,\n width: 300\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1702,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1703,"value":"md`\n### ${barsource} Consumption by Country\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"viewof no_countries2 = Inputs.range(\n [\n 1,\n d3.groupSort(\n totalcons_countryp_filled,\n (D) => d3.sum(D, (d) => d.value),\n (d) => d.country\n ).length - 1\n ],\n {\n value: 20,\n step: 1,\n label: html` Number of countries shown: `\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1705,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"---\n### Data Preprocessing\n- Moved to [here](https://observablehq.com/d/6e8f2f597235d244) to speed things up","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"---\n## Emile\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1813,"value":"### Carbon Dioxide emission","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1028,"value":"**Insights**:\nCarbon Dioxide Emissions production from Flaring has stabilized over the last 20 years on a global scale but on a per-country base, the reduction is caused by countries that are big oil producers.\n\n**Tasks:**\n\nT1: Compare the CO2 production over a period of 20 years on a global scale. (compare/summarize, trends) \nT2: Compare the CO2 production over a period of 20 years on a per-country base. (compare/summarize, trends) \nT3: The yearly production of carbon dioxide in western countries goes up over a period of 20 years. (compare/summarize, trends)\n\n**Marks and channels:** \nThese are the same for all Tasks \nchannels: Vertical position \nmarks: line","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2322,"value":"#### Data: \n\nThe dataset is of the tables type. The original attributes of the tables are: \n- Field: Country, type: text, description: country of the data\n- Field: year, type: date, description: year the data was regsitered\n- Field: value, type: number, description: the amount of carbon dioxide in Million tonnes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1064,"value":"**converting and filter data**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1438,"value":"// Moved to precompiled json verion for beter performance\n// objectData = [\n// ...convertData(rawData.sheet('CO2 From Flaring'),'From Flaring'), \n// ...convertData(rawData.sheet('CO2 Excluding Flaring'),'Not Flaring'),\n// ...convertData(rawData.sheet('Natural Gas Flaring'),'Natural Gas Flaring')\n// ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2013,"value":" objectDataRaw = FileAttachment(\"objectData.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2026,"value":"objectData = objectDataRaw.map((e) => {e.year = new Date(e.year); return e;})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2332,"value":"Filter data for world only, data used in Task 1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"worldData = _.filter(objectData, { country: 'World', source: typeTruncation})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2338,"value":"Filter out data based on type set by dropdown menu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1774,"value":"countryData = _.sortBy(_.filter(objectData, (item)=>{\n if(item.source === typeTruncation){\n if(!_.includes(item.country , 'OECD') && !_.includes(item.country , 'World')){\n return true;\n }else{\n return false;\n }\n } else {\n return false;\n }\n}), 'year')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2342,"value":"Get all unique countries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"c = [...new Set(countryData.map((o) => o.country))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"we convert the data to a format we can use in our d3 charts. we generate an array with all the years as object keys and a count value. Besides generating the initial array we also generate an array with all countries and their count for filter purposes. The data should look like this. [{ item: 1975-01-01, count: 341.12861639999954 subKey: [{item: \"Saudi Arabia\", count: 57.438938699999916}]}]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"dataForBarChart = convertToBarChart(_.filter(objectData, {source: typeTruncation}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2259,"value":"** Charts: **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1765,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1804,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"** T1: Compare the CO2 production over a period of 20 years on a global scale. (compare/summarize, trends) **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1985,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1776,"value":"viewof typeTruncation = Inputs.select(['From Flaring', 'Not Flaring'], {value: 'From Flaring', label: \"Filter data by emission Type:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"chartWorld = LineChartAnimation(worldData, {\n x: d => d.year,\n y: d => d.value,\n yLabel: \"↑ Million tonnes of carbon dioxide\",\n width,\n height: 500,\n color: \"steelblue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1095,"value":"** T2: Compare the CO2 production over a period of 20 years on a per-country base. (compare/summarize, trends) **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1992,"value":"If we now look at a per country visualization we can observe that all south/central American countries have a slight increase in carbon dioxide emissions while we saw the production in most North American countries double and we saw a decrease in most European countries.\n\nFiltering by country is done by selecting the desired country in the checkbox list below. while the filtering of emission Type is done by selecting the desired emission type.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"viewof selectedCountries = searchCheckbox(_.orderBy(c), {value: [\"US\", \"Iran\", \"Nigeria\", \"Saudi Arabia\", \"United Arab Emirates\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"chart = LineChartMultiple(_.filter(countryData , (item)=>{\n return _.includes(selectedCountries , item.country);\n}), {\n x: d => d.year,\n y: d => d.value,\n z: d => d.country,\n yLabel: \"↑ Million tonnes of carbon dioxide\",\n width,\n height: 500,\n color: \"steelblue\",\n title: (d) => `${d.year.getFullYear()} - ${d.country} - ${d.value.toFixed(2)} Million tonnes`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2292,"value":"** T3: The yearly production of carbon dioxide in western countries goes up over a period of 20 years. (compare/summarize, trends) **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2001,"value":"As we filter the same data on a per year bases we can observe that the carbon dioxide emission has stabilized in recent years. In the 1970's we observe that no western countries are in the list of top 10 list of countries that produce carbon dioxide emissions from flaring while in 2020 we see the United States of America as the 4th largest producer and we see China coming up in the top 10 of carbon dioxide emission production.\n\nYou can filter the data by clicking on a year you want to select. By filtering, you show the data from all countries in that year ordered by the amount of carbon dioxide emission production.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"barChartFilter = {\n const h = 500\n \n const parent = d3.create('div')\n const body = parent.append(\"div\")\n .style(\"overflow-x\", \"scroll\")\n .style(\"-webkit-overflow-scrolling\", \"touch\");\n\n const overwidth = width * 2\n \n const chart = BarChartWithFilterAndScroll(dataForBarChart, {\n x: d => d.item,\n y: d => d.count,\n yLabel: \"↑ Million tonnes of carbon dioxide\",\n width: overwidth,\n height: h,\n color: \"rgba(0, 142, 196, 0.52)\",\n parent: body\n });\n\n \n yield parent.node();\n \n body.node().scrollBy(overwidth, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"## Oil trade in the year 2020:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":901,"value":"**Insights**:\n\nSaudi Arabia is still the biggest exporter of crude oil while the US is the biggest for produced oil.\n\n**Tasks:**\n\nT1: Discover what the crude/product oil import/export is from countries. (discover, features)\n\n**Marks and channels:** \nchannels: size (size of circle) \nmarks: connection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2346,"value":"#### Data:\nThe dataset is of the tables type. The original attributes of the tables are:\n\n- Field: From, type: text, description: From country name\n- Field: To, type: Text, description: To country name\n- Field: value, type: number, description: amount of the trade-in millions tonnes of oil)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":908,"value":"**Importing and converting data**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":915,"value":"The original data was imported from the bp-stats-review-2021-all-data.xlsx file on the sheet: `Oil - Inter-area movements `\nAfter importing we had to convert the data to nodes and links for later use in our graph. The final data that the chart requires is an object with the nodes and links array. The nodes array consists of each country with its group and import and export amount in million tonnes of oil. The grouping follows the grouping the spreadsheet uses and is done by region. Example: groups 0 = Canada, Mexico, US. The links array consists of objects with 3 properties. the from and to the country and the value of the trade.\n\nExample of node object: \n`{id: \"Canada\", group: 0, import: 27.883, export: 189.295, type: \"crude\"}` \n\nExample of link object: \n`{from: \"Canada\", to: \"US\", value: 179.66016371077762}`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"rawOilTrade = rawData.sheet('Oil - Inter-area movements ')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"Split up the data between crude oil and product oil. (product oil is materials derived from crude oil through oil refineries)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":487,"value":"oilTrade = convertDataOil(rawOilTrade)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"Get all unique countries for use in the nodes array","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"oilCountries = _.uniq([\n ...new Set(oilTrade.dataCrudeOil.map((o) => o.from)), \n ...new Set(oilTrade.dataCrudeOil.map((o) => o.to)),\n ...new Set(oilTrade.totalImportCrude.map((o) => o.from)), \n ...new Set(oilTrade.totalImportCrude.map((o) => o.to))])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"Create group array from data out of the xlsx sheet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":850,"value":"groupPicker = [\n['Canada', 'Mexico' , 'US'],\n['S. & Cent. America'],\n['Europe' , 'Russia', 'Other CIS'],\n['Middle East', 'Iraq', 'Kuwait', 'Saudi Arabia', 'UAE', 'Other Middle East'],\n['Africa', 'North Africa', 'West Africa' , 'East & S. Africa'],\n['Australasia', 'China' , 'India' , 'Japan' , 'Singapore' , 'Other Asia Pacific'],\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"Function to convert the converted data to the desired graph format ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":510,"value":"function convertToGraphData(countries , links, type , groups) {\n const tTotal = type == 'crude' ? 'totalImportCrude' : 'totalImportProduct'\n const n = [];\n countries.forEach((c)=>{\n let group = 9\n groups.forEach((countryArr, index)=>{ // get group\n if(_.includes(countryArr , c)){\n group = index\n }\n });\n // get size\n const f = _.filter(links[tTotal] , {country: c});\n let i = 0;\n let e = 0;\n f.forEach((b)=>{\n if(_.includes(b.type, 'export')){\n e = _.round(b.value,3)\n }else{\n i = _.round(b.value,3)\n }\n })\n n.push({id: c , group ,import:i ,export:e , type })\n })\n const l = [];\n const t = type == 'crude' ? 'dataCrudeOil' : 'datProductOil'\n links[t].forEach((a)=>{\n if(a.value > 1){\n l.push(a)\n }\n })\n return {\n nodes: n,\n links: l,\n groups: groups\n }\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"graphData = convertToGraphData(oilCountries, oilTrade, oilType, groupPicker)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2305,"value":"** Chart: **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":700,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"**Visualization**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":735,"value":"The following network represents the trade oil crude/produced oil in the Year 2020. The nodes size represents the total import and export a country does while the line thingness of the links represents the trade of those countries. When hovering over a country it shows the import of oil with green line color and export with a red color. Hovering also reveals more info on the right side of the chart for easier reading and specific values of trades. The legend has a hoverable state to reveal the countries un that group.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2006,"value":"$42","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":837,"value":"viewof oilType = Inputs.select([\"crude\", \"product\"], {label: \"Type of oil\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"graphChart = customForceGraph(graphData, {\n nodeId: d => d.id,\n nodeGroup: d => d.group,\n nodeTitle: d => `country: ${d.id}\\nimport: ${d.import}\\nexport: ${d.export}\\noil type: ${d.type}\\ngroup: ${groupPicker[d.group]}`,\n // nodeTitle: d => ``,\n linkStrokeWidth: l => Math.sqrt(l.value),\n // given d in links, returns a node identifier string\n linkSource: d => d.from,\n linkTarget: d => d.to,\n nodeStrength: -1000,\n width,\n height: 600,\n invalidation // a promise to stop the simulation when the cell is re-run\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2360,"value":"---\n ## Tweets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2364,"value":"Link: : https://twitter.com/EmileFerrand/status/1522348566101913600","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2371,"value":"tweet(\"1522348566101913600\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2381,"value":"Link: https://twitter.com/David96583165/status/1522349827316543488","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2379,"value":"tweet(\"1522349827316543488\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2386,"value":"---\n ## Video's:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2392,"value":"David: ... \nEmile: ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2312,"value":"$43","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2411,"value":"---\n### Variables, Functions and Imports: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2412,"value":"c1height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2413,"value":"sources = [\"Oil\", \"Natural Gas\", \"Coal\", \"Nuclear\", \"Hydro\", \"Renewables\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2414,"value":"cmap = new Map([\n [\"Oil\", \"#d73027\",],\n [\"Natural Gas\", \"#f46d43\",],\n [\"Coal\", \"#fdae61\"],\n [\"Nuclear\", \"#fee08b\"],\n [\"Hydro\", \"#a6d9f5\"],\n [\"Renewables\", \"#66bd63\"]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2415,"value":"countries = Array.from(new Set(chlorototalcons.map((d) => d.country))).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2416,"value":"chlorototalconsi = FileAttachment(\"chlorototalcons.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2417,"value":"chlorototalcons = chlorototalconsi.map((e) => {e.year = new Date(e.year); return e;})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2418,"value":"totalcons_regionpi = FileAttachment(\"totalcons_regionp.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2419,"value":"totalcons_regionp = totalcons_regionpi.map((e) => {e.year = new Date(e.year); return e;})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2420,"value":"totalcons_countryp_filledi = FileAttachment(\"totalcons_countryp_filled.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2421,"value":"totalcons_countryp_filled = totalcons_countryp_filledi.map((e) => {e.year = new Date(e.year); return e;})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2422,"value":"cons_world = chlorototalcons.filter((e) => e.country === \"World\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2423,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2424,"value":"dropdown = new Map([\n [\"Oil\", d3.piecewise(d3.interpolateRgb, [\"white\", \"#d73027\", \"#454545\"])],\n [\n \"Natural Gas\",\n d3.piecewise(d3.interpolateRgb, [\"white\", \"#f46d43\", \"#454545\"])\n ],\n [\"Coal\", d3.piecewise(d3.interpolateRgb, [\"white\", \"#fdae61\", \"#454545\"])],\n [\n \"Nuclear\",\n d3.piecewise(d3.interpolateRgb.gamma(0.5), [\"white\", \"#fee08b\", \"#454545\"])\n ],\n [\n \"Hydro\",\n d3.piecewise(d3.interpolateRgb.gamma(0.5), [\"white\", \"#a6d9f5\", \"#454545\"])\n ],\n [\n \"Renewables\",\n d3.piecewise(d3.interpolateRgb.gamma(0.3), [\"white\", \"#66bd63\", \"#454545\"])\n ]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import {rawData} from \"@af96e6f2b5626d88/geographic-trends-in-energy-consumption\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"worldcountries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"countryMap = new Map(topojson.feature(world, world.objects.countries).features.map(d => [d.id, d]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1735,"value":"import {Choropleth, Legend} from \"@d3/choropleth\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1737,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1738,"value":"import {StackedAreaChart} from \"@d3/stacked-area-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"import {StackedBarChart} from \"@d3/stacked-horizontal-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"import { BarChart } from \"@d3/horizontal-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1741,"value":"import {LineChart} from \"@d3/multi-line-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1769,"value":"import {searchCheckbox} from \"@john-guerra/search-checkbox\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2365,"value":"import {tweet} from \"@observablehq/tweet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1","titling":"auto"}} 32:"$31:body"