Published unlisted
Edited
May 2, 2022
Plot.plot({
color: {
scheme: "greys",
reverse: true
},
y: {
label: "↑ Population",
tickFormat: "s",
grid: true
},
marks: [
Plot.barY(
data_sortable,
Plot.groupX(
{ y: "sum"},
{ x: "state",
y: "population",
fill: "ageGroup",
sort: {x: 'y', reverse: true}
}
)
),
// Add text to each box
Plot.textY( data_sortable,
Plot.groupX(
{ y: "sum", text: 'first'},
{ x: "state",
y: "ageGroup",
text: "ageGroup", // <-- not the right approach
fill: "red", // for debugging
sort: {x: 'y', reverse: true},
}
)
)
],
})
import {data_filtered as data} from "@clokman/plot-grouped-bar-chart"
// To use copied code replace "data" with your own variable
data_temporary = aq.from(data)
.derive({ageGroupTemporary: d => d.ageGroup === "<10" ? "10-" : d.ageGroup})
.derive({ageGroupSortable: d => d.ageGroupTemporary === "≥80" ? "80+" : d.ageGroupTemporary})
.select ("state", "ageGroupSortable", "population")
.objects()
data_sortable = aq.from(data_temporary)
.rename( {ageGroupSortable: "ageGroup"})
.objects()
Inputs.table(data_sortable)
import {Plot} from "@mkfreeman/plot-tooltip"
import {Wrangler, op} from "@observablehq/data-wrangler"
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.
