The end-to-end solution for building and hosting better data apps, dashboards, and reports.
chart = Plot.plot({
height: 40 + new Set(traffic.map(d => d.name)).size * 17,
width,
marginBottom: 1,
marginLeft: 120,
x: {axis: "top"},
y: {axis: null, range: [2.5 * 17 - 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: "#ccc"}),
Plot.lineY(values, {x: "date", y: "value", fy: "name", curve: "basis", sort: "date", strokeWidth: 1})
])
]
})
traffic = FileAttachment("traffic.csv").csv({typed: true})
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.
