Geojson map not showing up Geojson map not showing up json json

Geojson map not showing up


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:

enter image description here

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:

enter image description here

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.