Displaying a map using D3.js projection

Question

I\'m trying to display India\'s map using D3.js and this geoJSON file. When I run the following HTML file in the browser, the map doesn\'t get generated, with no error on the co

Answer 1

When I use your code, changing only the geojson of India to a geojson of the world, I get this:

The map is focused at [0,0], off the east coast of Afrcia. This is the default focus point of most projections in d3. This is also why you don't see anything in your viewport and don't see any errors.

If you set your center, to say (off the top of my head) [80,25] you'll be much more centered on India:

       var projection = d3.geoMercator()
                        .center([80,25])
                        .translate([w/2, h/2])
                        .scale(800);

There are different ways to center a Mercator map, including using a rotation of the projection. Likewise, different map projections may be centered using different parameters or methods.

Using your code with with this modification (.center([80,25])) and a little bit of zooming in (.scale(800)) gets me:

A more precise method would be to find the centroid of India (online certainly) as the centering point rather than my guestimate.

Whenever you can't see what you had hoped to, check the DOM to see if it was drawn (but is only off screen) or zoom out to see if you are looking at the wrong place.

Why would the map project without a projection? Because the lat long pairs are interpreted as pixel locations on the svg, which is why the map is tiny when you don't define a projection for the geoPath.