The end-to-end solution for building and hosting better data apps, dashboards, and reports.
chart = Plot.plot({
height: 700,
width,
marginLeft: 120,
axis: null,
x: {
axis: "top",
round: true
},
y: {
domain: [0, d3.max(traffic, d => d.value) / (overlap + 1)]
},
color: {
legend: true,
label: "Vehicles per hour",
scheme: "purd"
},
fy: {
domain: traffic.map(d => d.name) // preserve input order
},
facet: {
data: traffic,
y: "name"
},
marks: [
Plot.areaY(traffic, {x: "date", y: "value", z: "name", fill: "value", sort: "date"}),
Plot.lineY(traffic, {x: "date", y: "value", z: "name", strokeWidth: 1, sort: "date"}),
Plot.text(traffic, Plot.selectFirst({x: d3.min(traffic, d => d.date), text: "name", dx: -3, frameAnchor: "right"}))
]
})
traffic = FileAttachment("traffic.csv").csv({typed: true})
overlap = 4.5
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.
