D3.js 를 사용하여 데이터 시각화하기 #1 Line Charts

Explanation

요즘은 다양한 차트 라이브러리들이 정말 많은 기능들을 제공해줘서 편리하게 사용할 수 있는데요, 그런데 아주 세세하게 커스텀을 하다보면 아무래도 아쉬운 부분을 찾게 되는거 같아요. 그래서 알아보던 중.. 깃허브 레파지토리 스타 랭킹 7등에 빛나는 D3.js에 대해 알아보려 합니다.

인터넷을 통해 몇몇 예제들을 검색해봤는데, 대부분 3 버전의 예제들이 많았습니다. 지금 5 버전까지 릴리즈 되어 있는데 말이죠.. 처음에는 5버전의 API를 차례차례 볼까 생각했는데… 생각보다 코드의 볼륨이 엄청 커서, 순서를 바꿔서 간단한 예제 코드들을 보면서 API에 대해 알아보려 합니다.

참고 : D3 API Reference

오늘 처음 해본 거라 글에는 수많은 추측과 오류를 담고 있습니다.

1. 예제 코드

예제 코드 출처
https://beta.observablehq.com/@mbostock/d3-line-chart

아래의 코드는 위 예제 코드를 아주 조금 수정한 내용입니다.

2. 코드 분석

이 부분은 그려질 차트의 너비와 높이, 그리고 위아래 좌우의 여백값 그리고 그래프를 그릴 데이터 값입니다.
이번 예제에서는 여기의 date는 X축으로 사용되고 value는 Y축으로 사용될 거에요.

약간의 특징적으로 d3.js는 몇개의 비표준 브라우저를 위한 메서드를 제외하고는 전역에 ‘d3’만 사용하여, 모든 기능이 네임스페이스 ‘d3’에 물려있다고 합니다.

이제부터 머리가 아프기 시작합니다..

이어서…

단어 그대로 axis는 중신선을 말하고 xAxis는 X축의 중심선, yAxis는 Y축의 중심선을 의미합니다. 그리고 ticks은 X축, Y축 중심선에 구간을 나누는.. 그것…을 말합니다.

이어서…

거의 다 왔습니다…

마지막…

3. 마치며

아주 많은 잘못된 설명이 포함되어 있을 수 있습니다. 잘못된 부분은 댓글로 알려주시면 감사하겠습니다 :)
이후에 조금 더 알게되면 계속 수정하도록 하겠습니다.

Leave a Reply