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,
marks: [
Plot.barY(data, {x: "name", y: "20-29"})
]
})
Plot.plot({
width: 1000,
marginLeft: 40,
y: {
transform: d => d /1000
},
marks: [
Plot.barY(data, {x: "name", y: "20-29"})
]
})
Plot.plot({
width: 1000,
marginLeft: 40,
y: {
label: "↑ Million People",
transform: d => d /1_000_000
},
x: {
label: "State"
},
marks: [
Plot.barY(data, {x: "name", y: "20-29"})
]
})
Plot.plot({
width: 1000,
marginLeft: 40,
y: {
label: "↑ Million People",
transform: d => d /1_000_000
},
x: {
label: "State"
},
marks: [
Plot.barY(data, {x: "name", y: "20-29", sort:{x: "y", reverse:true}})
]
})
Plot.plot({
width: 1000,
marginLeft: 40,
y: {
label: "↑ Million People",
transform: d => d /1_000_000
},
x: {
label: "State"
},
marks: [
Plot.barY(data, {
x: "name",
y: "20-29",
fill: "goldenrod",
sort:{x: "y", reverse:true}})
]
})
Plot.plot({
width: 1000,
marginLeft: 40,
y: {
label: "↑ Million People",
transform: d => d /1_000_000
},
x: {
label: "State"
},
marks: [
Plot.barY(data, {
x: "name",
y: "20-29",
sort:{x: "y", reverse:true},
fill: d => d["20-29"] > 1_000_000 ? "salmon" : "dodgerblue"
})
]
})
Plot.plot({
width: 1000,
marginLeft: 40,
y: {
label: "↑ Million People",
transform: d => d /1_000_000
},
x: {
label: "State"
},
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: 40,
y: {
label: "↑ Million People",
transform: d => d /1_000_000
},
x: {
label: "State"
},
marks: [
Plot.barY(data, {
x: "name",
y: ageRangeToFocus,
sort:{x: "y", reverse:true},
fill: d => d["name"] === "VA" ? "red" : "dodgerblue"
})
]
})
currrent value is ${ageRange_dropdown}
Plot.plot({
width: 1000,
marginLeft: 40,
y: {
label: "↑ Million People",
transform: d => d /1_000_000
},
x: {
label: "State"
},
marks: [
Plot.barY(data, {
x: "name",
y: ageRange_dropdown,
sort:{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.
