Public
Edited
May 1
original_data = d3.csvParse(await FileAttachment("CO2_emission.csv").text(), d3.autoType)
cleaned_data = original_data.map(item => {
return Object.fromEntries(
Object.entries(item).map(([key, value]) => [key, value === null || value === undefined ? 0 : value])
);
});
yearColumns = Object.keys(original_data[0]).filter(key => /^\d{4}$/.test(key))
region_data = {
// Will keep a dictionary of regions (key) and their full data Object
let region_data = {};
for (let i = 0; i < cleaned_data.length; i++) {
let obj = cleaned_data[i];
let region = obj['Region'];
// If dictionary doesn't have the region yet, create a new key and initialize it with an object which includes keys for each of the year categories
if (!region_data[region]) {
region_data[region] = { Region: region, count: 0 };
for (let j = 0; j < yearColumns.length; j++) {
region_data[region][yearColumns[j]] = 0;
}
}
region_data[region].count += 1;
// Sum the capita values to the current region total (will be averaged out to get a more meaningful val)
for (let j = 0; j < yearColumns.length; j++) {
region_data[region][yearColumns[j]] += obj[yearColumns[j]];
}
}
// Divide the summed capita values by the count of Countries in each region to get the average capita value across the region. Return an array, to match the original data format
return Object.values(region_data).map(obj => {
for (let j = 0; j < yearColumns.length; j++) {
obj[yearColumns[j]] = obj[yearColumns[j]] / obj.count;
}
return obj;
});
}
transformedData = region_data.flatMap(obj => {
var arr = [];
for (let j = 0; j < yearColumns.length; j++) {
arr.push({ region: obj['Region'], year: yearColumns[j], emissions: obj[yearColumns[j]] })
}
return arr
});
Plot.plot({
marginLeft: 200,
marginRight: 160,
marginBottom: 60,
height: 300,
width: 1100,
x: { label: "Year" },
y: { label: "Region" },
color: {
scheme: "YlOrRd",
legend: true
},
marks: [
Plot.cell(transformedData, {
x: "year",
y: "region",
fill: "emissions",
title: d => `Region: ${d.region}\nYear: ${d.year}\nEmissions: ${d.emissions}`
})
]
})
filtered_data = transformedData.filter(d =>
["1990", "1995", "2000", "2005", "2010", "2015"].includes(d["year"])
);
Plot.plot({
marginLeft: 150,
marginRight: 150,
marginBottom: 60,
height: 600,
width: 1100,
x: { axis: null },
y: { label: "Average Emissions Per Capita", tickFormat: "s", grid: true },
color: { scheme: "Spectral", legend: true },
marks: [
Plot.barY(filtered_data, {
x: "year",
y: "emissions",
fill: "year",
fx: "region",
sort: {
x: null,
color: null,
fx: { value: "-y", reduce: "sum" }
}
}),
Plot.ruleY([0])
]
})
filteredData = cleaned_data.filter(d =>
["North America", "Middle East & North Africa", "Europe & Central Asia"].includes(d["Region"])
);
links = {
let links = [];
let similarityThreshold = 1;
let emissionsByCountry = new Map(filteredData.map(obj => [obj['Country Name'], obj["1990"]]));
for (let i = 0; i < filteredData.length; i++) {
let country1 = filteredData[i]['Country Name'];
for (let j = i + 1; j < filteredData.length; j++) {
let country2 = filteredData[j]['Country Name'];
if (Math.abs(emissionsByCountry.get(country1) - emissionsByCountry.get(country2)) <= similarityThreshold) {
links.push({source: country1, target: country2});
}
}
}
return links
}
nodes = {
return filteredData.map((obj)=> {
return {id: obj['Country Name'], group: obj['Region']}
})
}
samegroup = {
const groups = new Map(nodes.map((d) => [d.id, d.group]));
return ({source, target}) => {
source = groups.get(source);
target = groups.get(target);
return source === target ? source : null;
};
}
Plot.plot({
height: 800,
marginLeft: 100,
axis: null,
x: { domain: [0, 1] },
color: { scheme: "tableau10" },
marks: [
Plot.dot(nodes, { x: 0, y: "id", fill: "group", sort: { y: "fill" } }),
Plot.text(nodes, { x: 0, y: "id", text: "id", dx: -6, textAnchor: "end", fill: "group" }),
Plot.arrow(links, {
x: 0,
y1: "source",
y2: "target",
sweep: "-y",
bend: 90,
stroke: samegroup,
sort: samegroup,
headLength: 0,
reverse: true
})
]
})
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.
