Geojson map not showing up

Question

I'm struggling with creating a map. I am simply using one of the new york times geojsons ("census_tracts_2010.geojson") from here ( https://github.com/dwillis/nyc-maps ).

I'd appreciate it if someone could look at my code below, and let me know why no map is showing up for me, especially I have no errors. If something is wrong, then it's probably in the last two lines.

STEP 1 - CONVERT GEOJSON TO TOPOJSON ran this in terminal

geo2topo census_tracts_2010.geojson > nyc2.json

STEP 2 created index.html (inspired by https://bost.ocks.org/mike/map/)

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<script>

var width = 960,
    height = 1160;

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

d3.json("nyc2.json", function(error, uk) {
  if (error) return console.error(error);
  console.log(uk.objects)
  console.log(uk.objects.census_tracts_2010)
  svg.append("path")
      .datum(topojson.feature(uk, uk.objects.census_tracts_2010))
      .attr("d", d3.geo.path().projection(d3.geo.albersUsa()));


});

</script>

My output:Plain white webpage

Updated code:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<script>

var width = 500,
    height = 500;

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

d3.json("census_tracts_2010.geojson", function(error, uk) {
  if (error) return console.error(error);

  var subunits = topojson.feature(uk, uk.objects.nyct2010);

  var projection = d3.geo.albers()
   .center([0,40.7])
   .rotate([-74,0])
   .translate([width/2,height/2])
   .scale(65000);

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

    svg.append("path")
        .datum(subunits)
        .attr("d", path);
});

</script>

Andrew Reid Andrew Reid · Accepted Answer · 2017-03-05T20:38:40

Data Source

First, your referenced file is already a topopjson. You can contrast the differences with a regular geojson in this file (from the same repository).

The most visible difference is that geojson uses recognizable coordinates while topojson uses arcs and what might look like arbitrary coordinates. Topojsons also finish with scale and translate values.

The Problem

Why does your map not appear? Well that could be because of issues in topojsoning a file that is already a topojson, but a more likely option - and one that touches on your other question - is that you are not focusing your map on your area of interest. This appears to be the the issue in your previous question as well.

You are using a geo.albersUsa projection - this is by default focused on the entire continental US (it's a composite projection so it includes space for Alaska and Hawaii).

Changing your code only to use the topojson you reference (census_tracts_2010) I got:

Your map is displaying properly - or at least as coded - but the entire area of interest looks like it could be a small insect that hit the screen to fast.

AlbersUSA vs Albers

You will need to modify your map projection parameters but if you want to keep the AlbersUSA projection you will not be able to center or rotate, instead use a plain Albers projection. The AlbersUsa is intended for the entire country and I don't believe it has centering or rotation methods.

Setting Map Parameters

To set an Albers projection you'll want to know the center of latitude and longitude of your area of interest. Let's say about 40.7N and 74 W - I used Google Earth to generalize and then adjusted until I got a pleasant result.

Generally for an Albers you also want to know your standard parallels; however, in d3 the default parallels are for the US. Yes, they could be made more specific for your projection (by choosing two parallels that intersect the upper and lower portions of your area of interest), but I'll leave them out in this answer.

The general pattern for an Albers projection in D3 is:

var projection = d3.geo.albers()
   .center([0,y])
   .rotate([-x,0])
   .parallels([a,b]) // don't worry about this in this instance
   .translate([width/2,height/2])
   .scale(k);

Using the center coordinates above and a few attempts to get the scale down I got this:

Using:

var projection = d3.geo.albers()
   .center([0,40.7])
   .rotate([74,0])
   .translate([width/2,height/2])
   .scale(65000);

Note: I've modified your svg dimensions to something more appropriate to the shape of your area of interest (as opposed to the reference map dimensions in the demonstration creating a map of the UK). My dimensions are: 500 x 500.

A relatively more detailed explanation of an Albers projection's parameters is in this answer.