0

I'm attempting to create a dynamic map with d3. I converted a shapefile to geoJSON, then tried to create a svg image and bind my geoJSON data using d3. All that is visible on my page is a blank or white svg image (700 x 700). How do I reveal the map? Code shown below:

$(function() {

var canvas = d3.select("body").append("svg")
  .attr("width", 700)
  .attr("height", 700)

d3.json("nysd.geojson", function(data) {
  var group = canvas.selectAll("g")
    .data(data.features)
    .enter()
    .append("g")

  var projection = d3.geo.mercator().scale(5000).translate([0,1980]);
  var path = d3.geo.path().projection(projection);

  var areas = group.append("path")
      .attr("d", path)
      .attr("class", "area")
      .attr("fill", steelblue);
});

});
seamlessTL
  • 69
  • 3
  • 6
  • for starters, the file extension should be json, not geojson. – rysloan Sep 04 '13 at 05:57
  • Most likely, the scale and translation isn't suitable. See [this question](http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object) for how to center and scale appropriately. – Lars Kotthoff Sep 04 '13 at 07:58

0 Answers0