Unable to display a JSON map using d3.js

Question

I am trying to display a JSON map using d3.js but nothing appears on the browser.

The JSON file has the following content:

{  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "id":"CYP",
         "properties":{  
            "name":"Cyprus"
         },
         "geometry":{  
            "type":"Polygon",
            "coordinates":[  
               [  
                  [  
                     33.973617,
                     35.058506
                  ],
                  [  
                     34.004881,
                     34.978098
                  ],
                  [  
                     32.979827,
                     34.571869
                  ],
                  [  
                     32.490296,
                     34.701655
                  ],
                  [  
                     32.256667,
                     35.103232
                  ],
                  [  
                     32.73178,
                     35.140026
                  ],
                  [  
                     32.919572,
                     35.087833
                  ],
                  [  
                     33.190977,
                     35.173125
                  ],
                  [  
                     33.383833,
                     35.162712
                  ],
                  [  
                     33.455922,
                     35.101424
                  ],
                  [  
                     33.475817,
                     35.000345
                  ],
                  [  
                     33.525685,
                     35.038688
                  ],
                  [  
                     33.675392,
                     35.017863
                  ],
                  [  
                     33.86644,
                     35.093595
                  ],
                  [  
                     33.973617,
                     35.058506
                  ]
               ]
            ]
         }
      }
   ]
}

And my html file is shown below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
    </head>

    <body>
        <script type="text/javascript">
            var width = 960,
                height = 500;

            var projection = d3.geoEquirectangular()
                .center([-30, -17 ])
                .scale(3000)
                .rotate([-180,0]);

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

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

            var g = svg.append("g");

            d3.json("https://raw.githubusercontent.com/johan/world.geo.json/master/countries/CYP.geo.json", function (topology, error) {
                g.selectAll("path")
                    .data(topology.features)
                    .enter()
                    .append("path")
                    .attr("d", path);
            });
        </script>
    </body>
</html>

Any thoughts what I might be doing wrong?

Pierre Capo · Accepted Answer · 2018-07-18 13:20:15Z

It seems that there was an issue with your scale and center point. According to the d3-geo API, there is the method fitSize, which allows you to place easily on your projection inside a container.

Here is a snippet with (data is hardcoded inside it) :

var data ={  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "id":"CYP",
         "properties":{  
            "name":"Cyprus"
         },
         "geometry":{  
            "type":"Polygon",
            "coordinates":[  
               [  
                  [  
                     33.973617,
                     35.058506
                  ],
                  [  
                     34.004881,
                     34.978098
                  ],
                  [  
                     32.979827,
                     34.571869
                  ],
                  [  
                     32.490296,
                     34.701655
                  ],
                  [  
                     32.256667,
                     35.103232
                  ],
                  [  
                     32.73178,
                     35.140026
                  ],
                  [  
                     32.919572,
                     35.087833
                  ],
                  [  
                     33.190977,
                     35.173125
                  ],
                  [  
                     33.383833,
                     35.162712
                  ],
                  [  
                     33.455922,
                     35.101424
                  ],
                  [  
                     33.475817,
                     35.000345
                  ],
                  [  
                     33.525685,
                     35.038688
                  ],
                  [  
                     33.675392,
                     35.017863
                  ],
                  [  
                     33.86644,
                     35.093595
                  ],
                  [  
                     33.973617,
                     35.058506
                  ]
               ]
            ]
         }
      }
   ]
}

  
var width = 960,
height = 500;

var projection = d3.geoEquirectangular().fitSize([width, height], data); // adding fitSize method instead of center and scale.


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

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

var g = svg.append("g");

    g.selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
        .attr("d", path)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>

Collectives™ on Stack Overflow

Unable to display a JSON map using d3.js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related