d3.js - D3.js で地図を描く: 適切な scale() と translate() を取得するには?

Question

ドイツの地区の地図を描きたいです。私のコードは、d3vienno http://www.youtube.com/watch?v=lJgEx_yb4u0の youtube-tutorial に従います。

ページを開くと真っ白。コードを調べると、svg 要素と g 要素があります。scale() と translate() を調整する必要があることは既にわかっています。

そこで、さまざまな値を試して、このトピックを扱っているスタックオーバーフローの投稿を読みました。

それにもかかわらず、何も機能しませんでした。手伝ってくれますか？

これはサイトです: 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");

});

ありがとう！