chart = Plot.plot({
height: 400,
width: 928,
x: {axis: "top"},
y: {domain: [0, 500], axis: null},
fy: {axis: null, domain: data.map((d) => d.tracking_source), padding: 0.05},
color: {
type: "ordinal",
scheme: "Greens",
label: "Vehicles per hour",
tickFormat: (i) => ((i + 1) * 500).toLocaleString("en"),
legend: true
},
marks: [
d3.range(bands).map((band) => Plot.areaY(data, {x: "date", y: (d) => d.value - band * 500, fy: "name", fill: band, sort: "date", clip: true})),
Plot.axisFy({frameAnchor: "left", dx: -28, fill: "currentColor", textStroke: "white", label: null})
]
})
data = [ {
"tracking_source": "Arvento (obu)",
"timestamp": "2024-02-12T08:52:32.000Z",
"device_id": "764322"
},
{
"tracking_source": "Arvento (obu)",
"timestamp": "2024-02-12T08:52:52.000Z",
"device_id": "764322"
},
{
"tracking_source": "Arvento (obu)",
"timestamp": "2024-02-12T08:53:12.000Z",
"device_id": "764322"
},
{
"tracking_source": "Arvento (obu)",
"timestamp": "2024-02-12T08:53:32.000Z",
"device_id": "764322"
},
{
"tracking_source": "driver_app",
"timestamp": "2024-02-12T08:54:51.111Z",
"device_id": "45054933-1aa7-4482-9fc3-b2d155190468"
},
{
"tracking_source": "driver_app",
"timestamp": "2024-02-12T08:55:11.099Z",
"device_id": "45054933-1aa7-4482-9fc3-b2d155190468"
},]
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.
