Connection map from csv in d3.js

This post follows the previous multiple connection map. It illustrates how to transform a list of gps coordinate pairs to a format suitable to be plotted by d3.js.

Connection map section


  • First of all, learn how to build a basic background map.

  • Then create a path generator called path. Basically, give it 2 set of coordinates and it will return a list of coordinates all along the great circle between them.

  • If you're not sure, try to add console.log(path(link)) and you will see the svg path that has been generated.

  • Finally it is easy to append a path calling this generator.

  • Try to play with the input data to understand how the great circle shape changes.
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src=""></script>
<script src=""></script>
<script src=""></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="400"></svg>


// The svg
var svg ="svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
var projection = d3.geoMercator()
    .translate([width/2, height/2*1.3])

// A path generator
var path = d3.geoPath()

// Load world shape AND list of connection
  .defer(d3.json, "")  // World shape
  .defer(d3.csv, "") // Position of circles

function ready(error, dataGeo, data) {

    // Reformat the list of link. Note that columns in csv file are called long1, long2, lat1, lat2
    var link = []
      source = [+row.long1, +row.lat1]
      target = [+row.long2, +row.lat2]
      topush = {type: "LineString", coordinates: [source, target]}

    // Draw the map
            .attr("fill", "#b8b8b8")
            .attr("d", d3.geoPath()
            .style("stroke", "#fff")
            .style("stroke-width", 0)

    // Add the path
        .attr("d", function(d){ return path(d)})
        .style("fill", "none")
        .style("stroke", "#69b3a2")
        .style("stroke-width", 2)



Related blocks →