Visualizes flights between airports in the continental United States using edge bundling. The code can be easily modified to either show the top 50 airports by degree or the highest degree airport in each state.
This example combines our map and graph visualizations together in a single visualization. It demonstrates map projections, TopoJSON, Voronoi diagrams, force-directed layouts, and edge bundling.
The following JavaScript libraries are required for this example:
This example uses the airports.csv
and flights.csv
datasets from this GIST:
The airports.csv
file looks like:
iata | name | city | state | country | latitude | longitude |
---|---|---|---|---|---|---|
00M | Thigpen | Bay Springs | MS | USA | 31.95376472 | -89.23450472 |
00R | Livingston Municipal | Livingston | TX | USA | 30.68586111 | -95.01792778 |
The flights.csv
file looks like:
origin | destination | count |
---|---|---|
ABE | ATL | 853 |
ABE | BHM | 1 |
This example also uses the TopJSON data from:
The already-projected state-level data is used here.
The following examples from Mike Bostock served as a starting point for the underlying data, map, and interaction:
-
U.S. Airports Voronoi, an Observable notebook using D3 v5 and TopoJSON v3
-
Voronoi Arc Map, a Block using D3 v4 and TopoJSON v1
-
Airports Symbol Map, a example from a talk using D3 v3
The Flight Patterns work by Aaron Koblin and Force Directed Edge Bundling for Graph Visualization paper by Danny Holten and Jarke J. van Wijk are also inspirations for using edge bundling with this example.
plz react it