[D3.js] 공공데이터를 D2B.js Pie Chart로 출력
[D3.js] 공공데이터를 D2B.js Pie Chart로 출력
- 공공데이터 포털 : https://www.data.go.kr/
- table :
[D3.js] table 시각화
[D3.js] table 정렬 시각화
[D3.js] table+getbootstrap 결합
[D3.js] table의 문자열 or 숫자 정렬(수정본)
[D3.js] 공공데이터를 table로 출력
[D3.js] 공공데이터를 Pie Chart로 출력
[D3.js] 공공데이터를 D2B.js Pie Chart로 출력
지난 시간에 공공데이터 시각화 예제를 동일하게 Pie Chart로 만들어서 출력 했었는데 코딩이 좀 길었습니다. 초보분들에게는 어려울 수 있는 내용 일 수 있습니다. 그래서 D3.js 기반의 다양한 라이브러리 중 D2B.js를 이용하여 D2B.js에서 제공되는 차트 틀을 그대로 사용하고 공공데이터 정보만 출력 차트 값에 맞게 수정만 해서 간단히 Pie Chart를 만들어 보도록 하겠습니다.
1. 공공데이터를 D2B.js 형태의 데이터로 수정
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의 코딩은 끝납니다.
그럼 결과를 확인해 볼까요.
2. 실험
[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에서 실험한 예제를 그대로 사용하고 수정을 최소화 했습니다.
[결과]
마무리
실제 수작업으로 코딩하면 고퀄리 차트를 만들기에는 하직 초보자라 힘들고 이렇게 이미 만들어서 제공되는 라이브러리를 이용하며 보시는 것처럼 데이터만 수정함으로 멋진 차트를 만들 수 있게 됩니다.
공공데이터 포털에서 제공되는 다른 데이터를 가지고 한번 여러분들도 차트를 만들어 보세요.
Sponsored ( Powered by dclick )
짱짱맨 호출에 응답하여 보팅하였습니다.
짱짱맨 방문에 감사합니다.
오 ~~~ 휴양림을 ㅎㅎㅎ 공공데이터 의외로 쓸모있네요. 숙명여대 오픈 D스퀘어에 강사로 한 번 와주시면 좋겠습니다. 공공데이터 활용 못해서 엄청 고민 많거든요. 그쪽 동네요. 생각 있으시면 컨택 한 번 해드릴게요.
오~~~강사 초빙 @codingman 님 수락 가죠^^*
@urobotics님 능력자!
아직 초보자입니다. 무리한 제안임! ^^
예전에 죽돌이 했던데라서 아는 분들이 좀 계셔서요. ㅎㅎ
사실은 제가 배우고 싶어서 ㅎㅎ
d3.js 버전 3 강좌인데 이걸 보시면 d3기초 부분은 다질 수 있을거에요.
꼭 봐야하는 강좌인데 볼만 하실거에요. 이 영상 하나면 아마 충분하실거라 생각 됩니다. 제가 본 영상물 중 최고 탑 영상물인데 진짜 이분 영상물 보고 공부 시작함
유튜브 : Introduction to D3 - 강사: Curran Kelleher
오. 좋군요. ㅎㅎㅎ 오늘 한 번 보겠습니다. ㅎㅎ 감사합니다.
아직 초보고 기초를 다지고 있네요.
재미로 즐기는 거라서요
제가 관심이 있는 쪽이 3D volume Rendering이라서요. 아쉽게 이 분야로 풀어 먹지 못해서 예전에 ray casting으로 의료 단층 영상을 Rendering 해보고 난 뒤 세월이 흘러 다 까먹고 말았네요.
언젠가 다시 공부를 하긴 해야 하는데 학창 시절에 배운 기술이 사장 되어서 써먹지도 못하고 미련만 남네요
근데 원래 여기는 블록코딩 가르쳐줬어요.
요새 겨우 파이썬을 써보는 정도입니다.
강의 한 번 해보시는 것도 좋을듯요.
솔직히 말해서 @codingman 님 강의기회도 도움 되시겠지만, 저랑 다른 배우는 사람들한테 더 좋은 일입니다.
여기 수준높은 선생님 거의 없습니다.
위에 링크 걸어놓은 답글 보시고 이 영상물을 보여주시면 아마 최고의 강의가 될 듯요.
전반적인 웹기반 기초 내용과 d3.js의 기초부터 순서대로 이 영상물 하나에 다 담아놓았어요.
이분 블로그인가 여기 사이트 가시면 소스 다 제공되고요.
아무튼 이분걸 그분들에게 보여주시면 제가 하는 것보다 제대로 된 공부가 되실 듯 해요.
관심 없으시면 말고요. ㅎㅎ 거기는 공공데이터 하는 쪽이라서, 강의 퀄리티가 좋아도 컨셉이 안 맞으면 못 해요. ㅎㅎ 암튼 저는 코딩 강의는 무리고, 개발부터 제대로 ㅎㅎ 알려주신 거는 개인적으로 공부하겠습니다. 감사합니다. ㅎㅎ
보클하고갑니다^^
Posted using Partiko Android
Thank you.