Plot.plot({
title: "BetterHelp's prices have increased over time",
caption:
"BetterHelp have a minimum and maximum weekly price. After the COVID-19 pandemic started, they sharply rose prices for a month in July 2020, then quickly retracted them. Prices have held stable since, until increases in late 2023 and early 2024.",
y: {
label: "Weekly price",
tickFormat: "$s"
},
marks: [
Plot.ruleY([0]),
Plot.ruleX(dates, {
x: "Date",
strokeDasharray: [4, 3],
stroke: "#3a7a4b",
strokeWidth: 1,
tip: true
}),
Plot.lineY(data, { x: "Date", y: "Minimum Price", curve: "step-after" }),
Plot.lineY(data, { x: "Date", y: "Maximum Price", curve: "step-after" }),
Plot.text(dates, {
x: "Date",
text: "Text",
dx: -4,
y: 1,
fill: "#3a7a4b",
stroke: "white",
strokeWidth: 7,
rotate: -90,
textAnchor: "start",
lineAnchor: "bottom",
fontWeight: "bold"
}),
Plot.areaY(data, {
x: "Date",
y1: "Minimum Price",
y2: "Maximum Price",
fillOpacity: 0.1,
curve: "step-after",
tip: true
})
]
})
data = [
{ Date: "2018-11-16", Minimum: 40, Maximum: 70 },
{ Date: "2020-07-25", Minimum: 80, Maximum: 100 },
{ Date: "2020-08-02", Minimum: 60, Maximum: 80 },
{ Date: "2021-06-24", Minimum: 60, Maximum: 90 },
{ Date: "2023-11-29", Minimum: 65, Maximum: 90 },
{ Date: "2024-08-06", Minimum: 70, Maximum: 100 }
].map(({ Date: rawDate, Minimum, Maximum }) => ({
Date: new Date(rawDate),
"Minimum Price": Minimum,
"Maximum Price": Maximum
}))
dates = [
{ Date: "2020-03-11", Text: "WHO declares COVID-19 pandemic" },
{ Date: "2023-05-05", Text: "WHO ends pandemic status" }
].map(({ Date: rawDate, Text }) => ({ Date: new Date(rawDate), Text }))
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.
