Connection map | the D3 Graph Gallery

Step by step

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.

Selection of blocks

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.