viewof country = Inputs.select(Object.keys(emissions), {
label: "Pick a country"
})
Plot.line(emissionsCountry, {
y: "co2_per_capita",
x: "year",
tip: true
}).plot()
european_countries = [
"Albania", "Andorra", "Armenia", "Austria", "Azerbaijan",
"Belarus", "Belgium", "Bosnia and Herzegovina", "Bulgaria",
"Croatia", "Cyprus", "Czechia", "Denmark", "Estonia",
"Finland", "France", "Georgia", "Germany", "Greece",
"Hungary", "Iceland", "Ireland", "Italy", "Kazakhstan",
"Kosovo", "Latvia", "Liechtenstein", "Lithuania",
"Luxembourg", "Malta", "Moldova", "Monaco", "Montenegro",
"Netherlands", "North Macedonia", "Norway", "Poland",
"Portugal", "Romania", "Russia", "San Marino", "Serbia",
"Slovakia", "Slovenia", "Spain", "Sweden", "Switzerland",
"Turkey", "Ukraine", "United Kingdom", "Vatican"
];
european_co2 = {
const co2_list = {};
european_countries.forEach(european_country => {
if (emissions[european_country] !== undefined) {
co2_list[european_country] = emissions[european_country].data;
}
})
return co2_list;
}
european_countries_co2 = {
const co2_list = [];
european_countries.forEach(european_country => {
if (emissions[european_country] !== undefined) {
co2_list.push({"country": european_country, "data": emissions[european_country].data});
}
})
return co2_list;
}
country_co2 = european_co2[countrySelected];
country_co2
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof countrySelected = Inputs.select(Object.keys(european_co2), {
label: "Pick a country"
})
Plot.plot({
color: {
scheme: "rdpu",
legend: true
},
marks: [
Plot.frame(),
Plot.dot(country_co2, {
x: "year",
y: "population",
stroke: "co2",
z: null,
tip: true
})
]
})
// Function to get total of co2_filter of every european country between 2019 to 2020
function get_total_co2_country(european_co2, field) {
const country_total_co2 = {};
Object.keys(european_co2).forEach(function(country_name) {
if (!country_total_co2[country_name]) {
country_total_co2[country_name] = 0;
}
european_co2[country_name].filter(d => d.year > 2018 && d.year <= 2022).forEach(data => {
if (data[field]) {
country_total_co2[country_name] += data[field];
}
})
});
return Object.entries(country_total_co2).map(([name, totalCO2]) => ({ name, totalCO2 }));
}
// Function to get all data of every european country
function get_country_data(country_name) {
const co2_list = [];
european_co2[country_name].forEach(data => {
data["country"] = country_name;
co2_list.push(data);
});
return co2_list;
}
co2_fields = [
"co2", "co2_per_capita", "coal_co2", "coal_co2_per_capita", "cumulative_co2", "cumulative_coal_co2", "cumulative_flaring_co2", "cumulative_gas_co2", "cumulative_oil_co2", "flaring_co2", "flaring_co2_per_capita", "gas_co2", "gas_co2_per_capita", "oil_co2", "oil_co2_per_capita", "share_global_co2", "share_global_coal_co2", "share_global_cumulative_co2", "share_global_cumulative_coal_co2"
].reduce((a, v) => ({ ...a, [v]: v}), {})
european_total_co2_country = get_total_co2_country(european_co2, co2_filter);
most_european_total_co2_country = european_total_co2_country.sort((a, b) => b.totalCO2 - a.totalCO2);
most_european_total_co2_country_data = get_country_data(most_european_total_co2_country[0].name).concat(get_country_data(most_european_total_co2_country[1].name)).concat(get_country_data(most_european_total_co2_country[2].name)).concat(get_country_data(most_european_total_co2_country[3].name)).concat(get_country_data(most_european_total_co2_country[4].name)).concat(get_country_data(most_european_total_co2_country[5].name)).concat(get_country_data(most_european_total_co2_country[6].name)).concat(get_country_data(most_european_total_co2_country[7].name)).concat(get_country_data(most_european_total_co2_country[8].name)).concat(get_country_data(most_european_total_co2_country[9].name));
most_european_total_co2_country_top5 = most_european_total_co2_country[0].name + " with " + most_european_total_co2_country[0].totalCO2 + ", " + most_european_total_co2_country[1].name + " with " + most_european_total_co2_country[1].totalCO2 + ", " + most_european_total_co2_country[2].name + " with " + most_european_total_co2_country[2].totalCO2 + ", " + most_european_total_co2_country[3].name + " with " + most_european_total_co2_country[3].totalCO2 + " and " + most_european_total_co2_country[4].name + " with " + most_european_total_co2_country[4].totalCO2
viewof co2_filter = Inputs.select(Object.keys(co2_fields), {
label: "Pick a co2 filter:"
})
Plot.plot({
width: width,
inset: 10,
color: {
legend: true,
scheme: "ylorrd",
},
y: {
grid: true,
},
marks: [
Plot.frame(),
Plot.areaY(most_european_total_co2_country_data.filter(d => d.year > 2018 && d.year <= 2022), {
x: "year",
y: co2_filter,
fx: "country",
stroke: "population",
z: null,
fill: "population",
sort: {fx: "-y"}
}),
Plot.line(most_european_total_co2_country_data.filter(d => d.year > 2018 && d.year <= 2022), {x: "year", y: co2_filter, fx: "country", marker: true, tip: true}),
]
})
european_countries_co2_data = {
let data_list = [];
european_countries.forEach(country_name => {
data_list = data_list.concat(get_country_data(country_name).filter(d => d.year >= 2018 && d.year <= 2022));
})
return data_list;
}
least_european_total_co2_country = european_total_co2_country.sort((a, b) => a.totalCO2 - b.totalCO2);
Plot.plot({
width: width,
y: {
grid: true,
inset: 6
},
fx: {
interval: 0.5,
label: "Carats",
labelAnchor: "right",
tickFormat: (x) => x.toFixed(1)
},
marks: [
Plot.frame(),
Plot.boxX(european_countries_co2_data, {x: "co2", y: "country", sort: {y: "x"}})
]
})
european_total_population_country = get_total_co2_country(european_co2, "population");
most_european_total_population_country = european_total_population_country.sort((a, b) => b.totalCO2 - a.totalCO2);
most_european_total_population_country_data = get_country_data(most_european_total_population_country[0].name).concat(get_country_data(most_european_total_population_country[1].name)).concat(get_country_data(most_european_total_population_country[2].name)).concat(get_country_data(most_european_total_population_country[3].name)).concat(get_country_data(most_european_total_population_country[4].name)).concat(get_country_data(most_european_total_population_country[5].name)).concat(get_country_data(most_european_total_population_country[6].name)).concat(get_country_data(most_european_total_population_country[7].name)).concat(get_country_data(most_european_total_population_country[8].name)).concat(get_country_data(most_european_total_population_country[9].name));
co2_list = ["co2", "co2_per_capita", "coal_co2", "coal_co2_per_capita", "cumulative_co2", "cumulative_coal_co2", "cumulative_flaring_co2"];
Plot.plot({
height: 800,
marginRight: 90,
marginLeft: 110,
grid: true,
x: {nice: true},
y: {inset: 5},
color: {type: "categorical"},
marks: [
Plot.frame(),
Plot.dot(most_european_total_population_country_data.filter(d => d.year >= 2018 && d.year <= 2022), {
x: "country",
y: co2_list,
fy: co2_list,
stroke: "population",
sort: {y: "x"}
})
]
})
viewof year = Inputs.range([2019, 2022], {value: 2019, step: 1, label: "Select year"});
co2_fields_all = {
const co2_set = new Set();
european_countries_co2.forEach(object => {
object.data.forEach(dict => {
Object.keys(dict).forEach(key => {
if (key.includes("co2")) {
co2_set.add(key);
}
})
});
});
return Array.from(co2_set).sort().reduce((a, v) => ({ ...a, [v]: v}), {})
}
function corr(x, y) {
const n = x.length;
if (y.length !== n)
throw new Error("The two columns must have the same length.");
const x_ = d3.mean(x);
const y_ = d3.mean(y);
const XY = d3.sum(x, (_, i) => (x[i] - x_) * (y[i] - y_));
const XX = d3.sum(x, (d) => (d - x_) ** 2);
const YY = d3.sum(y, (d) => (d - y_) ** 2);
return XY / Math.sqrt(XX * YY);
}
correlations = d3.cross(fields, fields).map(([a, b]) => ({
a,
b,
correlation: corr(Plot.valueof(country_co2_data, a), Plot.valueof(country_co2_data, b))
}))
country_co2_data = european_co2[country_input];
co2_fields_country = {
const co2_set = new Set();
country_co2_data.forEach(object => {
Object.keys(object).forEach(key => {
const value = object[key];
if (!isNaN(value) && typeof value === 'number' && value !== 0) {
co2_set.add(key);
} else {
console.log('Invalid key', key, value);
}
});
});
return Array.from(co2_set)
}
fields_checkbox = {
if (all_fields) {
return co2_fields_country;
}
else {
return co2_fields_country.splice(0,19);
}
}
viewof fields = Inputs.checkbox(fields_checkbox, {
label: "Select fields:",
value: co2_fields_country
})
Plot.plot({
width: width,
marginLeft: 100,
label: null,
color: { scheme: "rdylbu", pivot: 0, legend: true, label: "correlation" },
marks: [
Plot.cell(correlations, { x: "a", y: "b", fill: "correlation" }),
Plot.text(correlations, {
x: "a",
y: "b",
text: (d) => d.correlation.toFixed(2),
fill: (d) => (Math.abs(d.correlation) > 0.6 ? "white" : "black")
})
]
})
Plot.plot({
width: 1250,
marks: [
Plot.ruleY([0]),
Plot.barY(most_european_total_co2_country_data.filter(d => d.year > 2018 && d.year <= 2022), {
x: "year",
y: "co2",
fx: "country",
stroke: "population",
sort: {x: "x", fx: "-y"}}),
]
})
Plot.plot({
y: {
grid: true,
},
marks: [
Plot.ruleY([0]),
Plot.lineY(european_countries_co2_data, {x: "year", y: co2_filter_fields, z: "country", stroke: "population", marker: true, tip: true})
]
})
Plot.plot({
width: 1000,
y: {
grid: true,
},
color: { scheme: "Viridis", legend: true },
marks: [
Plot.areaY(
european_countries_co2_data,
Plot.stackY(
{ order, reverse },
{ x: "year", y: co2_filter_fields, z: "country", fill: "population", tip: true}
)
),
Plot.ruleY([0]),
]
})
function get_total_co2_field_year(field, year) {
let total = 0;
european_countries_co2_data.filter(d => d.year == year).forEach(element => {
if (element[field]) {
total += element[field];
}
});
return total;
}
co2_field_total_2020 = Math.round((get_total_co2_field_year(co2_filter_fields, 2020) + Number.EPSILON) * 100) / 100;
co2_field_total_2021 = Math.round((get_total_co2_field_year(co2_filter_fields, 2021) + Number.EPSILON) * 100) / 100;
co2_field_total_2022 = Math.round((get_total_co2_field_year(co2_filter_fields, 2022) + Number.EPSILON) * 100) / 100;
viewof order = Inputs.select(
new Map([
["null", null],
["appearance", "appearance"],
["inside-out", "inside-out"],
["sum", "sum"],
["group", "group"],
["z", "z"]
]),
{ label: "order", value: "null" }
)
viewof reverse = Inputs.toggle({label: "reverse"})
viewof co2_filter_fields = Inputs.select(Object.keys(co2_fields), {
value: "co2",
label: "Pick a field:"
})
Plot.plot({
width,
height: 600,
y: { percent: true },
color: { type: "ordinal", scheme: "Viridis"},
marks: [
Plot.areaY(
european_countries_co2_data,
Plot.stackY({
x: "year",
y: co2_filter_fields,
z: "country",
fill: "population",
order: order,
reverse: reverse,
stroke: "#fff",
strokeOpacity: 0.3,
offset: "expand",
curve: "monotone-x",
tip: true
})
),
Plot.tip(
[`Total: ${co2_field_total_2020}`],
{x: 2019, dy: -255, anchor: "bottom"}
),
Plot.tip(
[`Total: ${co2_field_total_2021}`],
{x: 2020, dy: -255, anchor: "bottom"}
),
Plot.tip(
[`Total: ${co2_field_total_2022}`],
{x: 2021, dy: -255, anchor: "bottom"}
),
]
})
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.
