var width=700,
height=700,
scale=5500,
x=-11900,
y=4050;
지리 좌표를 픽셀로 투영하기 위해 mercator projection 객체를 생성하고,
path 객체로 지리적 도형을 시각적으로 표현
var projection=d3.geo.mercator()
.scale(scale)
.translate([x, y]);
var path=d3.geo.path()
.projection(projection);
지도를 그리기 위한 SVG
var svg=d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("id", "map");
var states=svg.append("g")
.attr("id", "states");
states.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
path 객체를 통해 입력된 좌표 정보를 픽셀로 변환해 화면상에 도형으로 그림
states.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("class", "state")
.attr("d", path)
.attr("id", function(d){ return "path-"+d.id; });
출력된 각 시와 동의 도형 윙에 명칭을 출력(text)
var labels=states.selectAll("text")
.data(data.features)
.enter().append("text")
.attr("class", "state-text")
.attr("transform", function(d){
if(d.id==8){
var arr=path.centroid(d);
arr[1]+=30;
return "translate("+arr+")";
} else {
return "translate("+arr+")";
}
})
.attr("id", function(d){ return "label-"+d.id; })
.attr("text-anchor", "middle")
.attr("dy", ".35em")
.text(function(d){ return d.properties.Name; });