Public
Edited
Jan 18, 2024
Fork of Untitled
Insert cell
Insert cell
emissions_raw = FileAttachment("owid-co2-data (1).csv").csv()
Insert cell
countries = FileAttachment("countries.csv").csv()
Insert cell
ue_world = {
const filteredCountries = countries.filter(country => country.UE === 'Yes');

return filteredCountries;
}
Insert cell
emissions_ue_world = {
const countries_ue = countries.filter(country => country.UE === 'Yes').map(item => item.country)
countries_ue.push('World')
countries_ue.push('Asia')
countries_ue.push('Africa')
countries_ue.push('North America');

const filtered_emissions = emissions_raw
.filter(item => countries_ue.includes(item.country))
.map(item => ({
...item,
co2: parseFloat(item.co2) // Convert 'co2' to decimal
}));

const filtered_emissions2 = filtered_emissions
.filter(d => d.year >= 1950)
.filter(d => d.year <= 2000)

return filtered_emissions2
}
Insert cell
emissions_ue_world
select * from
(select t1.year,t2.co2 - t1.co2 as co2, t1.region,'Rest of the World' as country from
(SELECT year,sum(co2) as co2,'Rest of the World'as region
FROM "emissions_ue_world"
where country <> 'World'
group by year)t1
left join
(SELECT year,sum(co2) as co2,'World'as region
FROM "emissions_ue_world"
where country = 'World'
group by year)t2
on t1.year = t2.year
union all
select year, co2, case when country <> 'World'
and country <> 'Asia'
and country <> 'Africa'
and country <> 'North America'
then 'European Union'
else country end as region, country
FROM "emissions_ue_world"
where country <> 'World');
Insert cell
emissions_ue_world_formatted
select t1.*, case when coalesce(t2.order_eu,0) <21 then '' else t1.country end as country_formatted,
coalesce(t2.order_eu,0) as order_eu,t3.order_region from
(select * from "emissions_ue_world_formatted")t1
left join
(select country, row_number() over (order by sum(co2) asc) as order_eu from "emissions_ue_world_formatted"
where region = 'European Union'
group by country)t2
on t1.country = t2.country
left join
(select region, row_number() over (order by sum(co2) asc) as order_region from "emissions_ue_world_formatted"
group by region)t3
on t1.region = t3.region
order by year asc,order_region desc,order_eu asc
Insert cell
emissions_ue_world_sorted
select year,region,sum(co2) as co2,min(order_region) as order_region from emissions_ue_world_sorted
group by year,region
order by year asc,order_region asc
Insert cell
miniPlots2 = html`
<div>
<div style="display: flex">
<div>${[AreaChart_1(),AreaChart_2()]}</div>
</div>`
Insert cell
Insert cell
Insert cell
Plot.plot({
title: "CO2 Emissions between 1950 and 2000 ",
color: { legend: false, scheme: "PuRd" , type: "categorical",className:"Region"},
x: { type: "linear" },
y: {},
marks: [
Plot.areaY(emissions_regions_groupped,
{x: "year", y: "co2",z:"region" ,fill: "order_region",order:"order_region",
tip: {format: {x:true,y:true,z:true,fill:false,order:false}}}),
Plot.ruleY([0]),
Plot.tip(
[`EU 1990 Emissions`],
{x: 1990, y: 4500})
]
})
Insert cell
Plot.plot({
title: "CO2 Emissions between 1950 and 2000 ",
color: { legend: false, scheme: "PuRd" , type: "categorical",className:"Region"},
x: { type: "linear" },
y: {},
marks: [
Plot.areaY(emissions_regions_groupped,
{x: "year", y: "co2",z:"region" ,fill: "order_region",order:"order_region",
tip: {format: {x:true,y:true,z:true,fill:false,order:false}}}),
Plot.ruleY([0]),
Plot.tip(
[`EU 1990 Emissions`],
{x: 1990, y: 4500}),
Plot.text(
emissions_regions_groupped,
Plot.selectLast(
Plot.stackY({filter: (d) => d.year < 1998,
x: "year", y: "co2",z:"region" ,fill: "order_region",order:"order_region",
text:"region",
dx: -17,
fill: "#000"
}))
)
]
})
Insert cell
Plot.plot({
title: "CO2 Emissions between 1950 and 2000 for countries in EU",
color: { legend: false, scheme: "PuRd" , type: "categorical",className:"Region"},
x: { type: "linear" },
y: {},
marks: [
Plot.areaY(emissions_ue_world_sorted.filter(d => d.region === 'European Union'),
{x: "year", y: "co2",z:"country" ,fill: "order_eu",order:"-order_eu",
tip: {format: {x:true,y:true,z:true,fill:false,stroke:false}}}),
Plot.ruleY([0]),
Plot.text(
emissions_ue_world_sorted.filter(d => d.region === 'European Union'),
Plot.selectLast(
Plot.stackY({filter: (d) => (d.year < 1998),
x: "year", y: "co2",z:"country" ,fill: "order_eu",order:"-order_eu",
text:"country_formatted",
dx: -17,
fill: "#FFF"
}))
)
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
miniPlots = html`
<div>
<div style="display: flex">
<div>${[barChart_1(), barChart_3()]}</div>
<div>${[barChart_2(), barChart_4()]}</div>
</div>`
Insert cell
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof dashboard = {
const crimeBarChart = vl.markBar()
.encode(
vl.x().fieldN("year").title("Year"),
vl.y().sum("total_ghg").title("Total GHG Emissions")
);

const crimeBarChartLayer = vl.layer(
crimeBarChart.params(emissions_ue_single_country_percentage).encode(vl.color().value('lightgrey')),
crimeBarChart.transform(vl.filter(emissions_ue_single_country_percentage))
)
.title("Emissions by Year")
.data(emissions_ue_single_country_percentage)
.width(width * 0.4)
.height(200);
}

Insert cell

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.
Learn more