Plot.line(data, {
x: "Date",
y: "Domestic revenue proportion",
tip: true
}).plot({
title: "Teladoc's domestic revenue proportion held steady",
caption:
"Although it decreased slightly over time, Teladoc's domestic revenue proportion didn't change enough to invalidate our focus on BetterHelp as primarily serving the U.S. market.",
y: { grid: true, ticks: 5, tickFormat: "%" },
marks: [
Plot.ruleY([0]),
Plot.ruleX([new Date("2023-06-30")], {
strokeDasharray: [4, 3],
stroke: "#3a7a4b",
strokeWidth: 1,
tip: true
}),
Plot.text(["FTC complaint"], {
x: new Date("2023-07-07"),
dx: -10,
y: 0.02,
fill: "#3a7a4b",
stroke: "white",
strokeWidth: 7,
rotate: -90,
textAnchor: "start",
lineAnchor: "bottom",
fontWeight: "bold"
})
]
})
data = [
{ Date: "2022-03-31", Domestic: 491_200_000, International: 74_150_000 },
{ Date: "2022-06-30", Domestic: 521_390_000, International: 70_990_000 },
{ Date: "2022-09-30", Domestic: 534_010_000, International: 77_390_000 },
{ Date: "2022-12-31", Domestic: 554_420_000, International: 83_290_000 },
{ Date: "2023-03-31", Domestic: 541_660_000, International: 87_580_000 },
{ Date: "2023-06-30", Domestic: 561_790_000, International: 90_620_000 },
{ Date: "2023-09-30", Domestic: 569_320_000, International: 90_920_000 },
{ Date: "2023-12-31", Domestic: 564_760_000, International: 95_760_000 },
{ Date: "2024-03-31", Domestic: 547_600_000, International: 98_530_000 },
{ Date: "2024-06-30", Domestic: 540_800_000, International: 101_640_000 }
].map(({ Date: rawDate, Domestic, International }) => ({
Date: new Date(rawDate),
"Domestic revenue proportion": Domestic / (Domestic + International)
}))
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.
