Principal Web Developer at Freedom of the Press Foundation
Public
Edited
Nov 23, 2023
2 stars
mileMarkers = d3.csv(await FileAttachment("amtrak_6mi.csv").url(), d3.autoType)
DATA_URL = 'https://docs.google.com/spreadsheets/d/1ROdsCgvGlpy7NDGcQ1jmBbWlwpSdeqYwyeywjxXr5og/export?format=csv'
travelHistory = d3.csv(DATA_URL, d => {
const RID = d.Route in ROUTE_IDS ? ROUTE_IDS[d.Route] : d.Route
const stationA = mileMarkers.find(s => s.RID === RID && s.CODE === d.Origin)
const stationB = mileMarkers.find(s => s.RID === RID && s.CODE === d.Destination)
let distance
if (!stationA || !stationB) {
console.log(`Station data missing for trip from ${d.Origin} to ${d.Destination} on ${d.Route}`)
distance = 0
} else {
distance = Math.abs(stationA.km - stationB.km) * 0.621371 // convert to mi
}
return {
Distance: distance,
...d,
'Departure Time': d3.utcParse("%Y-%m-%dT%H:%M:%S")(d['Departure Time']),
'Arrival Time': d3.utcParse("%Y-%m-%dT%H:%M:%S")(d['Arrival Time'])
}
})
mileMarkers
Type Table, then Shift-Enter. Ctrl-space for more options.
travelHistory
Type Table, then Shift-Enter. Ctrl-space for more options.
twoUp = (node1, node2) => htl.html`
<div class="two-up plots">
<div>
${node1}
</div>
<div>
${node2}
</div>
</div>
`
<style type="text/css">
.two-up {
display: flex;
justify-content: space-between;
}
.two-up > div {
width: 50%;
flex-grow: 0;
flex-shrink: 0;
}
@media (max-width: 700px) {
.two-up {
flex-direction: column;
}
.two-up > div {
width: 100%;
}
}
.plots rect {
shape-rendering: crispEdges;
}
</style>
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.
