Public
Edited
May 18
import {vl} from "@vega/vega-lite-api-v5"
import {printTable} from "@uwdata/data-utilities"
data = FileAttachment("population_data.csv").csv()
printTable(data.slice(0, 5))
vl.markBar()
.data({values: data})
.transform(
vl.filter("datum.Age >= 65"),
vl.groupby("Year", "Sex").aggregate(
vl.sum("People").as("SumPeople")
),
vl.joinaggregate(
vl.sum("SumPeople").as("YearElderly")
).groupby("Year"), // total number of elderly people for each year
vl.calculate("datum.SumPeople / datum.YearElderly * 100").as("Percent"),
vl.calculate("datum.Sex == 1 ? 'Male' : 'Female'").as("SexName")
)
.encode(
vl.y().fieldN("Year").axis({title: "Year"}),
vl.x().fieldQ("Percent").stack("normalize").axis({title: "Percent of Elderly (>= 65) Population"}),
vl.color().fieldN("SexName").scale({range: ["#F4C2C2", "#AEC6CF"]}),
vl.tooltip(["Year", "SexName", "Percent"])
)
.width(400)
.height(150)
.render()
vl.layer(
vl.markBar()
.data({values: data})
.transform(
vl.filter("datum.Age >= 65"),
vl.groupby("Year", "Sex").aggregate(
vl.sum("People").as("SumPeople")
),
vl.joinaggregate(
vl.sum("SumPeople").as("YearElderly")
).groupby("Year"), // total number of elderly people for each year
vl.calculate("datum.SumPeople / datum.YearElderly * 100").as("Percent"),
vl.calculate("datum.Sex == 1 ? 'Male' : 'Female'").as("SexName")
)
.encode(
vl.y().fieldN("Year").axis({title: "Year"}),
vl.x().fieldQ("Percent").stack("normalize").axis({title: "Percent of Elderly (>= 65) Population"}),
vl.color().fieldN("SexName").scale({range: ["#F4C2C2", "#AEC6CF"]}),
vl.tooltip(["Year", "SexName", "Percent"])
)
.width(400)
.height(150),
vl.markText()
.data({values: data})
.transform(
vl.filter("datum.Age >= 65"),
vl.groupby("Year", "Sex").aggregate(
vl.sum("People").as("SumPeople")
),
vl.joinaggregate(
vl.sum("SumPeople").as("YearElderly")
).groupby("Year"),
vl.calculate("datum.SumPeople / datum.YearElderly * 100").as("Percent"),
vl.calculate("datum.Sex == 1 ? 'Male' : 'Female'").as("SexName")
)
.encode(
vl.x().fieldQ("Percent").stack("normalize"),
vl.y().fieldN("Year"),
vl.text().fieldQ("Percent").format(".1f"),
vl.color().value("black"),
vl.size().value(16)
)
.width(400)
.height(150)
)
.render()
vl.layer(
vl.markBar()
.data({values: data})
.transform(
vl.filter("datum.Age >= 65"),
vl.groupby("Year", "Sex").aggregate(
vl.sum("People").as("SumPeople")
),
vl.joinaggregate(
vl.sum("SumPeople").as("YearElderly")
).groupby("Year"), // total number of elderly people for each year
vl.calculate("datum.SumPeople / datum.YearElderly * 100").as("Percent"),
vl.calculate("datum.Sex == 1 ? 'Male' : 'Female'").as("SexName")
)
.encode(
vl.y().fieldN("Year").axis({title: "Year"}),
vl.x().fieldQ("Percent").stack("normalize").axis({title: "Percent of Elderly (>= 65) Population"}),
vl.color().fieldN("SexName").scale({range: ["#F4C2C2", "#AEC6CF"]}),
vl.tooltip(["Year", "SexName", "Percent"])
)
.width(400)
.height(150),
vl.markText({dx: -75})
.data({values: data})
.transform(
vl.filter("datum.Age >= 65"),
vl.groupby("Year", "Sex").aggregate(
vl.sum("People").as("SumPeople")
),
vl.joinaggregate(
vl.sum("SumPeople").as("YearElderly")
).groupby("Year"),
vl.calculate("datum.SumPeople / datum.YearElderly * 100").as("Percent"),
vl.calculate("datum.Sex == 1 ? 'Male' : 'Female'").as("SexName")
)
.encode(
vl.x().fieldQ("Percent").stack("normalize"),
vl.y().fieldN("Year"),
vl.text().fieldQ("Percent").format(".1f"),
vl.color().value("black"),
vl.size().value(16)
)
.width(400)
.height(150)
)
.render()
vl.layer(
vl.markBar()
.data({values: data})
.transform(
vl.filter("datum.Age >= 65"),
vl.groupby("Year", "Sex").aggregate(
vl.sum("People").as("SumPeople")
),
vl.joinaggregate(
vl.sum("SumPeople").as("YearElderly")
).groupby("Year"), // total number of elderly people for each year
vl.calculate("datum.SumPeople / datum.YearElderly * 100").as("Percent"),
vl.calculate("datum.Sex == 1 ? 'Male' : 'Female'").as("SexName")
)
.encode(
vl.y().fieldN("Year").axis({title: "Year"}),
vl.x().fieldQ("Percent").stack("normalize").axis({title: "Percent of Elderly (>= 65) Population"}),
vl.color().fieldN("SexName").scale({range: ["#F4C2C2", "#AEC6CF"]}),
vl.tooltip(["Year", "SexName", "Percent"])
)
.width(400)
.height(150),
vl.markText({dx: -75})
.data({values: data})
.transform(
vl.filter("datum.Age >= 65"),
vl.groupby("Year", "Sex").aggregate(
vl.sum("People").as("SumPeople")
),
vl.joinaggregate(
vl.sum("SumPeople").as("YearElderly")
).groupby("Year"),
vl.calculate("datum.SumPeople / datum.YearElderly * 100").as("Percent"),
vl.calculate("datum.Sex == 1 ? 'Male' : 'Female'").as("SexName"),
vl.calculate("format(datum.Percent, '.1f') + '%'").as("PercentLabel")
)
.encode(
vl.x().fieldQ("Percent").stack("normalize"),
vl.y().fieldN("Year"),
vl.text().fieldN("PercentLabel"),
vl.color().value("black"),
vl.size().value(16)
)
.width(400)
.height(150)
)
.title("How has the percentage of elderly (65+) males and females changed from 1900 to 2000?")
.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.
