Public
Edited
Jun 2
Insert cell
Insert cell
import {vl} from "@vega/vega-lite-api-v5"
Insert cell
data = FileAttachment("census2000-1.csv").csv()
Insert cell
Insert cell
vl.markPoint({filled: true})
.data(data)
.encode(
vl.x().fieldQ('Age').title("Age Group"),
vl.y().fieldQ('People').title("Count (Millions)").axis({format: '~s'}),
vl.shape().fieldN('Sex').legend({title: "Sex"}),
vl.color().fieldN('Year'),
vl.opacity().value(.7),
vl.size().value(50)
)
.width(600)
.title("U.S. Population in 1900 and 2000")

.render()
Insert cell
Insert cell
vl.markBar({binSpacing: 5})
.data(data)
.encode(
vl.x().fieldN('Age').title("Age Group").sort([
0, 5, 10]), // put age group 5 in the correct order
vl.y().fieldQ('People').title("Count (Millions)").axis({format: '~s'}),
vl.color().fieldN('Sex').legend({title: "Sex"}),
vl.column().fieldN('Year').title("Year")
)
.width(600)
.title("U.S. Population by Age, Sex, and Year")
.render()
Insert cell
Insert cell
Insert cell
vl.markPoint({filled: true})
.data(data)
.encode(
vl.x().fieldQ('Age').title("Age Group"),
vl.y().fieldQ('People').title("Count (Millions)").axis({format: '~s'}),
vl.color().fieldN('Sex').legend({title: "Sex"}).scale({
range: ['#fc89ff', '#4a90e2'] // assign pink and blue to female and male respectively
}),
vl.shape().fieldN('Year'), // represent year by shape instead of color
vl.opacity().value(.7),
vl.size().value(50)
)
.width(600)
.title("U.S. Population in 1900 and 2000")

.render()
Insert cell
Insert cell
Insert cell
viewof sexFilter = Inputs.select(
[...new Set(data.map(d => d.Sex))],
{label: "Filter by Sex"}
)
Insert cell
vl.markPoint({filled: true})
.data(data.filter(d => d.Sex === sexFilter))
.encode(
vl.x().fieldQ('Age').title("Age Group"),
vl.y().fieldQ('People').title("Count (Millions)").axis({format: '~s'}),
vl.color().fieldN('Year'), // year as color since we are filtering by sex
vl.opacity().value(.7),
vl.size().value(50)
)
.width(600)
.title(`U.S. ${sexFilter} Population in 1900 and 2000`) // change title according to what sex was chosen

.render()
Insert cell
Insert cell
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