D3.js는 데이터 기반 문서를 조작하기 위한 JavaScript 라이브러리입니다.
데이터 가시화에 효과적인데요, 이번 글에서는 D3 차트를 그려보도록 하겠습니다.
D3 공식 홈페이지는 아래와 같습니다.
D3.js - Data-Driven Documents
https://d3js.org/
D3는 데이터 기반 문서(Data-Driven Documents)의 약어로, zip 파일로 최신 버전을 다운로드 받으실 수 있습니다.
일단 이 zip 파일을 내 PC에 다운로드받고 압축을 풀도록 하겠습니다. 저의 경우, 'C:\d3' 폴더로 설정하였습니다.
공식 홈페이지 상단 메뉴에서 Examples를 클릭하시면 다양한 데이터 가시화 예제를 경험하실 수 있습니다.
여기서는 '기본 차트(Basic Charts) > 다중계열 선형 차트(Multi-Series Line Chart)'를 그려보도록 하겠습니다.
다중계열 선형 차트(Multi-Series Line Chart)
http://bl.ocks.org/mbostock/3884955
아래와 같이 구현을 위한 index.html과 data.tsv 소스 코드를 제공하고 있습니다. 참고로, TSV는 Tab Separated Values의 약어입니다.
위 코드를 소스 코드 편집기(예: Notepad++)에서 붙여넣기 하여 D3 폴더 내에 위치하도록 합니다(예: C:\d3\index.html,C:\d3\data.tsv).
참고로, Notepad++에서 폰트 스타일 변경은 'Settings > Style Configurator'를 이용하시면 됩니다.
이제 D3 실행을 위해 웹 서버(Web Server)를 실행해야 하는데요, 저는 Node.js를 이용해보도록 하겠습니다.
사용하고 계신 웹 서버(예: 아파치, IIS)의 루트 디렉토리에 다운로드 파일들을 위치시켜 주시면 되겠습니다.
node js 설치: https://nodejs.org/ko/
저는 v6.9.4 LTS 버전을 설치하였습니다.
내 PC의 '보조프로그램 > 명령 프롬프트'를 실행하고,
d3 폴더로 이동한 후, 'npm install http-server -g' 명령어를 입력합니다.
다시 'http-server'를 입력하면, 아래와 같이 웹 서버 주소가 제공됩니다.
위 'http://127.0.0.1:8080' 주소로 D3 다중계열 선형 차트가 그려지는 것을 확인하였습니다. 간단하죠?!
