[D3.js] C3.js 라이브러리 소개
[D3.js] C3.js 라이브러리 소개
- C3.js 홈페이지 : https://c3js.org/
- 다운로드 : https://github.com/c3js/c3/releases/tag/v0.6.8
오늘도 D3.js 기반의 차트 라이브러리 소개를 할까 합니다. 이번 라이브러리는 사용법이 간단하고 데이터 관련해서 입력부분만 잘 처리하면 차트 형태로 출력하는 방법은 간단해서 편하게 활용이 가능 할 듯 하네요. 한 두개정도만 테스트해서 출력해 봤는데 괜찮은 차트 형태로 시각화가 이루어져서 나쁘지 않더군요. 나중에 스팀데이터를 분석할 때 활용하면 좋을 것 같다는 생각이 드네요. 그러면 이제 C3.js 라이브러리를 살펴 봅시다.
1. C3.js 라이브러리
첫페이지는 위와 같이 나오는데 "Getting Started" 누르면 기본 사용법이 나옵니다.
이걸 보시고 간단히 사용법을 익히면 됩니다.
링크 :
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="c3.min.js"></script>
<link href="c3.css" rel="stylesheet">
여기서 c3.min.js 와 c3.css 링크는 다운 받으셔서 실험할 해당 폴더에 넣으셔서 하면 됩니다. github로 링크 걸어놓은걸 제공해주면 좋은데 없네요. 자신이 직접 운영하는 github 블로그가 있다면 거기에 올려놓고 링크 주소로 활용하면 됩니다.
다운로드 : https://github.com/c3js/c3/releases/tag/v0.6.8
다운받아서 설치하시면 됩니다. 그냥 C3.js 홈페이지에서 상단 오른쪽 끝에 Source 항목을 눌러서 github 폴더로 가서 c3.js와 c3.css 파일만 복사해와서 만드셔도 됩니다.
- Source : https://github.com/c3js/c3
보시고 해당 파일을 복사해 오셔서 실험하시면 됩니다.
레퍼런스
함수 설명이 잘 나와 있으니깐 읽어보시고 실험하시면 됩니다.
예제
레퍼런스보다 예제를 보고 유추해서 공부해보는게 더 빠를 수 있습니다. 쉬운 예제들로 구성되어 있어서 한번씩 돌려보세요.
2. 차트 테스트
line과 pie 예제를 돌려봤네요
1) line chart
홈페이지에서 "Getting Started" 누르면 기본 사용법이 나온다고 했죠. 거기에 라인 차트에 대해서 기본 실험을 하는데 거기에 나온 첫번째 예제입니다.
출처 : "Getting Started" 예제
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="c3.min.js"></script>
<link href="c3.css" rel="stylesheet">
<body>
<div id="chart"></div> //출력
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 10, 20, 30, 40, 50, 60],
['data2', 200, 10, 150, 20, 100, 30]
],
axes: {
data2: 'y2' // ADD
}
},
axis: {
y2: {
show: true // ADD
}
}
});
</script>
</body>
코딩을 보면 구지 설명 할 부분은 없어 보이네요. 딱 데이터와 축에 대한 부분의 경계가 나눠져 있어서 해당 값만 수정하면 되니깐요. 그리고 축의 수치 범위는 데이터 값에 따라서 자동으로 스케일이 변경되니깐 라인 차트의 경우는 출력할 데이터의 종류와 갯수만 알아서 세팅만 하면 되네요.
[결과]
데이터 값만 바꿔서 돌려봤네요.
2) pie chart
pie chart 예제는 c3.js 홈페이지에서 제공되는 pie chart 예제입니다.
출처 : "Pie Label Format"예제 : https://c3js.org/samples/pie_label_format.html
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="c3.min.js"></script>
<link href="c3.css" rel="stylesheet">
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 10],
['data2', 20],
['data3', 30],
['data4', 40],
['data5', 50],
],
type: 'pie'
},
pie: {
label: {
format: function (value, ratio, id) {
return d3.format('$')(value);
}
}
}
});
</script>
</body>
데이터 2개인데 5개로 늘려봤네요. line차트라 크게 차이가 나지 않죠. pie차트 안에 각 데이터 값을 format하는 예제인데 '$'표시를 보니 나중에 스팀post에 보팅 데이터값을 계산해서 pie chart로 만들면 좋겠다는 생각이 드네요.
[결과]
마무리
오늘도 d3.js 관련해서 특정 기능을 공부할 때 찾은 라이브러리인데 괜찮은 라이브러리이서 소개를 합니다. 이외에도 엄청 라이브러리들이 많더군요. d3.js post를 해야 하는데 d3.js 기반 다른 라이브러리를 소개만 최근하고 있네요. 지금 정리 중이라서 우선 post에 올려서 나중에 따로 공부할 예정이네요. 여러분들도 한번 오늘 소개한 라이브러리를 이용하여 스팀 블록체인 데이터를 시각화 해보세요. 재밌는 것을 만들 수 있을 거라 생각됩니다.
Sponsored ( Powered by dclick )
와우 어렵지만 하나씩 따라해봐야겠네요
예제랑 래퍼런스를 보시고 연습하시면 이번 라이브러리는 어렵지 않을 거에요. ^^
짱짱맨 호출에 응답하여 보팅하였습니다.
짱짱맨은 저자응원 프로그램입니다. 더 많은 저자 분들에게 더 큰 혜택을 드리고자 스파임대 스폰서를 받고 있습니다. 스폰서 참여방법과 짱짱맨 프로그램에 관해서는 이 글을 읽어 주세요. 기업형 예비증인 북이오(@bukio)가 짱짱맨 프로그램을 운영하고 있습니다. 여러분의 증인 보팅은 큰 힘이 됩니다. Vote for @bukio
짱짱맨 방문에 감사합니다.
나중에 따라해보겠습니다.~ ^^ 디클릭하구 갑니다~
감사합니다.
움직이는 도표가 눈에 확들어 옵니다. 잘 이용하면 좋겠어요
다양한 라이브러리들이 많아서 코딩이 편해지고 다양한 차트를 만들 수 있어서 재미 있네요.
저걸 이용하여 눈으로 쉽게 알수 있는것이 많아 지겠네요
이번 라이브러리가 코딩이 좀 쉽네요.
바로 외부데이터만 읽어 올 수 있으면 쉽게 적용이 가능 할 듯 싶네요.