13장 풀이 13.4.1

<예제 13.4.1 풀이>

SVG 캔버스는 다음과 같이 지정한다.

var w = 1000, h = 700;

var svg = d3.select(“body”).append(“svg”).attr(“width”, w).attr(“height”, h);

 

구간별 컬러 지정은 다음과 같다.

var color = d3.scaleThreshold()

.domain([0, 100, 200, 400, 700, 1000, 1300])

.range([“#ffffd9″,”#edf8b1″,”#c7e9b4″,”#7fcdbb”,”#41b6c4″,”#1d91c0″,”#225ea8″]);

범례의 지정을 위한 코드는 다음과 같다.

var legend = svg.append(“g”).attr(“class”, “key”)

.attr(“transform”, “translate(500, 40)”);

legend.selectAll(“rect”)

.data(color.range().map(function(d) {

d = color.invertExtent(d);

if (d[0] == null) d[0] = x.domain()[0];

if (d[1] == null) d[1] = x.domain()[1];

return d;

}))

.enter().append(“rect”).attr(“height”, 8)

.attr(“x”, function(d) {return x(d[0]);})

.attr(“width”, function(d) {return x(d[1]) – x(d[0]);})

.attr(“fill”, function(d) {return color(d[0])});

legend.append(“text”)

.attr(“class”, “caption”)

.attr(“x”, x.range()[0] – 5)

.attr(“y”, -6)

.attr(“fill”, “#000”)

.attr(“text-anchor”, “start”)

.attr(“font-weight”, “bold”)

.text(“인구 구간”);

legend.call(d3.axisBottom(x)

.tickSize(13)

.tickValues(color.domain())

.tickFormat(function(x) {return x === 1300 ? x + “만명” : x;}))

.select(“.domain”)

.remove();

json 파일과 지리 데이터는 다음과 같이 읽는다.

d3.queue().defer(d3.json, “KOR_adm1.json”).defer(d3.csv, “EX130401.csv”).await(ready);

지도를 그리는 메소드는 다음과 같다.

function ready(error, kor, popData) {

if (error) throw error;

//Path projection

var proj = d3.geoMercator().center([128.0, 35.9]).scale(4000).translate([w / 2, h / 2]);

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

//Make an array of population for each province

var popByID = {};

var population;

popData.forEach(function(d) {

if (gender === “Male”) {

population = +d.남자;

} else if (gender === “Female”) {

population = +d.여자;

} else {

population = +d.전체;

}

popByID[d.ID_1] = population;

});

//Generate Map

var provinces = topojson.object(kor, kor.objects[‘KOR_adm1’]);

svg.selectAll(‘path’).data(provinces.geometries).enter().append(‘path’)

.style(‘fill’, function(d) {return color(popByID[d.properties.ID_1]);})

.attr(‘d’, path).attr(‘class’, ‘province’).attr(“transform”, “translate(-300, -100)”);

}

EX130401.htm 파일을 만든 후 크롬으로 실행하면 <그림 12.4.1>과 같다.

<그림 13.4.1> 지리 정보 그래프

Leave a Reply

Your email address will not be published. Required fields are marked *