{
const xy = Plot.normalizeX("sum", {x: "percent", y: "Year", z: "Year"});
return Plot.plot({
height: 500 ,
x: {axis: "top", percent: true, grid: true},
y: {axis: null},
color: {scheme: "spectral", legend: true},
marks: [
Plot.ruleX([-.05]),
Plot.ruleY([1988]),
Plot.ruleY(Transportation, Plot.groupY({x1: "min", x2: "max"}, {...xy, sort: {y: "x1"}})),
Plot.dot(Transportation, {...xy, fill: "transportation", sort: {color: null},tip: true}), // color in input order
Plot.text(Transportation, Plot.selectMinX({...xy, textAnchor: "end", dx: -4, text: "Year"}))
]
});
}
Transportation = FileAttachment("US_Car_Ownership.csv").csv({typed: true}).then((data) => {
const transportation = data.columns.slice(1); // convert wide data to tidy data
return Object.assign(transportation.flatMap((transportation) => data.map((d) => ({Year: d.Year, transportation, percent: d[transportation]}))), {transportation});
});
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.
