Published
Edited
Feb 3, 2021
6 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Load the data with `d3.csv()`
raw_data = d3.csv(
"https://raw.githubusercontent.com/owid/co2-data/master/owid-co2-data.csv"
)
Insert cell
Insert cell
Insert cell
top_10_countries = {
// Get the most recent year
const max_year = d3.max(raw_data, d => d.year);

// Return the names of the 10 countries with the highest co2 emissions in the most recent year
return raw_data
.filter(d => d.year == max_year) // only look at the most recent year
.filter(d => d.iso_code !== "" && d.iso_code !== "OWID_WRL") // only keep countries (not regions)
.sort((a, b) => b.co2 - a.co2) // sort by co2 value
.filter((d, i) => i < 10) // only return top 10 countries
.map(d => d.country);
}
Insert cell
// Filter down the data to the top 10 countries
filtered_data = raw_data
.filter(d => top_10_countries.includes(d.country)) // only keep the top 10 countries from most recent year
.filter(d => +d.year > 2000) // start in 2000
.map(d => ({ country: d.country, name: +d.year, co2: +d.co2 })) // only return columns of interest
Insert cell
Insert cell
Insert cell
// Resturcture data with one object for each date (with keys for each state)
data_for_stack = aq
.from(filtered_data) // create an arquero table from the data
.groupby('name') // group by year
.pivot("country", "co2") // create a "column" for each country, populated with co2 values
.objects() // return JavaScript objects
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
co2_series = d3
.stack()
// create a layer for each country
.keys(top_10_countries)(data_for_stack) // apply that function to your data
.map(d => (d.forEach(v => (v.key = d.key)), d)) // iterate through the data and set the key
Insert cell
Insert cell
Insert cell
// Import the chart and the x scale with our series
import { chart, x, color } with {
co2_series as series
} from "@d3/stacked-bar-chart"
Insert cell
// Set the domain using the unique values of the year variable
x.domain(_.uniqBy(data_for_stack, d => d.name).map(d => d.name))
Insert cell
// Set the domain of the color scale
color.domain(top_10_countries)
Insert cell
Insert cell
// Show the chart!
chart
Insert cell
Insert cell
d3 = require("d3")
Insert cell
import { swatches } from "@d3/color-legend"
Insert cell
_ = require("lodash")
Insert cell
import {
data as d3_example_data,
chart as d3_chart,
key as d3_key
} from "@d3/stacked-bar-chart"
Insert cell
import { aq, op } from "@uwdata/arquero"
Insert cell
import {
code_styles,
table_styles,
render_data_table
} from "@uw-info474/utilities"
Insert cell
table_styles
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more