Public
Edited
Apr 5, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
bartStationsRawdata = FileAttachment("bart_stations.json").json()
Insert cell
bartStationsInfo = bartStationsRawdata.root.stations.station
Insert cell
navio(bartStationsInfo)
Insert cell
Insert cell
rawZipcodes = FileAttachment("bayarea_zipcodes.csv").csv()
Insert cell
bayAreaZipcodes = {
let result = [];
for (const element of rawZipcodes) {
if (element.zip !== "" && element.zip > 0) {
result.push(element.zip);
}
}
return result.sort();
}
Insert cell
Insert cell
bartRoutesRawData = FileAttachment("bart_routes.json").json()
Insert cell
bartRoutesInfo = bartRoutesRawData.root.routes.route
Insert cell
navio(bartRoutesInfo)
Insert cell
Insert cell
Insert cell
Insert cell
graph = {
let res = {};
res.nodes = bartStationVertices;
res.links = bartRouteEdges;
return res;
}
Insert cell
Insert cell
bartKey = Swatches(bartNetworkChart.scales.color)
Insert cell
bartNetworkChart = ForceGraph(graph, {
nodeId: (d) => d.stationAlias,
nodeGroup: (d) => d.routesCount,
nodeTitle: (d) => `${d.zipCode}`,
width,
height: 680,
invalidation // a promise to stop the simulation when the cell is re-run
})
Insert cell
Insert cell
Insert cell
import { navio } from "@john-guerra/navio"
Insert cell
import { ForceGraph } from "@d3/disjoint-force-directed-graph"
Insert cell
import { Swatches } from "@d3/color-legend"
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