지난 시간에 d3.js post를 쓰고 있는데 누군가 이건 실제 어디서 사용되는지 질문하는 댓글이 있어서 한번 이 이야기를 하면 좋을 것 같아서 post로 글을 남깁니다. D3.js를 공부해서 어디에 써먹고 어디서 사용되는지 잘 연상이 안되시는 분들이 있을 거에요. d3.js가 얼마나 좋은 라이브러리이고 이걸 공부하시면 나중에 어디에 사용 될 수 있는지 살펴보도록 하죠.
소개하는 예제의 경우는 D3.js 라이브러리를 이용한 실생활 예제가 아니라 이런 예제들을 D3.js 라이브러리를 이용하여 표현 할 수 있기 때문에 예를 든 것임을 참고하시고 보시기 바랍니다.
D3은 Data-Driven Documents, 데이터 기반 문서를 말하는데 데이터를 웹상에서 알아보기 쉽게 시각화 한 문서라고 생각하시면 됩니다. 데이터는 엑셀 or DB 파일을 통해 접해보셨을 거에요. 테이블 형태로 많은 데이터들이 여러개의 테이블로 복잡하게 만들어져 있는 것을요. 그리고 그 데이터 테이블에 어떤 데이터들이 있는지 그냥 테이블만 봐서는 어떤 용도의 데이터 테이블인지도 알아보기 어렵고 알더라도 이걸 불러와서 출력하더라도 시각적으로 해당 관리자가 아닌 이상 가독성이 엄청 떨어집니다. 데이터를 그냥 테이블 형태로 출력하더라도 그 데이터를 읽는 사람에게는 바로 이해하기도 힘든 경우도 많습니다. 그걸 좀 더 쉽게 이해하기 편하게 볼 수 있게 문서를 만드는 데 여기에 사용되는 함수들을 묶어 놓은게 d3.js 라이브러리입니다.
데이터를 시각화하는데 순수 자바스크립트 코딩을 하면 선하나 그리는데에도 힘이 들고 뭔가를 표현 하려고 해도 엄청 복잡한 코딩을 하게 됩니다. 어떤 분들에게는 외계어로 보일 수 있는 코딩을 쭉 써내려가야 합니다.
d3.js은 이 부분의 어려움을 도와주기 위해 최소 단위의 함수 형태로 묶어 놓은 라이브러리입니다. 하지만 d3.js 역시 쉽지 않는 코딩으 하게 됩니다. 최소 단위의 함수들을 제공하기 때문에 다양한 표현을 자유자재로 할 수 있지만 그 표현을 하기 위해서는 여기에서도 어느정도 복잡한 코딩을 진행해야 합니다.
그래서 나온데 d3.js기반의 다양한 라이브러리입니다.
다양한 라이브러리가 있지만 가장 대표적으로 쉬운 라이브러리 몇개만 소개합니다.
<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', 100, 300, 200, 400, 500],
['data2', 10, 30, 20, 40, 50]
],
type: 'bar'
}
});
</script>
</body>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.label{
font-size:22.5px;
fill:#ffffff;
text-anchor:middle;
alignment-baseline:middle;
}
.face{
stroke:#c8c8c8;
stroke-width:2;
}
.minorTicks{
stroke-width:2;
stroke:white;
}
.majorTicks{
stroke:white;
stroke-width:3;
}
</style>
<body>
<svg width="500" height="500"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script>
var svg=d3.select("svg");
var g=svg.append("g").attr("transform","translate(250,250)");
var domain = [0,100];
var gg = viz.gg()
.domain(domain)
.outerRadius(200)
.innerRadius(20)
.value(0.5*(domain[1]+domain[0]))
.duration(1000);
gg.defs(svg);
g.call(gg);
function update(){
steem.api.getAccounts(["codingman"], function(err, response){
var secondsago = (new Date - new Date(response[0].last_vote_time + "Z")) / 1000;
var vpow = response[0].voting_power + (10000 * secondsago / 432000);
vpow = Math.min(vpow / 100, 100).toFixed(2);
//console.log(vpow);
gg.setNeedle(vpow);
});
}
setInterval(update,5000);
</script>
</body>
</html>
여러개의 라이브러리를 소개했지만 이 외에도 더 많습니다.
데이터 시각화 문서는 어디에서 흔히 볼 수 있을 까요. 스티미언들이라면 다들 가상화폐는 한번씩 보셨을 거에요.
이런 차트를 d3.js 라이브러리로 구현이 가능합니다.
이 시각화 문서는 d3.js로 만들어 진것이 아니라 이런 것들도 d3.js로 표현 할 수 있다는 것을 의미 전달하기 위해 사용된 이미지입니다.
그외에도 열거하고자 한다면 수없이 많은 시각화 문서들을 보실 수 있을 거에요.
데이터라는 것은 많은 문자나 숫자로 구성된 정보들을 말합니다. 그 정보는 우리가 단순히 문자나 숫자로 보면 이해하기 어렵고 가독성이 떨어집니다. 그걸 관리하는 관리자 외에는 데이터를 해독하기에는 어렵겠죠.
하지만 이 데이터를 시각화 된 문서로 만들면 데이터의 정보를 쉽게 이해하고 분석해 낼 수 있습니다. d3.js 라이브러리는 이런 시각화 문서를 만들기 위한 최소 단위의 함수들로 구성된 라이브러리이고요. 그리고 소개한 d3.js 기반의 다양한 라이브러리들도 각각 특화된 시각화 문서를 만들어 낼 수 있습니다.
우리에게 필요한 것은 어떤 데이터를 가지고 있고 어떤 데이터를 시각화 할 것이냐만 필요 한 것이죠.
한예로 응용 했던 내용이 있습니다.
[D3.js] d3.js + vis.js + steem.js 짜집기
steem.js로 스팀 정보를 가져와서 d3.js와 viz.js 라이브러리를 이용하여 스티미언 현재 상태를 계기판을 하나 실험 예제를 만들었었습니다. 물론 약간은 짜집기 예제이지만요. 이렇게 데이터의 정보가 준비되어 있으면 시각화 하는데 최소의 코딩 지식만으로도 고퀄리티 시각화 문서를 만들 수 있으며 능력에 따라 더 멋진 시각화 문서를 만들어 낼 수 있습니다. 그리고 실전에서도 다양한 통계 분석 차트와 같은 시각화 문서나 또는 실시간 문서를 제작할 때에도 많이 사용되고 있습니다.