title: How do I get a d3 "area" shape to appear as links on this leaflet map, instead of lines?
body: <p>I'm trying to replace the lines in <a href="http://codepen.io/laissezpasser/pen/PNyzXX" rel="nofollow">this Sankey migration map</a> with <a href="http://codepen.io/laissezpasser/pen/MyqMgd" rel="nofollow">tapered arcs, such as are used here</a>, but I'm having trouble even getting the tapered arc shape to appear within the same div as the map.
  How do I replace L.polyline with tapered arcs from d3.svg.area?</p>
  
  <p>Here are the code changes I've made to my Sankey map (codepen link above), without success:</p>
  
  <pre><code>    d3.json('http://codepen.io/laissezpasser/pen/RaeKLQ.js', function(error, links) {
      if (error) throw error;
  
      var weightMin = d3.min(links, function(l) { return l.value }),
          weightMax = d3.max(links, function(l) { return l.value });
  
      var weightScale = d3.scale.linear()
                  .domain([weightMin, weightMax])
                  .range([0, 300]);
  
      links.forEach(function (link) {
          if (link.source != link.target) {
  
              var path = [ link.source, link.target ].join('-');
              var pathReverse = [ link.target, link.source ].join('-')
  
              var linkStyle = {
                  color: (linkLayers[pathReverse]) ? 'violet' : 'orange',
                  weight: weightScale(link.value),
                  smoothFactor: 1,
                  opacity: .5,
                  fill: false,
                  class: path                    
              };
  
              var linkCenter = L.area([ atollLayers[link.source].center, atollLayers[link.target].center ]).getBounds().getCenter();
              if (linkStyle.color == 'violet') {
                  var lineCenter = L.latLng(
                      (linkCenter.lat * .001) + linkCenter.lat, 
                      (linkCenter.lng * .001) + linkCenter.lng
                  );
              }
              else {
                  var lineCenter = L.latLng(
                      linkCenter.lat - (linkCenter.lat * .001), 
                      linkCenter.lng - (linkCenter.lng * .001)
                  );
              }
  
              var link = L.area([ atollLayers[link.source].center, lineCenter, atollLayers[link.target].center ], linkStyle);
  
              var svg = d3.select("#map").select("svg"),
              g = svg.append("g");
  
              var area = d3.svg.area()
                  .x(function(d) { return d.x; })
                  .x0(function(d) { return d.x0; })
                  .y0(function(d) { return d.y0; })
                  .y1(function(d) { return d.y1; })
                  .interpolate("cardinal")
                  .tension(0);
  
              var link = { 
                  width: weightScale(link.value),
                  offset: link.value / 2 + Math.random(),
                  };
  
              var svg = d3.select("body").append("svg")
                  .attr("width", width)
                  .attr("height", height)
  
              var path = svg.append("path")
                  .datum(toArc(link))
                  .attr("class", "area")
                  .attr("d", area);
  
              svg.append(atollLayers)
                  .attr("x", link.source.center[0])
                  .attr("y", link.source.center[1]);
  
              svg.append(atollLayers)
                  .attr("x", link.target.center[0])
                  .attr("y", link.target.center[1]);
  </code></pre>