데이타의 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를 검토해야 할지
- 아래 글을 한번 봐주세요
- https://talk.observablehq.com/t/i-want-to-learn-d3-i-don-t-want-to-learn-observable-is-that-ok/1957
- 저랑 동일한 고민을 한 여러 개발자들이 있다는 점에서 이야기를 이어나가겠습니다.
'Javascript' 카테고리의 다른 글
JS(javascript) 객체 생성 관련 (0) | 2022.05.16 |
---|---|
javascript (prototype, __proto__) (0) | 2022.04.11 |
이 사이트는 어떤 js framework (spa) 를 사용하고 있을까? (0) | 2021.09.08 |