지난 시간에 공공데이터 시각화 예제를 동일하게 Pie Chart로 만들어서 출력 했었는데 코딩이 좀 길었습니다. 초보분들에게는 어려울 수 있는 내용 일 수 있습니다. 그래서 D3.js 기반의 다양한 라이브러리 중 D2B.js를 이용하여 D2B.js에서 제공되는 차트 틀을 그대로 사용하고 공공데이터 정보만 출력 차트 값에 맞게 수정만 해서 간단히 Pie Chart를 만들어 보도록 하겠습니다.
var chart = d3.select('.pie-chart'); //'pie-chart'인 div 태그선택
chart
.datum([ //데이터
{label: 'arc 1', value: 10, empty: true},
{label: 'arc 2', value: 20},
{label: 'arc 3', value: 30},
{label: 'arc 4', value: 40},
{label: 'arc 5', value: 50}
])
.transition()
.call(pie);
위 코딩에서 데이터 부분을 보시면 됩니다. 대충 위와 같은 식으로 데이터를 수정해야 합니다.
위그림과 같이 공공데이터는 다양한 정보를 가지고 있는데 이 정보에서 필요한 것은 휴양림명과 휴양림면적입니다.
이 두 정보를 label(휴양림명), value(휴양림면적)으로 데이터는 세팅 하도록 하겠습니다.
d3.csv("data.csv").then(function(data){
var outputData = [];
for(var i=0; i<data.length; i++) {
outputData.push({label:data[i].휴양림명, value:data[i].휴양림면적});
}
//pie chart 출력
});
위와 같이 outputData 객체변수에 label은 휴양림명으로 value은 휴양림면적으로 수정하면 원하는 데이터를 만들 수 있게 됩니다.
이렇게 하면 pie Chart의 코딩은 끝납니다.
그럼 결과를 확인해 볼까요.
[D3.js] D2B.js 라이브러리소개 post에서 기본 예제는 실험했기 때문에 전반적인 설명은 생략하겠습니다. 잘 모르시겠다는 분들은 해당 post에 가셔서 사전학습하시면 됩니다.
[전체소스]
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/d2b.min.js"></script>
<body>
<div class = 'pie-chart'></div>
<script>
var pie = d2b.chartPie().donutRatio(0.5); //내부테뒤
pie.chartFrame().size({height: 400}); //차트 크기
d3.csv("data.csv").then(function(data){
var outputData = [];
for(var i=0; i<data.length; i++) {
outputData.push({label:data[i].휴양림명, value:data[i].휴양림면적});
}
render(outputData); //Pie Chart 출력
});
function render(data){
var chart = d3.select('.pie-chart'); //'pie-chart'인 div 태그선택
chart
.datum(data)
.transition()
.call(pie);
window.onresize = function () {chart.transition().call(pie)}; //호출
}
</script>
</body>
데이터를 만들었으면 그 부분을 Pie Chart 코딩에서 수정하면 됩니다.
chart
.datum(data)
기존의 D2B.js에서 실험한 예제를 그대로 사용하고 수정을 최소화 했습니다.
[결과]
실제 수작업으로 코딩하면 고퀄리 차트를 만들기에는 하직 초보자라 힘들고 이렇게 이미 만들어서 제공되는 라이브러리를 이용하며 보시는 것처럼 데이터만 수정함으로 멋진 차트를 만들 수 있게 됩니다.
공공데이터 포털에서 제공되는 다른 데이터를 가지고 한번 여러분들도 차트를 만들어 보세요.