data viz + front end development
Public
Edited
Jun 21, 2023
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
predictions = fetch(
"https://api-v3.mbta.com/predictions?filter[route]=Red&filter[stop]=place-jfk&filter[direction_id]=1&fields[prediction]=arrival_time,departure_time,schedule_relationship,status"
)
.then((response) => response.json())
.then((resp) => resp.data.map(transformResponse))
schedules = fetch(
"https://api-v3.mbta.com/schedules?filter[route]=Red&filter[stop]=place-jfk&filter[direction_id]=1&fields[schedule]=arrival_time,departure_time,stop_headsign"
)
.then((response) => response.json())
.then((resp) => resp.data.map(transformResponse))
transformResponse = ({ attributes, id, relationships }) => ({
...attributes,
id,
route: relationships.route.data.id,
stop: relationships.stop.data.id,
trip: relationships.trip.data.id
})
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.
