Britecharts: d3.js v4 기반의 차트 라이브러리

JavaScript Weekly라는 이메일 리스트를 구독하고 있습니다. 매주 새로운 라이브러리, 행사, 뉴스 등 자바스크립트 관련된 소식을 전해주는 이메일 리스트입니다. 

오늘 내용 중에 "Britecharts: A D3.js-Based Client-Side Charting Library"라는 제목이 눈에 띕니다. 회사에서 자료를 도표로 만드는 일을 많이 합니다. 그래서 Chart Library에 관심이 많습니다. 

초기에는 D3.js를 이용해서 직접 그래프를 그리는 것을 주로 했습니다. 그러다보니 자주 쓰는 bar chart, line chart, pie chart 등은 제가 맘에드는 방식으로 함수를 만들어서 쓰곤했습니다. 여기에 crossfilter를 접목시켜 필터 기능을 넣다보니 DC.js를 알게되었고 그 후로 계속 DC.js를 쓰고있었습니다. DC.js도 기본적인 bar, line, pie, stack 등 여러 차트는 이미 구현되어 있어서 사용하기 쉽습니다. 

Britecharts는 새로운 점이 무엇인지 알아보기 위해 이메일리스트에 있는 링크를 클릭해봤습니다. 홈페이지에 다음과 같이 써있습니다.

Based on D3.js v4 and built around reusable components, Britecharts makes it easy to declaratively build charts and visualizations, such as this. There’s lots of info in this introductory post too.

D3.js를 이용한 차트 라이브러리는 이미 여러 종류가 있습니다. 그냥 검색만 해도 C3, NVD3 등이 나옵니다. 하지만 큰 차이점이라면 BriteChart는 D3.js v4를 쓴다는 점입니다. 기존의 라이브러리들은 아직 D3.js v4로 바꾸지 않았습니다. 

D3.js v4의 가장 큰 변화는 모듈화입니다. 기존 v3는 하나의 파일에 모든 기능을 다 포함하고 있었기 때문에 필요 없는 모듈도 다 함께 읽어들여야 했습니다. 하지만 v4에서는 원하는 것만 읽어들일 수 있기 때문에 훨씬 가벼워졌습니다. 

Britecharts의 특징은 reusability, composability, fully tested, ES2015 code입니다. D3.js v4를 이용하다보니 Britecharts도 컴포넌트로 구성되어 있고, 이로 인해 재사용성도 늘어난 것으로 보입니다. 

사용방법은 아래와 같이 간단합니다.

barChart
    .width(500)
    .height(300);

barContainer.datum(dataset).call(barChart);

기존에 사용하는 DC.js에 현재까지는 만족을 하고 있습니다. 실제 프로젝트에 이용할지는 좀 더 지켜봐야할 것 같습니다.