Edgar Kiljak Edgar Kiljak - 1 month ago 9
Javascript Question

d3.js projection scale doesn't increase a size of a country

I'm trying to build something with d3.js and GeoJSON for the first time. I have managed to get a country - Estonia to be displayed but it is so small you can barely see it. I tried to play with projection geoMercator().scale but it doesn't work - no increase in size.

Please see a picture attached below(under bar chart):

enter image description here

Here is my js:

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

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



var w3 = 2000;
var h3 = 1500;

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


d3.json("estonia.json", function (json){
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", "#2294AA");
})


What am I doing wrong?

Answer Source

I took your code and saw that when I increased the scale, Estonia disappeared. Had to center the projection like this:

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

I took the coordinates [24.312863, 57.793424] from the .json file.