title: GeoJSON mapping discrepancies between d3 and Leaflet
body: <p>My objective is to use d3 to generate svg paths for each feature in a given GeoJSON feature collection.</p>
  
  <p>When I map the paths using leaflet, all the features look perfect.</p>
  
  <pre><code>d3.json("ct_counties.geo.json", function(data) {
      var leaflet_paths = leaflet_map.addLayer(new L.GeoJSON(data));
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ko0rw.png" alt="two maps"></p>
  
  <p>But when I map the paths using d3, some of the features look wrong. </p>
  
  <pre><code>d3.json("ct_counties.geo.json", function(collection) {
      var bounds = d3.geo.bounds(collection);
  
      var path = d3.geo.path().projection(project);
  
      var feature = g.selectAll("path")
          .data(collection.features)
        .enter().append("path")
          .attr('class','county');
  
      d3_map.on("viewreset", reset);
  
      reset();
  
      function project(x) {
        var point = d3_map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
        return [point.x, point.y];
      }
  
      function reset() {
        var bottomLeft = project(bounds[0]); 
        var topRight = project(bounds[1]);
        svg.attr("width", topRight[0] - bottomLeft[0])
          .attr("height", bottomLeft[1] - topRight[1])
          .style("margin-left", bottomLeft[0] + "px")
          .style("margin-top", topRight[1] + "px");
        g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
        feature.attr("d", path);
      }
  });
  </code></pre>
  
  <p>View the map differences <a href="http://s2t2.github.com/freezing-bear/" rel="noreferrer">here</a>.</p>
  
  <p>And refer to the full code <a href="https://github.com/s2t2/freezing-bear/blob/master/index.html" rel="noreferrer">here</a>.</p>
  
  <p>Since both maps use the same feature collection, why is the d3 version wrong?</p>