UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
// Load the data with `d3.csv()`
raw_data = d3.csv(
"https://raw.githubusercontent.com/owid/co2-data/master/owid-co2-data.csv"
)
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);
}
// 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
// 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
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
// Import the chart and the x scale with our series
import { chart, x, color } with {
co2_series as series
} from "@d3/stacked-bar-chart"
// Set the domain using the unique values of the year variable
x.domain(_.uniqBy(data_for_stack, d => d.name).map(d => d.name))
// Set the domain of the color scale
color.domain(top_10_countries)
// Show the chart!
chart
d3 = require("d3")
import { swatches } from "@d3/color-legend"
_ = require("lodash")
import {
data as d3_example_data,
chart as d3_chart,
key as d3_key
} from "@d3/stacked-bar-chart"
import { aq, op } from "@uwdata/arquero"
import {
code_styles,
table_styles,
render_data_table
} from "@uw-info474/utilities"
table_styles
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.
