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: 1000,
marginLeft: 80,
y: {
transform: d => d/1_000_000
},
marks: [
Plot.barY(data, {x: "name", y: "20-29"})
]
})
Plot.plot({
width: 1000,
marks: [
Plot.barY(data, {x: "name", y: "20-29"})
]
})
Plot.plot({
width: 1000,
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: 1000,
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: 1000,
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: "gold"
})
]
})
Plot.plot({
width: 1000,
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: 1000,
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" ? "red" : "dodgerblue"
})
]
})
Inputs.table(data)
ageRangeToFocus = "≥80"
Plot.plot({
width: 1000,
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" ? "red" : "dodgerblue"
})
]
})
viewof ageRange_dropdown = Inputs.select(['<10', '10-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '≥80'], {label: "Select an age range"})
ageRange_dropdown
Plot.plot({
width: 1000,
marginLeft: 80,
x: {
label: "State"
},
y: {
label: "↑ Million people",
transform: (d) => d / 1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: ageRange_dropdown,
sort: { x: "y", reverse: true },
fill: d => d["name"] === "VA" ? "red" : "dodgerblue"
})
]
})
viewof sort_toggle = Inputs.toggle({label: "Sort States by Magnitude", value: true})
Plot.plot({
width: 1000,
marginLeft: 80,
x: {
label: "State"
},
y: {
label: "↑ Million people",
transform: (d) => d / 1_000_000
},
marks: [
Plot.barY(data, {
x: "name",
y: ageRange_dropdown,
sort: sort_toggle ? { x: "y", reverse: true }:"" ,
fill: d => d["name"] === "VA" ? "red" : "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.
