Public
Edited
Nov 18, 2023
Plot.plot({
width: width,
height: 500,
marginLeft: 50,
marginRight: 100,
color: "white",
marks: [
Plot.ruleY([0]),
Plot.barY(getAverageRidership(line), Plot.groupX({ y: "mean" }, { x: "date", y: "ridership", fill: "steelblue", fillOpacity: 1 })),
Plot.lineY(
tidyData,
{ x: "date", y: "ridership", z: "station", curve: "monotone-x", stroke: "orange", strokeOpacity: 0.2, strokeWidth: 1 }
),
Plot.lineY(
filteredStations,
{ x: "date", y: "ridership", z: "station", tip: "x", curve: "monotone-x", stroke: "orange", strokeOpacity: 1 }
),
Plot.dot(
filteredStations,
{ x: "date", y: "ridership", r: 3, stroke: "orange", fill: "white", strokeOpacity: 1 }
),
Plot.text(
filteredStations,
Plot.selectLast({ x: "date", y: "ridership", z: "station", text: "station", textAnchor: "start", dx: 18, fontWeight: 500 })
),
]
})
filteredStations = tidyData.filter(d => stations.includes(d.station))
function getAverageRidership(line) {
if (line === "Kelana Jaya") return tidyData.filter(d => d.line === "kelana-jaya")
else if (line === "Ampang") return tidyData.filter(d => d.line === "ampang")
else if (line === "Sri Petaling") return tidyData.filter(d => d.line === "sri-petaling")
else return tidyData
}
tidyData = ridershipByDate
// .filter(d => d.line === "kelana-jaya")
// .slice(0, 10)
.flatMap(station => {
const tidyArr = []
for (let i = 0; i < 30; i++) {
tidyArr.push({
station: station.station,
date: d3.utcFormat("%d")(new Date(station.dates[i])),
ridership: station.ridership[i],
line: station.line
})
}
return tidyArr
})
ridershipByDate = FileAttachment("20231112_2043_ridership-by-date.json").json()
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.
