c3.js를 이용한 데이터 시각화/Wanna Be 컴잘알

C3란?

간단히 말해서 D3 기반 재사용 가능 차트 라이브러리이다.

 

C3.js의 장점은 d3.js에 비해 사용방법이 간단하고 결과 차트또한 d3는 개인적으로 투박한 느낌이 이었는데 c3는 hover, value 값 표현 등 css가 적용되어 d3에 비해 상당히 세련된 느낌이었다.

 

 

C3.js 갤러리 : https://c3js.org/examples.html

C3.js | D3-based reusable chart library

홈페이지에서는 차트별 예시코드, 축, 데이터 input 방식 등등 여러가지 정보를 제공하고있다.

 

 

아래의 결과는 샘플데이터 총 152개로 새로운 입력이 들어올때마다 해당 입력이 이상점인지 아닌지 체크를하여 이상점인경우 해당 인덱스 부분을 빨갛게 색칠하도록 만들었다.