chart = SankeyChart({
links: merge4
}, {
nodeGroup: d => d.id.split(/\W/)[0], // take first word for color
nodeAlign, // e.g., d3.sankeyJustify; set by input above
linkColor, // e.g., "source" or "target"; set by input above
format: (f => d => `${f(d)} TWh`)(d3.format(",.0~f")),
width,
height: 540
})
energy = FileAttachment("energy@8.csv").csv({typed: true})
el_nucl_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from nuclear (TWh)']]))
el_wind_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from wind (TWh)']]))
el_oil_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from oil (TWh)']]))
el_solar_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from solar (TWh)']]))
el_other_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from other renewables (TWh)']]))
el_hydro_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from hydro (TWh)']]))
el_gas_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from gas (TWh)']]))
el_coal_byyear= new Map(electricity.map(d => [d.Year, +d['Electricity from coal (TWh)']]))
elbyyear= new Map(electricity.map(d => [d.Year, d]))
elbyyear.get("2020")
/*energy5 = energy4.filter(d=>d.target=='Electricity').map(d=>{
let source = d.target;
let target = "Consumption";
let value = d.value;
return {source, target, value};
})*/
//energy6 = [...energy4, ...energy5]
/*energy4 = energy3.filter(d=>d[0] !='Entity' && d[0] !='Code'&&d[0] !='Year').map(d=>{
let source = d[0].replace(" Consumption", "").replace(" - EJ","").replace("Electricity from ", "").replace(" (TWh)", "")
.replace(/Oil|Gas|Coal|Solar|Hydro|Nuclear|Wind/gi, function(x){return x.toUpperCase();});
let target = d[0].replace(" - EJ", "").replace(/Oil|Gas|Coal|Solar|Hydro|Nuclear|Wind/gi, "").replace(" from (TWh)", "").replace("Geo Biomass Other","Consumption").replace("Biofuels (TWh)", "Consumption").replace(" from other renewables (TWh)", "");
let value = d[1];
return {source, target, value};
})*/
merge6 = [...merge4, ...merge5]
merge5 = merge4.filter(d=>d.target=='electricity').map(d=>{
let source = d.target;
let target = "consumption";
let value = d.value;
return {source, target, value};
})
merge4 = merge3.map(d=>{
let source = d[0].replace("consumption", "").replace("electricity", "");
let target = d[0].replace(/Oil|Gas|Coal|Solar|Hydro|Nuclear|Wind|other_renewable/gi, "");
let value = d[1];
return {source, target, value};
})
/*energy3 = merge.filter(d=>d.year ==start_year).map(d=>{
let Consumption = Object.entries(d.energy);
Consumption.forEach(entry => entry[1] = +entry[1]);
let Electricity = Object.entries(d.electricity);
Electricity.forEach(entry => entry[1] = +entry[1]);
return [...Consumption, ...Electricity];
})[0]*/
countries1 = file2.map(d => d.Entity).filter( function( item, index, inputArray ) {
return inputArray.indexOf(item) == index;
})
countries2 = file.map(d => d.Entity).filter( function( item, index, inputArray ) {
return inputArray.indexOf(item) == index;
})
countries = countries2.filter(value => countries1.includes(value))
d3Sankey = require.alias({"d3-array": d3, "d3-shape": d3, "d3-sankey": "d3-sankey@0.12.3/dist/d3-sankey.min.js"})("d3-sankey")
import {howto} from "@d3/example-components"
txtsource = (
"Chart designed by Khanh Nguyen, 2021\nData Source: https://github.com/owid/energy-data").split("\n")
alldata = d3.csv(
`https://raw.githubusercontent.com/owid/energy-data/master/owid-energy-data.csv`
)
alldata.filter((d) => d.country == country)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
