data = FileAttachment("us-population-state-age.csv").csv()
Inputs.table(data)
Plot.plot({
marks: [Plot.barY(data, { x: "name", y: "20-29" }), Plot.ruleY([0])]
})
Plot.plot({
width: 1000,
marks: [Plot.barY(data, { x: "name", y: "20-29" }), Plot.ruleY([0])] // x axis at y=0
})
Plot.plot({
width: 1000,
marginLeft: 100,
marks: [
Plot.barY(data, {
x: "name",
y: (d) => d["20-29"]
})
]
})
Plot.plot({
width: 900,
x: {
label: "ꜛState"
},
y: {
transform: (d) => d / 1_000_000,
label: "ꜛMillion People"
},
marks: [Plot.barY(data, { x: "name", y: (d) => d["20-29"] })]
})
Plot.plot({
width: 900,
x: {
label: "ꜛState"
},
y: {
transform: (d) => d / 1_000_000,
label: "ꜛMillion People"
},
marks: [
Plot.barY(data, {
x: "name",
y: (d) => d["20-29"],
sort: {
x: "y",
reverse: true
}
})
]
})
// ...
// ...
// ...
// ...
ageRangeToFocus = "≥80"
// ...
// ... the dropdown menu should let the user select from '<10', '10-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '≥80'
// ...
// ...
// ...
// ...
// import {Wrangler, op} from "@observablehq/data-wrangler"
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.
