Public
Edited
Feb 3
Insert cell
Insert cell
import {vl} from "@vega/vega-lite-api-v5"
Insert cell
censusData = FileAttachment("census2000-1.csv").csv();
Insert cell
transformedData = censusData.map(d => ({
Age: +d.Age,
Year: "Year " + +d.Year,
Gender: d.Sex === "1" ? "Male" : "Female",
People: d.Sex === "1" ? -d.People : +d.People
}));
Insert cell
vl.markBar()
.data(transformedData)
.encode(
vl.y().fieldO("Age").title("Age (years)")
.sort("descending"),
vl.x().fieldQ("People").title("Population (thousands)"),
vl.color().fieldN("Gender")
.scale({
domain: ["Male", "Female"],
range: ["#6495ED", "pink"]
}),
vl.column().fieldN("Year").title("How Did the U.S. Population Age Distribution Shift Over a Century?")
)
.resolve({ scale: { x: "independent" } })
.width(300)
.height(500)
.render();
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