Public
Edited
Feb 2
import {file} from "@observablehq/inputs"
d3 = require("d3")
data = FileAttachment("census2000-1.csv").csv()
processed = {
return data.map(d => ({
...d,
Gender: d.Sex == 1 ? "Male" : "Female",
Age_Group: d.Age == 90 ? `${d.Age}+` : `${d.Age}-${Number(d.Age) + 4}`,
Total: d3.sum(data.filter(x =>
x.Year === d.Year && x.Sex === d.Sex
), x => x.People),
Percentage: (d.People / d3.sum(data.filter(x =>
x.Year === d.Year && x.Sex === d.Sex
), x => x.People)) * (d.Sex == 1 ? -1 : 1)
}));
}
data1900 = processed.filter(d => d.Year === "1900")
data2000 = processed.filter(d => d.Year === "2000")
chart1900 = vl.markBar()
.data(data1900)
.encode(
vl.x().fieldQ("Percentage")
.axis({ title: "Population %", format: ".1%", labelExpr: "abs(datum.value) * 100 + '%'" })
.scale({domain: [-0.13, 0.13]}),
vl.y().fieldN("Age_Group")
.axis({ title: "Age Group" })
.sort({ field: "Age", order: "descending" }),
vl.color().fieldN("Gender")
)
.width(200)
.height(400)
.title("Population Pyramid 1900")
chart2000 = vl.markBar()
.data(data2000)
.encode(
vl.x().fieldQ("Percentage")
.axis({ title: "Population %", format: ".1%", labelExpr: "abs(datum.value) * 100 + '%'" })
.scale({domain: [-0.13, 0.13]}),
vl.y().fieldN("Age_Group")
.axis({ title: "Age Group" })
.sort({ field: "Age", order: "descending" }),
vl.color().fieldN("Gender")
)
.width(200)
.height(400)
.title("Population Pyramid 2000")
vl.hconcat(chart1900, chart2000).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.
