오늘도 D3.js 기반의 차트 라이브러리 소개를 할까 합니다. 이번 라이브러리는 사용법이 간단하고 데이터 관련해서 입력부분만 잘 처리하면 차트 형태로 출력하는 방법은 간단해서 편하게 활용이 가능 할 듯 하네요. 한 두개정도만 테스트해서 출력해 봤는데 괜찮은 차트 형태로 시각화가 이루어져서 나쁘지 않더군요. 나중에 스팀데이터를 분석할 때 활용하면 좋을 것 같다는 생각이 드네요. 그러면 이제 C3.js 라이브러리를 살펴 봅시다.
이걸 보시고 간단히 사용법을 익히면 됩니다.
<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 블로그가 있다면 거기에 올려놓고 링크 주소로 활용하면 됩니다.
다운받아서 설치하시면 됩니다. 그냥 C3.js 홈페이지에서 상단 오른쪽 끝에 Source 항목을 눌러서 github 폴더로 가서 c3.js와 c3.css 파일만 복사해와서 만드셔도 됩니다.
보시고 해당 파일을 복사해 오셔서 실험하시면 됩니다.
함수 설명이 잘 나와 있으니깐 읽어보시고 실험하시면 됩니다.
레퍼런스보다 예제를 보고 유추해서 공부해보는게 더 빠를 수 있습니다. 쉬운 예제들로 구성되어 있어서 한번씩 돌려보세요.
line과 pie 예제를 돌려봤네요
홈페이지에서 "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>
코딩을 보면 구지 설명 할 부분은 없어 보이네요. 딱 데이터와 축에 대한 부분의 경계가 나눠져 있어서 해당 값만 수정하면 되니깐요. 그리고 축의 수치 범위는 데이터 값에 따라서 자동으로 스케일이 변경되니깐 라인 차트의 경우는 출력할 데이터의 종류와 갯수만 알아서 세팅만 하면 되네요.
[결과]
데이터 값만 바꿔서 돌려봤네요.
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에 올려서 나중에 따로 공부할 예정이네요. 여러분들도 한번 오늘 소개한 라이브러리를 이용하여 스팀 블록체인 데이터를 시각화 해보세요. 재밌는 것을 만들 수 있을 거라 생각됩니다.