Public
Edited
Feb 1
Insert cell
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
Insert cell
import {printTable} from "@uwdata/data-utilities"
Insert cell
Insert cell
Insert cell
populationData = census2.map(d => ({
Sex: d.Sex === "1" ? "Male" : "Female",
Year: +d.Year, // convert year form string to number
Age: +d.Age, // Keep age as a number
People: +d.People // Convert people count from sting to number
}))


Insert cell
vl.layer(
// Line chart with smooth interpolation
vl.markLine({ strokeWidth: 3, interpolate: "monotone" }) // Thick and smooth line
.data(populationData) // binds the data set
.encode(
vl.x()
.fieldQ("Age") // X axis
.title("Age Group") // Label of the X axis
.scale({ domain: [0, 90] }), // Only age ranges will be from this to this
vl.y()
.fieldQ("People") // Y axis
.title("Population") // Y axis title
.scale({ type: "log" }), // logarithmic scale
vl.color()
.fieldN("Year") // Colors will be encoded for different years
.scale({ domain: [1900, 2000], range: ["steelblue", "red"] }), // Year ranger and the color transit
vl.strokeDash(). // Different dash style for male to males
fieldN("Sex").title("Sex"),
vl.tooltip(["Age", "People", "Year", "Sex"]) // Display toolTip to help readers retrived from: https://vega.github.io/vega-lite/docs/tooltip.html
),

vl.markPoint({ size: 50 }) // Add data point markers
.data(populationData) // Binds the same ata set
.encode(
vl.x().fieldQ("Age"), // X axis
vl.y().fieldQ("People"), // Y axis
vl.color().fieldN("Year"), // Color ecoded by year
vl.shape().fieldN("Sex"), // Different shapes for male/female
vl.tooltip(["Age", "People", "Year", "Sex"]) // Tooltip on hover
)
)
.width(700) // Width
.height(450) // height
.title("How has the distribution of age groups changed from 1900 to 2000?") // My question
.render() // Reneders the visulization

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