D3.js Network Simulation In Depth

d3.js
Written on Apr 14, 2022


Introduction

원티드 프리온보딩에서 주어진 과제 중 하나인 D3.js를 이용한 Github Starred Repo 관계망 그리기 프로젝트를 진행하면서 d3.js에 큰 흥미를 가지게 되었습니다. 처음 다뤄보는 시각화 라이브러리이라 기능 하나를 추가할 때마다 많은 자료와 문서를 찾아봐야 했습니다. 어찌어찌하긴 해내긴 했지만 코드와 동작을 보며 느껴지는 부족함에 아쉬움이 생겼습니다. 아무래도 짧은 시간 내에 구현해내느라 이해하는데 어려움이 있었기 때문에, 그 어려움을 극복하고자 문서를 톺아보며 살펴보고 정리해보고자 합니다.

사용하는 라이브러리는 d3.js입니다. d3가 가진 수많은 라이브러리 중에서도 d3-force, d3-zoom, d3-selection, d3-drag 등 추가로 필요한 모듈이라면 전부 활용해볼 예정이고 성능 향상을 위해 Canvas API로 구현해보려고 합니다.

References