Plot.line(data, { x: "Date", y: "Monthly podcast ad spend", tip: true }).plot({
title: "BetterHelp hasn't dramatically cut podcast spend",
caption:
"Although it looks like BetterHelp's podcast spend slightly leads their user numbers, their podcast spend drops much more than their user numbers do. Overall, it hasn't been dramatically cut in recent months.",
y: { tickFormat: "$s", ticks: 5, grid: true },
marks: [
Plot.ruleY([0]),
Plot.ruleX([new Date("2023-06-30")], {
strokeDasharray: [4, 3],
stroke: "#3a7a4b",
strokeWidth: 1,
tip: true
}),
Plot.text(["BetterHelp starts losing users"], {
x: new Date("2023-06-30"),
dx: -6,
y: 0,
dy: -4,
fill: "#3a7a4b",
stroke: "white",
strokeWidth: 7,
rotate: -90,
textAnchor: "start",
lineAnchor: "bottom",
fontWeight: "bold"
})
]
})
data = [
{ Date: "2022-08-01", Spend: 6_820_000 },
{ Date: "2022-12-01", Spend: 9_160_000 },
{ Date: "2023-05-01", Spend: 11_590_000 },
{ Date: "2023-07-01", Spend: 9_220_000 },
{ Date: "2023-09-01", Spend: 9_080_000 },
{ Date: "2023-12-01", Spend: 7_970_000 },
{ Date: "2024-01-01", Spend: 9_010_000 },
{ Date: "2024-03-01", Spend: 8_290_000 },
{ Date: "2024-06-01", Spend: 7_205_400 }
].map(({ Date: rawDate, Spend }) => ({
Date: new Date(rawDate),
"Monthly podcast ad spend": Spend
}))
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.
