D3.js 를 이용하여 시각화 5개 만들기

D3.js는 웹상에서 데이터 시각화를 가능하게 하는 자바스크립트 라이브러리입니다. 뉴욕타임즈, 맥킨지, UN 등 다양한 기관에서 데이터에서 발견한 정보를 전달하기 위해 사용합니다. 우리는 D3.js 를 이용하여 가장 대표적인 5가지 시각화를 함께 만들 예정입니다.

5가지 시각화

• 라인 차트(Line chart): 시간에 따른 데이터 값의 변화를 보여줍니다
• 산점도(Scatter plot): 데이터 간의 상관관계를 파악할 수 있습니다
• 레이더 차트(Radar chart): 데이터의 패턴이나 이상치를 파악하기 쉽습니다
• 히트맵(Heatmap): 데이터 값을 컬러로 표현하여 값의 분포를 보여줍니다
• 트리맵(Treemap): 전체와 부분의 비율, 데이터의 계층관계를 보여주기에 적합합니다

실전용 시각화 실습

• 시각화에 인터랙션 더하기
• 반응형 시각화 만들기

Vite라는 프론트엔드 번들도구를 사용하였습니다. D3.js 라이브러리와 바닐라 자바스크립트(Vanilla Js)를 이용하였습니다.

Visual Studio Code라는 코드 에디터를 사용합니다. 템플렛을 실행하기 위해서 명령어를 터미널에 입력합니다.

Download Zip을 클릭하여, 템플릿을 다운받고 압축을 풉니다. 서버를 실행하기 위해서 아래의 명령어를 터미널에 입력합니다.

• npm install: 라이브러리와 도구들을 설치
• npm run dev: 서버 실행