이번에는 웹사이트에 차트(그래프)를 그리기 위해 필요한 라이브러리들이 다양한데 어떤 것들을 사용하고 있습니까? 보통 Chart.js나 Google Charts를 비롯해 다양한 선택지로 인해 프로젝트마다 고민에 빠지게 됩니다. 그래서 기준을 10만건이상의 데이터나 100만건의 대용량 데이터를 표시하는데 알맞은 것들이 무엇이 있을지 고객사의 질문이 있어 테스트를 진행해 보았고 그 결과를 토대로 알맞았던 차트 3가지를 소개합니다.
Apache ECharts
사용할 수 있는 차트 종류가 압도적으로 많고 GitHub 스타수도 47.8K로 엄청난 숫자입니다. 샘플 및 문서 내용도 잘되어 있습니다. (중국 Baidu사 제공)
- 관련 사이트: https://echarts.apache.org/
- GitHub: https://github.com/apache/echarts
- 100만건 데이터 샘플: https://echarts.apache.org/examples/en/editor.html?c=scatter-nebula
Plotly
Apache ECharts 다음으로 다양한 기능을 가진 라이브러리입니다. 다른 라이브러리와 다른 점은 차트에 프리핸드선이나 도형그리는 기능도 제공한다는 점입니다. (캐나다 Plotly사 제공)
- 관련 사이트: https://plotly.com/javascript/
- GitHub: https://github.com/plotly/plotly.js
- 100만건 데이터 샘플: https://plotly.com/javascript/webgl-vs-svg/#webgl-with-1-million-points
D3FC
D3.js와 연동하여 사용할 수 있으며 D3를 사용하는 프로젝트인 경우에 추천합니다. (영국 Scott Logic사 제공)
- 관련 사이트: https://d3fc.io/
- GitHub: https://github.com/d3fc/d3fc
- 100만건 샘플 데이터: https://observablehq.com/@radames/hello-regl-scatterplot
(샘플값을 다시 작성해서 1,000,000건 보기를 가능하게 함)
이 3가지를 선정한 이유
우선 SVG보다는 Canvas를 기준으로 ECharts, Plotly, D3RC 모두 공통적으로 HTML의 Canvas를 통해 차트를 생성한다는 것입니다. Canvas를 사용하지 않는 라이브러리들은 대부분 SVG렌더링을 통해 처리하는 방법이 대부분이지만, Canvas또는 SVG중 대용량 처리를 통해 차트가 생성되는지를 기준읕로 선정했습니다.
Canvas가 전체 차트를 1부터 몇개의 DOM노드에 그리는 반면에 SVG는 하나의 도형을 1개에서 몇개의 DOM노드로 렌더링합니다. 따라서 SVG는 Canvas에 비해 한번에 그릴 DOM노드 수에 맞춰 한계점까지 가게 되는 것이 상당히 빠릅니다. 참고로 5000개의 분산형 차트로 인해 브라우저가 멈추는 경우도 발생했습니다.
마지막으로 Canvas를 통해 차트를 그리는 것의 표시 건수는 개선되었지만, 100만건 표시는 그것만으로는 한계가 있습니다. Canvas에는 몇가지 모드가 있는데 그 중에서 2D모드를 사용하고 있는지, WebGL모드를 사용하는지에 따라 달라집니다.
2D의 경우 CPU기반에 의해 처리되지만, WebGL의 경우, GPU가 사용됩니다. 렌더링 처리에 알맞은 GPU에 의존해서 처리되는 건수도 당형히 높아집니다. 또한 Apache ECharts처럼 2D를 사용하면서 렌더링하는 방법을 고민해보면 WerGL에 가까운 결과를 내고 있는 라이브러리도 있습니다.
정리
실무에서는 대부분 어떤 라이브러리를 사용해도 문제는 거의 없었습니다. 다만 이런 대량의 데이터를 표시하는데 필요한 라이브러리가 있다는 사실도 알고 있다면 나중에 사용할 기회가 있을 것입니다.
