Public
Edited
Sep 27, 2023
Insert cell
Insert cell
traffic = FileAttachment("traffic.csv").csv({typed: true})
Insert cell
Plot.plot({
marginLeft: 120,
padding: 0,
y: {label: null},
color: {legend: true, zero: true},
marks: [
Plot.cell(
traffic,
Plot.group(
{fill: "median"},
{x: (d) => d.date.getUTCHours(), y: "location", fill: "vehicles", inset: 0.5, sort: {y: "fill"}}
)
)
]
})
Insert cell
Plot.plot({
marginLeft: 120,
x: {label: "Vehicles per hour (thousands)", transform: (x) => x / 1000},
y: {label: null},
marks: [
Plot.ruleX([0]),
Plot.tickX(
traffic,
{x: "vehicles", y: "location", strokeOpacity: 0.3}
),
Plot.tickX(
traffic,
Plot.groupY(
{x: "median"},
{x: "vehicles", y: "location", stroke: "red", strokeWidth: 4, sort: {y: "x"}}
)
)
]
})
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