CODEWITHSUNDEEP
javascriptd3.jssvg
Hyperbola
Hyperbola

Reputation: 528

Displaying a map using D3.js projection

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 console.

I suspect this has something to do with projection because when I remove the projection from the path variable, I do get a tiny map at the top of the svg. I tried Mercator, Albers and other projections but nothing seems to work.

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>India</title>
        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>

        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 500;

            var projection = d3.geoMercator()
                            .translate([w/2, h/2])
                            .scale(500);

            //Define default path generator
            var path = d3.geoPath()
                        .projection(projection);


            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            var rectangle = svg.append("rect")
                        .attr("height", h).attr("width", w)
                        .attr("fill", "transparent")
                        .attr("stroke", "black")
                        .attr("stroke-width", 1);

            //Load in GeoJSON data
            d3.json("india.json", function(json) {

                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)

        });

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

Upvotes: 3

Views: 1583

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38151

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

enter image description here

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:

enter image description here

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.

Upvotes: 6

Related Questions