CODEWITHSUNDEEP
javascriptd3.jsgeojson
Edgar Kiljak
Edgar Kiljak

Reputation: 1190

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?

Upvotes: 1

Views: 576

Answers (1)

Kristján Jóel
Kristján Jóel

Reputation: 76

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.

Upvotes: 1

Related Questions