「plotly.js」도구상자형 차트 라이브러리

 

plotly.js는 눈금자 배경에 어울리는 차트 라이브러리다.

숫자 표현이 과감하고, 그래픽이 화려하지 않다. 색감 역시 채도가 낮고, 수식표현이 최적화 된 느낌이다. plotly.js의 강점은 디자인이 아닌 '사용자 기능'에 있다. 가령, 아래 차트를 보자. 

 

(티스토리 스킨과 충돌하며 검은색 차트가 표시됨)

 

 

차트에 커서가 올라갔을 때, 도구상자가 나타난다. 도구상자는 캡처, 줌, 마키툴, 등.. 간단한 툴박스를 제공한다. 하지만 사용자가 차트 디자인을 편집할 만한 수준이 아니며, '확대-축소' 정도가 사실상 끝이다. 이는, 기능이 과도하게 부담스러운 라이브러리와 대척점에 있다고 볼 수 있다.

 

plotly.js는 '도구상자형'을 강조하고 있지만 사용자 입장에서 느끼는 장점은 noSQL 데이터 구조다. ploty.js의 데이터 구조는 자바스크립트 유저에게 익숙하다. 웹에서 사용하는 json 데이터 파일도 대부분 아래 구조이므로 빠르게 차트를 표현할 수 있다.

 

https://plotly.com/javascript/bar-charts/#grouped-bar-chart-with-direct-labels

 

noSQL 데이터 구조를 빠르고 간단하게 차트를 표현해야 한다면, plotyl.js가 적합한 선택이 될 수 있다.