Public
Edited
Aug 16, 2024
Insert cell
Insert cell
Insert cell
chart = Plot.plot({
height: 100 + new Set(traffic.map(d => d.name)).size * 100,
width,
marginBottom: 5,
marginLeft: 120,
x: {axis: "both"},
y: {axis: null, range: [6 * 10 - 2, (2.5 - overlap) * 17 - 2]},
fy: {label: null, domain: traffic.map(d => d.name)}, // preserve input order
marks: [
d3.groups(traffic, d => d.name).map(([, values]) => [
Plot.areaY(values, {x: "date", y: "value", fy: "name", curve: "basis", sort: "date", fill: "#495867"}),
Plot.lineY(values, {x: "date", y: "value", fy: "name", curve: "basis", sort: "date", strokeWidth: 1})
])
]
})
Insert cell
traffic = FileAttachment("traffic (2014 onwards).csv").csv({typed: true})
Insert cell

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.
Learn more