Creating a d3 map of nyc boroughs using JS and a geojson file

Question

I've been trying to create a d3 map for weeks meshing tutorials with code. Here is my html code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
  <title></title>
   <script type="text/javascript"  src= "d3.min.js">
      Modernizr.load({
            test: Modernizr.svg && Modernizr.inlinesvg,
            yep : [ 'd3.min.js',
                    'js/script.js' ]
        });
   </script>
</head>

<body>
  <script src="NYC_MapInfo.geojson"></script>

  <script>

   var width = 960, 
       height = 1160;

  var projection = d3.geo.mercator()
      .scale(500)
      .translate([width / 2, height / 2]);

  var path = d3.geo.path()
      .projection(projection);


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

  d3.json("NYC_MapInfo.geojson", function(error, NYC_MapInfo) {
    svg.append("path")
        .datum(NYC_MapInfo.feature(NYC_MapInfo, NYC_MapInfo.objects))
  .attr("d", path);
});

     </script>
    </body>
</html>

Here is the link to the json file:

Can someone please help me fix the code to load a image?

here is a link that might help you see the code: http://0.0.0.0:8000/nyc_zipmap.html

score 0 · Accepted Answer · edited May 23 '17 at 11:50

You're loading your geometry from GeoJSON file, so this is how you draw those polygons:

svg.selectAll("path")
   .data(NYC_MapInfo.features)
   .enter()
     .append("path")
     .attr("d", path);

What this code does it creates path for each single element found under "features" in your geojson file. Then uses the path function you already have to correctly draw them.

Once you do that, you'll find out that you cannot still see anything and that's because your map is centered on the wrong part of the world, so NYC is outside of your viewport. You can use d3 to find out exactly where you have to position your map, and how much it has to be zoomed. But that's bit more complicated. So quick solution is to zoom in your map little more.

var projection = d3.geo.mercator()
  .scale(10000)
  .translate([width / 2, height / 2]);

and then wait with creating your path function until the GeoJSON is loaded. Because then you can found center of it with d3.geo.centroid function.

var center = d3.geo.centroid(NYC_MapInfo);
projection.center(center);

var path = d3.geo.path().projection(projection);

The full code that displays NYC is:

<script>

  var width = 960, 
      height = 1160;

  var projection = d3.geo.mercator()
    .scale(10000)
    .translate([width / 2, height / 2]);

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

  d3.json("NYC_MapInfo.geojson", function(error, NYC_MapInfo) {

    // after loading geojson, use d3.geo.centroid to find out 
    // where you need to center your map
    var center = d3.geo.centroid(NYC_MapInfo);
    projection.center(center);

    // now you can create new path function with 
    // correctly centered projection
    var path = d3.geo.path().projection(projection);

    // and finally draw the actual polygons
    svg.selectAll("path")
      .data(NYC_MapInfo.features)
      .enter()
      .append("path")
      .attr("d", path);
  });

</script>

You might need to fiddle with projection center and scale to display it properly. Look into this thread for more details how to do that with code.

do you know how to upload a csv file into a d3 map? – George Nwankwo Mar 14 '16 at 19:20 — George Nwankwo, Mar 14 '16 at 19:20

Creating a d3 map of nyc boroughs using JS and a geojson file

1 Answers1