Public
Edited
Sep 7, 2023
Insert cell
Insert cell
Insert cell
chart = Plot.plot({
height: 1100,
width: 928,
x: {axis: "top"},
y: {domain: [0, step], axis: null},
fy: {axis: null, domain: traffic.map((d) => d.name), padding: 0.05},
color: {
type: "ordinal",
scheme: "Greens",
label: "Vehicles per hour",
tickFormat: (i) => ((i + 1) * step).toLocaleString("en"),
legend: true
},
marks: [
d3.range(bands).map((band) => Plot.areaY(traffic, {x: "date", y: (d) => d.value - band * step, fy: "name", fill: band, sort: "date", clip: true})),
Plot.axisFy({frameAnchor: "left", dx: -28, fill: "currentColor", textStroke: "white", label: null})
]
})
Insert cell
traffic = FileAttachment("traffic.csv").csv({typed: true})
Insert cell
step = +(d3.max(traffic, (d) => d.value) / bands).toPrecision(2)
Insert cell
chart2 = Plot.plot({
height: 1100,
width: 928,
x: {axis: "top"},
y: {domain: [0, step], axis: null},
fy: {axis: null, domain: traffic.map((d) => d.name), padding: 0.05},
color: {
type: "ordinal",
scheme: "Greens",
label: "Vehicles per hour",
tickFormat: (i) => ((i + 1) * step).toLocaleString("en"),
legend: true
},
marks: [
d3.range(bands).map((band) => Plot.areaY(traffic, {x: "date", y: (d) => d.value - band * step, fy: "name", fill: band, sort: "date", clip: true})),
Plot.axisFy({frameAnchor: "left", dx: -28, fill: "currentColor", textStroke: "white", label: null})
]
})
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