부록 D3.js를 활용한 시각화

데이터를 웹상에 이쁘게 보여주려면 반복문을 사용해서 여러개의 DOM 엘리먼트들을 웹페이지에 추가해서 보여주어야한다. 이런 과정을 쉽게 도와주는 라이브러리 d3.js가 있다. d3js를 이용하면 raw data를 다루는 것부터 다양한 그림으로 시각화 까지 빠르게 적용이 가능하다. 물론 방법만 잘 알고 있다면!

먼저 d3.js를 받도록 하자

https://github.com/d3/d3

CDN도 있고, npm도 있으니 맘에 드는걸로 골라 담자

설치가 완료 되었으면 시작이다.

데이터를 웹에 보여주는 절차는 다음과 같다.

1. raw data 수집
2. 웹에서 사용할 수 있도록 파싱
3. 파싱된 데이터를 시각화!(d3)

보여주고 싶은 데이터를 모아서 배열 형식으로 만들고, 만든 데이터를 d3를 이용해서 보여준다. (d3는 데이터를 넣으면 그대로 그려주는게 아니라 내가 보여주고 싶은 모양으로 그릴 수 있는 도구다)

1. raw data 수집

이부분은 크롤링을 해도 되고, 데이터를 받아도 되니 생략하고 샘플데이터를 사용하자.

// 숫자 연속 데이터
const data = [
    230, 40, 120, 200, 300, 270, 20, 0, 40, 100, 70
]

2. 웹에서 사용할 수 있도록 파싱

이미 샘플로 만들었으니 샘플데이터를 사용할 것이다. 만드는 방법은 parse 를 통해서 해보자

3. 파싱된 데이터를 시각화(d3) - Bar Graph

데이터를 담아서 시각화를 만든다.

// body 라는 태그 선택
const body = d3.select('body')

// body에 svg 추가 높이와 너비는 300px으로 고정
const svg = body.append('svg')
    .attr('width', 300)
    .attr('height', 300)

// svg에 data 담기 (바 그래프를 그릴 것이기 때문에 rect이용)
const rectangles = svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')

// 각각의 바 그래프에 담은 data에 맞춰서 색상과 위치 조절
rectangles.attr('x', (d, i) => ((300 / data.length) * i) + 10)
    .attr('y', d => d3.max(data) - d)
    .attr('height', d => d)
    .attr('style', 'fill:#1565C0')