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: 900,
marks: [Plot.barY(data, { x: "name", y: "20-29" }), Plot.ruleY([0])] //sets the x axis at y=0, optional
})
Plot.plot({
width: 900, //uncomment if you wanna move the left margin to the right to view the numbers on y axis (assuming you dont divide by 1000 below)
marginLeft: 100,
marks: [
Plot.barY(data, {
x: "name",
y: (d) => d["20-29"] / 1000
})
]
})
Plot.plot({
width: 900,
y: {
transform: (d) => d / 1_000_000, //to make the numbers on y axis smaller
label: "ꜛMillion People"
},
marks: [Plot.barY(data, { x: "name", y: (d) => d["20-29"] })]
})
Plot.plot({
width: 900,
y: {
transform: (d) => d / 1_000_000, //to make the numbers on y axis smaller
label: "ꜛMillion People"
},
marks: [
Plot.barY(data, {
x: "name",
y: (d) => d["20-29"], //or do it with just "20-29" instead of '(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.
