새벽형 인간이 되기로 한 시점에서 아침의 시간이 많이 남아서 따로 공부할 것을 찾다가 D3.js를 한번 제대로 공부해보고자 예전 기초 지식과 현재 새롭게 공부하는 내용을 토대로 정리하는 자료로 post를 작성해 볼까 합니다. 사실 아두이노 실험을 현재 사정 상 못해서 D3.js로 넘어왔네요. ^^
D3.js를 바로 시작하는 것도 좋지만 사전 학습으로 미리 공부해 놓으면 배우기가 무지 쉽습니다. D3.js은 기본적으로 자바스크립트 문법을 취하고 있으며 D3.js의 데이터 시각화 문서의 쓰이는 기본 베이스 형식이 HTML의 SVG, CSS의 표현 기능을 간단히 D3.js화 하여 표현합니다. 그래서 자바스크립트, SVG, CSS를 미리 학습해 놓으면 D3.js의 API 함수를 쉽게 이해하고 사용 할 수 있습니다.
위 참고 post를 한번 읽고 오시면 되겠습니다.
-사전 학습 : HTML, CSS. JavaScript 참고 사이트 https://www.w3schools.com/
사전 학습은 w3chools 사이트에 가셔서 기본 문법을 배워 오시면 좋습니다.
데이터 시각화 문서를 D3.js API 함수를 이용하여 간단히 표현 할 수 있습니다. 데이터를 챠트와 같은 그림으로 표현 할 때 자주 사용되는 기본 표현들을 함수 단위로 제공해 주고 있습니다. 말로만 좋다고 하는 것 보다 기본 예시를 들어 설명하는게 좋겠죠.
이 예제는 https://d3js.org/ 의 첫 페이지 예제입니다. 보면 극단적으로 비교한 예제인데 꼭 이런 코딩을 이렇게 간단히 표현 할 수 있다는 느낌을 전달한 예제이니깐 절대적 표현 비교로 보시면 안됩니다.
<body>
<p> hellow World!</p>
<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "white", null);
}
</script>
</body>
위 예제는 복잡한 표현인데 p태그의 컬러를 white로 지정하는 문장입니다. p태그의 문장이 white로 출력하면 배경색을 white계열에 가까워서 색이 뚜렷하게 안나오네요. 그래서 배경은 black으로 지정 한 후에 출력 결과가 아래와 같습니다.
위 코딩은 D3.js와 극단적으로 차이를 보이기 위한 예시로 보이네요. 꼭 위 처럼 코딩하지는 않습니다. 그냥 극단적 예시로 보면 될 듯 하네요.
d3js.org 홈페이지의 위 코딩 예시는 D3.js로 표현하면 아래와 같이 간단히 표현 할 수 있다고 장점을 소개 합니다.
d3.selectAll("p").style("color", "white");
한줄로 위 4줄의 긴 코딩을 간단히 selectAll(), style()함수로 표현을 하게 됩니다. 배경도 이 방법으로 같이 표현이 가능합니다.
그러면, 아래와 같이 "Hellow World!"라는 문장을 black에서 white 글자색으로 출력을 아래와 같이 코딩을 하게 됩니다.
<body>
<p> hellow World!</p>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
d3.selectAll("p").style("color", "white");
d3.select("body").style("background-color", "black");
</script>
</body>
이런식으로 극단적 비교하는 예시를 올라와 있네요. 극단적 표현이지만 딱 한줄로 복잡한 여러줄의 코딩을 D3.js로 줄여서 표현이 가능합니다. D3.js은 쉽게 말해서 데이터 시각화 표현들에서 자주 사용되는 표현들을 함수로 미리 만들어 놓고 제공해주는 API라고 생각하시면 될 듯 싶네요.
방금 간단히 D3.js 공식 홈페이지에 나온 예제 일부분을 가져 와서 보여 드렸습니다. 위 예제어서 추가로 D3.js 표현들이 있는데 생략을 했습니다. 가셔서 나머지 부분들을 읽어 보시기 바랍니다.
D3.js를 통한 코딩은 꽤! 단순한 형태로 코딩을 하게 됩니다. 이미 만들어 놓은 API를 이용하기 때문에 API에서 제공되는 함수만 이용해도 고퀄리티 표현을 쉽게 할 수 있습니다. 하지만 D3.js를 공부하는 것에도 어려운 점이 있네요. 그것은 버전 별 충돌입니다. 해당 함수는 해당 버전에서만 허용되는 경우들이 있습니다. 그래서, 여러분들이 사용하는 버전의 함수들이 다른 버전으로 바꿀 때 정상적으로 작동하지 않는 경우가 발생합니다. 그러면 공동 작업하는 모든 사람들이 공유된 하나의 버전으로만 코딩을 해야한 다는 점이 불편합니다. 새로운 사람이 새로운 버전으로 참여 할 경우 이전 버전 사용자들과의 소통이 약간 불편할 수 있겠죠.
그리고 또 한가지는 새로운 버전보다 구버전의 예제들이 많습니다. 당연한 이야기 이지만 D3.js에서 처음 공부하는 사람들은 자연스럽게 최신 버전 API를 사용하게 됩니다. 그런데 공부하는 사람들은 참고하는 예시들은 구버전에서 사용한 예시들이 많기 때문에 그대로 따라할 때 가끔 버전 문제로 정상적으로 작동하지 않아 해당 표현을 최선 버전 표현으로 바꾸기 위해 이중 공부를 해야 합니다. 구버전 표현을 이해해야하고 그 표현을 신버전으로 표현 할 수 있는 능력이 필요합니다. 처음 배우는 사람에게는 이 또한 큰 장벽이 될 수 있습니다.
요즘 웹사이트를 돌아 보시면 데이터 시각화 문서들은 거의 대부분 실시간 시각화 문서들이 주류를 이루고 있습니다. 과거 단순하게 챠트로 처음 페이지가 열릴 때 한번만 출력하는 고정된 문서의 형태를 취했다면 요즘은 고정된 데이터 시각화 표현에 그치지 않고 실시간 갱신으로 통한 보다 생동감 있는 시각화 문서를 만들어 보여주고 있는 이 시기에 시대의 흐름에 맞게 지식을 습득해야 겠죠. D3.js은 이런 데이터 시각화 문서에 특화된 API 함수들을 제공하고 있습니다. 이걸 사용하면 초보분들도 충분히 독학으로 데이터 시각화 문서를 만들 수 있기 때문에 배워 두시면 좋습니다. 현재 써먹는 일이 없더라도 알아두시면 나중에 도움이 되실 꺼에요.
이번에 한번 새벽 3시에 기상이고 아침 시간적 여유가 있을 때 D3.js를 제대로 공부해 볼까 합니다. 아직 과거 기초지식만 있는 상태라도 챠트 표현이 초보 수준이지만 잘 정리해서 제대로 된 결과물을 만들어 볼려고 도전해 보네요. 중간에 일정이 바뀔 수 있지만 현재는 시간 여유가 생겨서 post 형식으로 정리를 해놓으려고 합니다.