Public
Edited
Feb 3
import {vl} from "@vega/vega-lite-api-v5"
import {printTable} from "@uwdata/data-utilities"
US_Population = FileAttachment("census2000-1.csv").csv()
printTable(US_Population.slice(0,5))
male1900 = vl.markBar()
.title("Male")
.data(US_Population)
.transform(
vl.filter("datum.Year == 1900 && datum.Sex == 1"),
vl.calculate("datum.sex == 1 ? 'Male' : 'Female'").as("gender"),
vl.filter("isValid(datum.People)"),
vl.calculate("toNumber(-datum.People)").as("PeopleNumeric"),
vl.calculate("toNumber(datum.Age)", "AgeNumeric").as("AgeNumeric")
)
.encode(
vl.x()
.fieldQ("PeopleNumeric")
.aggregate("sum")
.scale({ domain: [-12000000, 0] })
.title("Population in Millions")
.axis({
format: "s"
}),
vl.y()
.fieldN('AgeNumeric')
.sort('descending')
.axis(null),
vl.color()
.value('skyblue'),
vl.tooltip([{ field: "People", title: "Population" }])
);
male2000 = vl.markBar()
.title("Male")
.data(US_Population)
.transform(
vl.filter("datum.Year == 2000 && datum.Sex == 1"),
vl.calculate("datum.sex == 1 ? 'Male' : 'Female'").as("gender"),
vl.filter("isValid(datum.People)"),
vl.calculate("toNumber(-datum.People)").as("PeopleNumeric"),
vl.calculate("toNumber(datum.Age)", "AgeNumeric").as("AgeNumeric")
)
.encode(
vl.x()
.fieldQ("PeopleNumeric")
.aggregate("sum")
.title("Population in Millions")
.axis({
format: "s"
}),
vl.y()
.fieldN('AgeNumeric')
.sort('descending')
.axis(null),
vl.color()
.value('steelblue'),
vl.tooltip([{ field: "People", title: "Population" }])
);
female1900 = vl.markBar()
.title("Female")
.data(US_Population)
.transform(
vl.filter("datum.Year == 1900 && datum.Sex == 2"),
vl.calculate("datum.sex == 1 ? 'Male' : 'Female'").as("gender"),
vl.calculate("toNumber(datum.Age)", "AgeNumeric").as("AgeNumeric")
)
.encode(
vl.x()
.fieldQ("People")
.aggregate("sum")
.scale({ domain: [0, 12000000] })
.title("Population in Millions")
.axis({
format: "s"
}),
vl.y()
.fieldN('AgeNumeric')
.sort('descending')
.axis({ticks: false,
labelPadding: 5})
.title(null),
vl.color()
.value('palevioletred'),
vl.tooltip([{ field: "People", title: "Population" }])
);
female2000 = vl.markBar()
.title("Female")
.data(US_Population)
.transform(
vl.filter("datum.Year == 2000 && datum.Sex == 2"),
vl.calculate("datum.sex == 1 ? 'Male' : 'Female'").as("gender"),
vl.calculate("toNumber(datum.Age)", "AgeNumeric").as("AgeNumeric")
)
.encode(
vl.x()
.fieldQ("People")
.aggregate("sum")
.title("Population in Millions")
.axis({
format: "s"
}),
vl.y()
.fieldN('AgeNumeric')
.sort('descending')
.axis({ticks: false,
labelPadding: 5})
.title(null),
vl.color()
.value('MediumVioletRed'),
vl.tooltip([{ field: "People", title: "Population" }])
);
pop1900 = vl.hconcat(male1900, female1900)
.title("US Population by Gender and Age (1900)")
.resolve({ axis: { x: "shared" } })
.spacing(3)
.config({
axis: {grid: false},
title: {
fontSize: 13,
anchor: "middle"
}
});
pop2000 = vl.hconcat(male2000, female2000)
.title("US Population by Gender and Age (2000)")
.resolve({ axis: { x: "shared" } })
.spacing(3)
.config({
axis: {grid: false},
title: {
fontSize: 13,
anchor: "middle"
}
});
vl.vconcat(pop1900, pop2000)
.title("A Comparison of Populations")
.config({
axis: {grid: false},
title: {
fontSize: 20,
anchor: "middle"
}
})
.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.
