Connection map

Linking two locations on a map using a straight line would be pretty easy using a classic d3.line() approach. However, great circle are more appreciated when it comes to connection map. Fortunately, the function d3.geoPath() makes it a breeze to compute the coordinate of the great circle path. Here are a few examples showing how to use it.

One unique connection

---

How to display one unique connection on the map. Just to illustrate how to use d3.geoPath()

Multi connections

---

Same idea but applied on several connection. Just shows how to enter in the data to add all connections.

Input = csv file

---

Plot a connection map from a list of connection stored in a .csv format. It requires a reformatting step.

A few blocks with more complicated codes to showcase what's possible to do with connection maps. First show how to display connections on hover. Second show how to apply edge bundling to the connection to declutter the chart.

Voronoi Arc Map

---

Highlight flight routes when an airport is hovered.

Flight Paths Edge Bundling

---

Apply edge bundling technique on a connection map.