본문 바로가기

Javascript

D3.js 현재 보면서 느끼는점 (version 7)

데이타의 Visualization은 이제 기본이다.

 

기획자 입장에서는 좀 더 interactive한 화면을 기획해야 하고,

개발자 입장에서는 좀 더 힘들어지는 부분이다.

회사에서 Backend / Frontend개발자가 구분되어 있는 경우도 있지만

  • Frontend개발자도 html/css의 publishing을 주로 역활을 하고,
    다양한 차트의 Interact에 대해서는 개발자가 진행하는 경우가 많다.
  • 세상에는 다양한 오픈소스 차트 Library가 있고, 유료로 제공되는 js들도 많이 있고, 사용률이 높다.

그중에서 좀더 다양한 화면을 구현할때, 검토하는 것이 d3.js이다.

 

처음 d3.js를 검색하고, https://d3js.org/ 에 들어가면, 어떤 느낌이 드실지 모르겠다.

Step1) 접속후에 90%의 개발자는 example을 보면서 내가 구현해야 하는 차트 및 Look&Fill을 보면서 간보기가 시작된다.
          https://observablehq.com/@d3/gallery

Step2) 테스트를 해보고 싶다면, 마음에 든다면 연동 규격, 구현 방식을 살펴볼것이다.

Step3) 자, 이제 샘플코드를 접속한다.

          가장 일반적인 bar 차트를 클릭하고, 해당 페이지에 접속하였다.

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

         

      코드를 보고 해당 코드를 그대로 복사 해서 사용해야지 하는 개발자는 잠시 혼돈에 빠지실거에요

      쉽게 Copy&Paste가 될 줄 알았는데, 조금 시도해보신 개발자 분이라시면 고민하게 되십니다.

      d3.js를 계속 진행해야 할지, 아니면 다른 Library를 검토해야 할지