간단한 D3 (Line, Bar)차트

이런 차트를 만들어 보자.

모름지기 커스텀의 매력은 내 맘대로 하고 싶은대로 할 수 있다는 것이다.

D3는 능력만 된다면, 엄청난 자유도를 제공한다. 근데 그럴 능력이...? 

이번엔 쉽고 요상한거 하나 만들어보자.

 

대부분의 차트에서는 series 기능을 제공하는데, 대개 한가지 형태의 차트만으로 series 기능을 제공하거나, 시리즈마다 다른 데이터를 이용해 차트를 그리는 것이 불가능하다.

우린 그게 되는걸 만들어 볼 것이다. 근데 이거 하고 나면 다른데서 왜 굳이 이 방식을 안 쓰는지 알 수 있다. 하하하 게다가 귀찮으니까 대충 만들거다. 커스텀은 알아서들 하시라 하하하.

---

D3 example 에서 제공하는 basic 예제 중 위 두 가지를 이용한다. 아래 링크를 걸어둘테니 참고하시길.

기본적으로 직교좌표 형태를 따르는 두 차트이기 때문에 앞선 글에서 설명했던 것과 구조는 동일하다.

차트(=SVG) = x축 + y축 + 내용물

사실 x축이나 y축을 그리는 것은 선택사항이지만... 있는게 가독성 측면에서 더 낫지 않나 싶다.

어쨌든 다른 형태의 차트를 여러 번 그리고 싶다면, 차트 내용물을 다르게 여러 번 추가하면 될 것이다.

이렇게! (위 : line, 아래: bar)

같은 직교(데카르트/카티시안)좌표계를 따르는 모든 차트는 위와 같은 방식으로 해당 차트 영역에 덧씌워 그릴 수 있다. 쩔죠? 근데 안이쁨. 

---

y축 점선을 지정하는 부분.

domain은 y축의 범위를 어느정도로(수치값) 그릴 것인지를 지정하고,
range는 y축의 pixel 값의 범위를 지정한다.

그냥 코드로만 보고 넘어가도 무방할 것 같을 부분을 왜 굳이 설명하냐면, 이 부분(domain)이 여러 데이터를 가지고 차트를 그리고자 할 때 미친듯이 데이터 처리를 많이 필요로 하기 때문이다.

여러 많은 데이터를 가지고 각각의 차트를 그리고자 한다면, y축의 domain 값을 지정하기 위해 모든 데이터를 합치는 과정이 필요하고 아니면 min/max 값을 받아오던가, 이는 적어도 데이터 총량만큼의 오버헤드를 가지게 한다. 

데이터의 크기가 작다면 상관이 없는데... 몇 만건씩 되고, 실시간으로 데이터가 바뀐다고 생각해보자. 몹시 심히 매우 베리 짜증난다.

갸아아아아아앍!!!!

남들이 안쓰는덴 이유가 있는 법이다.  x축도 마찬가지다. x축은 대개 시간을 사용할테니 같은 값을 이용할테니 상관 없겠지만 뭐... 아닐수도 있잖아...

그래도 아예 못써먹을 것은 아닌게, 넘겨줄 데이터 중 어떤 데이터가 가장 큰지 알 수 있다면 예를 들면 총계 굳이 모든 데이터를 합치는 과정이 필요가 없을 것이다. 물론 제한적인 사용일테니, 대부분의 차트 라이브러리에서는 구현해놓지 않은 모양이지만...

 

어... 큰일났다. 실제 이 부분에서 남은건 대개 활용인지라 딱히 더 할 말이 없다. 

ng-blog.zip

0.13MB

위의 차트를 그리는 앵귤러 코드이다. for-blog 컴포넌트를 보면 된다. 그 외에도 블로그에 뭔가 적으려고 이것저것 컴포넌트를 추가해 놨는데 똥덩어리니까 무시하면 된다. 

* 2020/07/24 추가.
지금 보니 너무 못짰는데... 가능하면 저 소스말고, ObservableHQ에서 예제를 찾아서 보는 걸 추천한다.

---

https://github.com/d3/d3/wiki/Gallery

d3/d3

https://observablehq.com/@d3/bar-chart

Bar Chart

https://observablehq.com/@d3/line-chart

Line Chart