Public
Edited
Jan 12
//marker = {
// const el = document.createElement("div");
// el.innerHTML = `<svg viewBox="0 0 20 20" height="60" width="60">
// <path d="M 2 18 L 10 2 L 18 18 L 10 14 Z 2 18" stroke="white" stroke-width="1" fill="black" stroke-linecap="round"></path>
//</svg>`;
// return new mapboxgl.Marker({ element: el })
// .setLngLat([30.5, 50.5])
// .addTo(map);
//}
vehicleLoc = ({ type: "Point", coordinates: [-71.07458, 42.32457] })
shapesGeoJSON = ({
type: "FeatureCollection",
features: shapes.map((shape) => ({
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: googlePolyline
.decode(shape.polyline)
.map(([lat, long]) => [long, lat])
}
}))
})
routeGeoJSON = ({
type: "FeatureCollection",
features: routePatternShapeColor.map(({ routePattern, route, shape }, i) => ({
id: i,
type: "Feature",
properties: {
route,
routePattern,
color: `#${route.attributes.color}`,
textColor: `#${route.attributes.text_color}`
},
geometry: {
type: "LineString",
coordinates: googlePolyline
.decode(shape)
.map(([lat, long]) => [long, lat])
}
}))
})
featureById = new Map(routeGeoJSON.features.map((d) => [d.id, d.properties]))
shapes = routePatterns.included
.filter((d) => d.type === "shape")
.map((d) => d.attributes)
.slice(100, 101)
// .slice(, 1)
decode = googlePolyline.decode
decode(
"wwraGdiypL?AN_@FWAYGKOGQNyAzDd@`@^ZLLTPmBrEqDfJ??w@pBMX{ClIcBlEu@`ByAhDEJS\\c@`@]^]p@w@nB_@dAi@xACD??i@fAc@Za@Pc@Lo@LmBXyCf@e@J?Aa@BY?WAUKQCKAIBa@RORcAl@e@H??KB{A^eAh@u@n@s@]_@O??ICMESIc@Uy@a@iAm@YQ??WS}@y@uBeBuAoA_@Uu@g@Kd@??w@tDg@zBWjAYtA??GTG^I^a@hB??ENa@vBKd@Sx@c@pB??GVc@xBMj@g@dCOp@??o@tCa@vBuC|C??MNwC~CkBhB}A~AeAhA??ONqBtBsBrBYP??gCfB{@p@gBnAYR??{AbAcBtAeBlAiCnBgAv@??]T{AdAg@`Ci@bCMn@??GTs@|Cm@tC??GTMt@k@bCo@lCu@|COl@Op@w@~Cg@vBAB??m@dCw@nDQp@??I^UdAs@rCOv@MxAAzA??A`@OIOAEBEFCHCH[^YZ]B??}@HiCN_Gf@gDVeAJ??m@Di@Fc@CA?aAc@cBkAKE??OICAe@Ga@H{A`AqA|@iAz@}@v@MJ??s@p@y@|@{@bAsBpCeAjBeArBgArBg@x@??KPeAlBqC|Ea@r@??KRwAfCyA`CkArB??IReBxCiAlBkAnBS^??GJS^{AjC??wAbCm@fAkB~C_BlC??KR{@xAo@fAmAbC??KRgDbH??IPgBvDwC~FMX??i@pAp@xGFz@Ff@??`@bEFl@NtBVhCAD?PCP??EV?P@PD\\BT@X?V?n@@^?\\CXAV?F@JLnA@JBJTr@P^??BB`@`@rA~@p@h@p@f@jBxA\\V??~@t@tBzB~@~@FH|@lAFJJRt@pAJV??JPRl@Lf@@HD`@Bt@EbASnCG\\Ih@Mp@Sl@K\\hAdCb@t@hBfDVR^aBp@}B^mAj@mAOU}@oA"
)
shapesById = new Map(
routePatterns.included.filter((d) => d.type === "shape").map((d) => [d.id, d])
)
tripsById = new Map(
routePatterns.included
.filter((d) => d.type === "trip")
.map((d) => [
d.id,
{
...d,
shape: shapesById.get(d.relationships.shape.data.id).attributes.polyline
}
])
)
// shapeByTripId = routePatterns.included.filter((d) => d.type === "trip").map()
routePatternShapeColor = routePatterns.data.map((d) => ({
routePattern: d,
shape: tripsById.get(d.relationships.representative_trip.data.id).shape,
route: routeById.get(d.relationships.route.data.id)
}))
routeById = new Map(routes.map((d) => [d.id, d]))
routes = routePatterns.included.filter((d) => d.type === "route")
viewof table = Inputs.table(
routes.map((r) => ({ ...r.attributes, c: `#${r.attributes.color}` }))
)
colors = routes.map((r) => ({
id: r.id,
color: `#${r.attributes.color}`,
text: `#${r.attributes.text_color}`
}))
Plot.plot({
marks: [
Plot.barY(
colors,
Plot.groupX({ y: "count" }, { x: "color", fill: "color" })
),
Plot.ruleY([0])
],
height: 900
})
routeIds = new Set(routes.map((d) => d.id).sort())
routeIdsFromAPI = new Set(routesFromAPI.data.map((d) => d.id).sort())
difference = routeIds.difference(routeIdsFromAPI)
routePatterns = fetch(
"https://api-v3.mbta.com/route_patterns?include=representative_trip.shape,route.color"
).then((res) => res.json())
routePatterns_ = FileAttachment("route_patterns").json()
routesFromAPI = fetch("https://api-v3.mbta.com/routes").then((res) =>
res.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.
