title: Drawing Connecting Lines ("Great Arcs") on a D3 Symbol Map
body: <p>I am using <strong>Version 4</strong> of the <a href="https://d3js.org/" rel="nofollow">D3 Library</a> and am, to this point, unable to draw connecting lines between points on a <a href="http://mbostock.github.io/d3/talk/20111116/airports.html" rel="nofollow">Symbol Map</a>. In the example, from an earlier version of the library, drawing connecting lines is accomplished with this code:</p>
  
  <pre><code>// calculate the Great Arc between each pair of points
  var arc = d3.geo.greatArc()
    .source(function(d) { return locationByAirport[d.source]; })
    .target(function(d) { return locationByAirport[d.target]; });
  
  [snip]
  
  // Draw the Great Arcs on the Chart.
  g.selectAll("path.arc")
      .data(function(d) { return linksByOrigin[d.iata] || []; })
    .enter().append("svg:path")
      .attr("class", "arc")
      .attr("d", function(d) { return path(arc(d)); });
  </code></pre>
  
  <p>The comments are mine (and could be wrong), the code is from the Symbol Map example, above.</p>
  
  <p>In version 4, <code>d3.geo.greatArc()</code> <a href="https://github.com/d3/d3/issues/1021" rel="nofollow">appears to have been deprecated</a> in favor of <code>d3.geoDistance()</code>. I cannot say this for sure, but I can find no reference to <code>greatArc</code> in version 4. Unfortunately, I have no idea how to set up a call to <code>geoDistance()</code> to get the same information that <code>greatArc()</code> used to return. The <a href="https://github.com/d3/d3-geo/blob/master/README.md#geoDistance" rel="nofollow">documentation provided for <code>geoDistance()</code></a> is not enough for me to understand how to use it.</p>
  
  <p>So, my question is: How do I draw lines between points (lat/long pairs) on a D3 Symbol Chart using Version 4 of the library?</p>