Platform
Resources
Pricing
Sign in
Get started
Zhenghao Lin
Workspace
Fork
Public
By
Zhenghao Lin
Edited
Apr 5, 2023
Fork of
Input + Chart
3
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.
Try it for free
Learn more
Compare fork
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bartStationsRawdata
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bartStationsInfo
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
rawZipcodes
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bayAreaZipcodes
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bartRoutesRawData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bartRoutesInfo
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bartStationVertices
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bartRouteEdges
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
graph
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bartKey
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bartNetworkChart
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML