Public
Edited
Jan 23, 2023
chart(data)
dates = [...monthsAgo({ month: "december", year: 2022 }, 12)].reverse()
import { monthsAgo } from "2c005d0428e381b8"
db = "https://int-cpi-datasette-proxy.vir.onservo.com/cpi/month-by-month.json"
chart = function (data, domain) {
return Plot.plot({
grid: true,
inset: 10,
width,
height: 25 * 200,
x: {
nice: true,
tickFormat: (d) =>
d.toLocaleString("en", { month: "short", year: "2-digit" })
},
y: {
nice: true,
ticks: 10,
domain: d3.extent(data, (d) => d.change)
// domain: d3.extent(
// data.filter((f) => domain.includes(f.label)).map((f) => f.change)
// )
},
// fy: {
// domain
// },
facet: {
data,
y: "label",
marginRight: 275
},
marks: [
Plot.frame(),
Plot.line(data, {
x: "date",
y: "change"
}),
Plot.dot(data, {
x: "date",
y: "change",
fill: "steelblue"
})
]
});
}
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.
