0

I'm have a geojson file of the wards of Chicago and I'm trying to render it on the browser using d3. Here is the geojson file.

You click on export, then you'll see download geojson. Also here is the js script I have to render it. : 

<script>
  var geoCanvas = d3.select("body").append("svg")
    .attr("width", 1000)
    .attr("height", 1000)

  d3.json("wards-chi.geojson", function(data) {

    var group = geoCanvas.selectAll("g")
      .data(data.features)
      .enter()
      .append("g")

    var projection = d3.geo.mercator().scale(100000);
    var path = d3.geo.path().projection(projection);

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


  });
</script>

And here is how it is rendered.

Whats rendered is nothing, at least nothing is visable or showing

I also used this tutorial, pretty much verbatim.

Mitch Kroska
  • 325
  • 4
  • 15
  • 2
    You need to center your projection to your geojson. See this question [here](http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object). I've applied it to your code [here](http://plnkr.co/edit/TKVg7QltzJyQiwT61Fhk?p=preview). – Mark Apr 09 '16 at 21:15
  • Awesome! thanks a bunch. – Mitch Kroska Apr 09 '16 at 23:37

0 Answers0