Draw a map with D3.js: How to get the right scale() and translate()?

Question

I want to draw a map of german districts. My code follows the youtube-tutorial of d3vienno http://www.youtube.com/watch?v=lJgEx_yb4u0.

When I open the page, it is blank. When I inspect the code, the svg and g elements are there. I already know that I have to adjust scale() and translate().

So I tried different values and read posts here on stackoverflow that a dealing with the topic.

Nevertheless, nothing worked. Can you help?

This is the site: http://test.schafott.net/hogn/bayern.html

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

d3.json("data/gemeinden_bayern.geojson", function(data) {


var group = canvas.selectAll("g")
    .data(data.features)  
    .enter()
    .append("g")

var projection = d3.geo.mercator().scale(7300).translate([0, 1980]); 

//path generator
var path = d3.geo.path().projection(projection); 

//append to path to each "g" element
var areas = group.append("path")
    .attr("d", path) //data comes from path generator
    .attr("class", "area") //CSS
    .attr("fill", "steelblue");

});

Thanks!

Have you seen [this question](http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object)? — Lars Kotthoff, Oct 02 '13 at 10:15

score 0 · Accepted Answer · answered Oct 02 '13 at 10:51

0

have a look at this bl.ock based on your example, it's not been centred using the code as in the question Lars has pointed to. Btw you should definitely read that question and answer.

answered Oct 02 '13 at 10:51

user1614080

2,854
1
19
22

oh, that's cool! Thanks a lot. So the curcial thing is to include center()? If yes, where do I get the coordinates for it? just choose something from my dataset? I appreciate :) – kabr Oct 02 '13 at 11:55

Draw a map with D3.js: How to get the right scale() and translate()?

1 Answers1