Flight Paths Edge Bundling

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.

Libraries

The following JavaScript libraries are required for this example:

• D3.js
• TopoJSON
• us-atlas
• d3-geo-voronoi

Data

This example uses the airports.csv and flights.csv datasets from this GIST:

• https://gist.github.com/mbostock/7608400

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:

• https://github.com/topojson/us-atlas

The already-projected state-level data is used here.

Inspirations

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.