data = FileAttachment("us-population-state-age.csv")
.csv({ typed: true })
Inputs.table(data)
Plot.plot({
marks: [Plot.barY(data, { x: "name", y: "20-29" })]
})
Plot.plot({
width: 1200,
marginLeft: 80,
y: {
transform: (d) => d / 1_000_000
},
marks: [Plot.barY(data, { x: "name", y: "20-29" })]
})
Plot.plot({
marks: [
Plot.barY(data, { x: "name", y: "20-29" })
]
})
// ... your code here
Plot.plot({
width: 1200,
marginLeft: 80,
x: {
label: "State"
},
y: {
label: "↑Million People",
transform: (d) => d / 1_000_000
},
marks: [Plot.barY(data, { x: "name", y: "20-29" })]
})
Plot.plot({
width: 1200,
marginLeft: 80,
x: {
label: "State"
},
y: {
label: "↑Million People",
transform: (d) => d / 1_000_000
},
marks: [
Plot.barY(data, { x: "name", y: "20-29", sort: { x: "y", reverse: true } })
]
})
Plot.plot({
width: 1200,
marginLeft: 80,
x: {
label: "State"
},
y: {
label: "↑Million People",
transform: (d) => d / 1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: "20-29",
sort: { x: "y", reverse: true },
fill: "goldenrod"
})
]
})
Plot.plot({
width: 1200,
marginLeft: 80,
x: {
label: "State"
},
y: {
label: "↑Million People",
transform: (d) => d / 1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: "20-29",
sort: { x: "y", reverse: true },
fill: (d) => (d["20-29"] > 1_200_000 ? "salmon" : "dodgerblue")
})
]
})
Plot.plot({
width: 1200,
marginLeft: 80,
x: {
label: "State"
},
y: {
label: "↑Million People",
transform: (d) => d / 1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: "20-29",
sort: { x: "y", reverse: true },
fill: (d) => (d["name"] === "VA" ? "salmon" : "dodgerblue")
})
]
})
Inputs.table(data)
ageRangeToFocus = "<10"
Plot.plot({
width: 1200,
marginLeft: 80,
x: {
label: "State"
},
y: {
label: "↑Million People",
transform: (d) => d / 1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: ageRangeToFocus,
sort: { x: "y", reverse: true },
fill: (d) => (d["name"] === "VA" ? "salmon" : "dodgerblue")
})
]
})
ageRange
viewof ageRange = Inputs.select(
["<10", "10-19", "20-29", "30-39", "40-49", "50-59", "60-69", "70-79", "≥80"],
{ label: "Select an age range" }
)
Plot.plot({
width: 1200,
marginLeft: 80,
x: {
label: "State"
},
y: {
label: "↑Million People",
transform: (d) => d / 1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: ageRange,
sort: { x: "y", reverse: true },
fill: (d) => (d["name"] === "VA" ? "salmon" : "dodgerblue")
})
]
})
viewof sort_toggle = Inputs.toggle({
label: "Sort States by Magnitude",
value: true
})
Plot.plot({
width: 1200,
marginLeft: 80,
x: {
label: "State"
},
y: {
label: "↑Million People",
transform: (d) => d / 1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: ageRange,
sort: sort_toggle ? { x: "y", reverse: true } : "",
fill: (d) => (d["name"] === "VA" ? "salmon" : "dodgerblue")
})
]
})
import {toc} from "@nebrius/indented-toc"
import {imageToDo} from "@clokman/student-blocks"
imageToDo
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.
