Public
Edited
May 18
import {vl} from '@vega/vega-lite-api-v5'
FileAttachment("census2000-1.csv").csv()
data = await FileAttachment("census2000-1.csv").csv({typed: true})
data.slice(0, 5)
Object.keys(data[0])
pyramid = data.map(d => ({
Year: d.Year,
sex: d.Sex === 1 ? "Male" : "Female",
age: String(d.Age),
pop: d.People,
pop_display: d.Sex === 1 ? d.People : -d.People
}))
pyramid.slice(0, 5)
vl.tooltip([
{ field: "sex", type: "nominal", title: "Gender" },
{ field: "age", type: "ordinal", title: "Age Group" },
{ field: "population", type: "quantitative", title: "Population" }
])
pyramid.filter(d => d.Year === 1900).length
pyramid.filter(d => d.Year === 2000).length
vl.markBar()
.data(pyramid.filter(d => d.Year === 1900))
.encode(
vl.y().fieldO("age").sort("descending").axis({ title: "Age group" }),
vl.x().fieldQ("pop_display").axis({ title: "Population", format: "s" }),
vl.color().fieldN("sex").legend({ title: "Gender" }),
vl.tooltip([
{ field: "sex", type: "nominal", title: "Gender" },
{ field: "age", type: "ordinal", title: "Age group" },
{ field: "pop_display",type: "quantitative", title: "Population" }
])
)
.width(250)
.height(400)
.render();
vl
.markBar()
.data(pyramid)
.encode(
vl.y()
.fieldO("age")
.sort("descending")
.axis({ title: "Age group" }),
vl.x()
.fieldQ("pop_display")
.axis({ title: "Population", format: "s" }),
vl.color()
.fieldN("sex")
.legend({ title: "Gender" }),
vl.tooltip([
{ field: "sex", type: "nominal", title: "Gender" },
{ field: "age", type: "ordinal", title: "Age group" },
{ field: "pop", type: "quantitative", title: "Population" }
])
)
.width(250)
.height(400)
.facet({
column: {
field: "Year",
type: "nominal",
title: "Census year",
spacing: 30
}
})
.title("How has the age and gender distribution of the U.S. population changed between 1900 and 2000?")
.render()
vl.data(
pyramid.filter(d => d.Year === 1900 || d.Year === 2000)
)
.facet({
column: {
field: "Year",
type: "ordinal",
header: { title: "Census year", spacing: 30 }
}
})
.spec(
vl
.markBar()
.encode(
// age on the y-axis, descending so 0–4 at the bottom
vl
.y()
.fieldO("age")
.sort("descending")
.axis({ title: "Age group" }),
// population on the x-axis
vl
.x()
.fieldQ("pop_display")
.axis({ title: "Population", format: "s" }),
// color by gender
vl
.color()
.fieldN("sex")
.legend({ title: "Gender" }),
// tooltips for drill-down
vl.tooltip([
{ field: "sex", type: "nominal", title: "Gender" },
{ field: "age", type: "ordinal", title: "Age group" },
{ field: "pop_display", type: "quantitative", title: "Population" }
])
)
)
// give each facet its own x-scale
.resolve({ scale: { x: "independent" } })
// size of each small multiple
.width(250)
.height(400)
.render();
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.
