Public
Edited
Jan 17, 2024
1 fork
1 star
cpi.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import { aq, op } from '@uwdata/arquero'
cpi.forEach((d, i) => {
d.aucslChange = 0
d.lfeslChange = 0
if (i >= 12) {
d.aucslChange = (d.CPIAUCSL - cpi[i - 12].CPIAUCSL) / cpi[i - 12].CPIAUCSL
d.lfeslChange = (d.CPILFESL - cpi[i - 12].CPILFESL) / cpi[i - 12].CPILFESL
}
})
cpi
cpiData = cpi.filter(d => (d.observation_date.getUTCFullYear() > 2014))
cpidf = aq.from(cpiData).view()
shapeTickBottom = ({
draw(context, l) {
context.moveTo(0, 0);
context.lineTo(0, l);
}
})
Plot.plot({
color: {legend: true},
y: {
grid: true,
},
x: {
domain: [new Date("August 2014"), new Date("February 2024")],
},
marks: [
Plot.axisY({
ticks: 6,
tickSize: 0,
domain: [-0.02, 0.1],
tickFormat: (d, i, _) =>
i === _.length - 1 ? `${d * 100}%` : `${d * 100}`,
dx: -10,
dy: -8,
frameAnchor: "left",
anchor: "right"
}),
Plot.axisX({
label: null,
ticks: [new Date("2015"), new Date("2020")],
tickSize: 6,
tickFormat: (d) => {
const year = d.getUTCFullYear();
if (year === 2015) {
return year;
}
if (year === 2020) {
return "'20";
}
}
}),
Plot.vectorX(
[
new Date("2016"),
new Date("2017"),
new Date("2018"),
new Date("2019"),
new Date("2021"),
new Date("2022"),
new Date("2023")
],
{
length: 2,
stroke: "gray",
shape: shapeTickBottom,
anchor: "start",
frameAnchor: "bottom"
}
),
Plot.ruleY([0]),
Plot.line(cpiData, {
x: "observation_date",
y: "lfeslChange",
stroke: "#bb2b77",
strokeWidth: 2,
strokeLinecap: "square",
strokeLinejoin: "bevel"
}),
Plot.line(cpiData, {
x: "observation_date",
y: "aucslChange",
stroke: "#323232",
strokeWidth: 2,
strokeLinecap: "round",
strokeDasharray: "0.1 5"
}),
Plot.rect(
[
{
start: new Date("March 2020"),
end: new Date("May 2020")
}
],
{
x1: "start",
x2: "end",
y1: -0.02,
y2: 0.1,
fill: "lightgray",
fillOpacity: 0.2
}
),
Plot.textX(cpiData, {
x: new Date("March 2020"),
y: 0.1,
text: ["RECESSION"],
textAnchor: "start",
lineAnchor: "bottom",
dy: -6,
fontSize: 13,
fontWeight: 300,
fill: "#666666"
}),
Plot.text(cpiData, Plot.selectLast({x: "observation_date", y: "aucslChange", text: "aucslChange", frameAnchor: "bottom", dy: -6}))
]
})
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.
