I am currently working on creating a world map using D3. I obtained the JSON file from the following link: https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json
Below is the code snippet I'm using:
// Defining SVG dimensions
var width = 800;
var height = 500;
// Setting SVG attributes
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("/map.json", function(error, map) {
if (error) return console.error(error);
console.log(map);
svg.append("g")
.data(map.features)
.enter().append('path')
.attr("class", function (d) {
return d.properties.name;
})
.attr('d', d3.geo.path().projection(d3.geo.mercator()));
});
On running this code locally, each country's path is displayed correctly like this:
path class="Angola" d="M522.7427503528568, -- etc.
I've experimented with different projections to showcase the map, but so far I haven't been successful. The path for each country is rendering as 0px by 0px.
Your assistance would be greatly appreciated! :)