title: How to draw a line / link between two points on a D3 map based on latitude / longitude?
body: <p>I am attempting to create a map of the 10 major NASA facilities in D3. I have successfully generated the base United States map and appended NASA logos at each one of the center locations based on a .csv with latitude and longitude. However, I cannot figure out any elegant way to draw lines / links / arcs / connections between the points on the map.</p>
  
  <p>In the code below, I have drawn a line between GSFC and KSC (using the 'var = places', 'var = route', and 'svg.append("path")') but it is on an SVG layer, so it is on top of the logos (which looks awful) and does not scale (or go away would be fine, too) when clicking to zoom in on a state. I would like to be able to draw links between the centers based on the latitude and longitude data from the .csv.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  .background {
    fill: none;
    pointer-events: all;
  }
  
  #states {
    fill: #aaaaaa;
  }
  
  #states .active {
    fill: #ff0000;
    fill-opacity: .5;
  }
  
  #state-borders {
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
  }
  
  path.link {
    fill: none;
    stroke: #666666;
    stroke-width: 1.5px;
  }
  
  .stroke {
    fill: none;
    stroke: #000;
    stroke-width: 3px;
  }
  
  .fill {
    fill: #fff;
  }
  
  .graticule {
    fill: none;
    stroke: #777;
    stroke-width: .5px;
    stroke-opacity: .5;
  }
  
  .route {
    fill: none;
    stroke: blue;
    stroke-width: 3px;
  }
  
  &lt;/style&gt;
  &lt;body&gt;
      &lt;h2&gt;
        &lt;span&gt;NASA Centers&lt;/span&gt;
      &lt;/h2&gt;
  
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://d3js.org/d3.geo.projection.v0.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://d3js.org/topojson.v1.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var width = 1000,
      height = 600,
      centered;
  
  var projection = d3.geo.albersUsa()
      .scale(1070)
      .translate([width / 2, height / 2]);
  
  var path = d3.geo.path()
      .projection(projection);
  
  var graticule = d3.geo.graticule();
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  var g = svg.append("g");
  
  var places = {
      GSFC: [-76.852587, 38.991621],
      KSC: [-80.650813, 28.524963]
      };
  
  var route = {
    type: "LineString",
    coordinates: [
      places.GSFC,
      places.KSC
    ]
  };
  
  var point = svg.append("g")
      .attr("class", "points")
    .selectAll("g")
      .data(d3.entries(places))
    .enter().append("g")
      .attr("transform", function(d) { return "translate(" + projection(d.value) + ")"; });
  
  point.append("text")
      .attr("y", 5)
      .attr("dx", "1em")
      .text(function(d) { return d.key; });
  
  d3.json("us.json", function(error, us) {
      g.append("g")
        .attr("id", "states")
      .selectAll("path")
        .data(topojson.feature(us, us.objects.states).features)
      .enter().append("path")
        .attr("d", path)
        .on("click", clicked);
  
      g.append("path")
        .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
        .attr("id", "state-borders")
        .attr("d", path);
  
      d3.csv("nasacenters.csv", function(error, data) {
          g.selectAll("image").data([0])
             .data(data)
             .enter()
             .append("image")
              .attr("xlink:href", "nasalogo.png")
              .attr("width", "30")
              .attr("height", "30")
              .attr("x", function(d) {
                     return projection([d.lon, d.lat])[0]-15;
              })
              .attr("y", function(d) {
                     return projection([d.lon, d.lat])[1]-15;
              })
  
          svg.append("path")
            .datum(route)
            .attr("class", "route")
            .attr("d", path)
            .style("opacity", 0.5);
  
      });
  
  });
  
  function clicked(d) {
    var x, y, k;
  
    if (d &amp;&amp; centered !== d) {
      var centroid = path.centroid(d);
      x = centroid[0];
      y = centroid[1];
      k = 4;
      centered = d;
    } else {
      x = width / 2;
      y = height / 2;
      k = 1;
      centered = null;
    }
  
    g.selectAll("path")
        .classed("active", centered &amp;&amp; function(d) { return d === centered; });
  
    g.transition()
        .duration(750)
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
        .style("stroke-width", 1.5 / k + "px");
  }
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The .csv file is in the following format:</p>
  
  <pre><code>code,center,lat,lon
  GSFC,Goddard Space Flight Center,38.991621,-76.852587
  KSC,Kennedy Space Center,28.524963,-80.650813
  JPL,Jet Propulsion Laboratory,34.200463,-118.176008
  DFRC,Dryden Flight Research Center,34.613714,-118.076790
  GRC,Glenn Research Center,41.415891,-81.861774
  MSFC,Marshall Space Flight Center,34.646554,-86.674368
  ARC,Ames Research Center,37.409574,-122.064292
  LaRC,Langley Research Center,37.092123,-76.376230
  JSC,Johnson Space Center,29.551508,-95.092256
  SSC,Stennis Space Center,30.363692,-89.600036
  </code></pre>