The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Jun 5, 2023
15 forks
3 stars
{
const xy = Plot.normalizeX("sum", {x: "population", y: "state", z: "state"});
return Plot.plot({
height: 660,
x: {axis: "top", percent: true, grid: true},
y: {axis: null},
color: {scheme: "spectral", legend: true},
marks: [
Plot.ruleX([0]),
Plot.ruleY(stateage, Plot.groupY({x1: "min", x2: "max"}, {...xy, sort: {y: "x1"}})),
Plot.dot(stateage, {...xy, fill: "age", title: "age", sort: {color: null}}), // color in input order
Plot.text(stateage, Plot.selectMinX({...xy, textAnchor: "end", dx: -6, text: "state"}))
]
});
}
stateage = FileAttachment("us-population-state-age.csv").csv({typed: true}).then((data) => {
const ages = data.columns.slice(1); // convert wide data to tidy data
return Object.assign(ages.flatMap((age) => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});
});
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.
