D3.js

d3를 왜 배우고 싶은가?

멋진 데이터 시각화 기법 대부분을 구현할 수 있는 능력을 갖추고자 하기 때문이다. d3를 사용하면 범용 라이브러리로는 구현할 수 없는 고유의 데이터 시각화 기법을 만들 수 있다. 

d3는 구버전 브라우저를 지원하지 않기 때문에 상당히 대화적인 애플리케이션뿐만 아니라 전통적인 웹 콘텐츠 형태로 제공되는 애플리케이션도 개발할 수 있다. 이렇게 함으로써 이식성이 뛰어나고, 확장이 쉽고, 연결된 데이터 웹을 만들 수 있으면 대규모 팀에서 쉽게 유지, 보수할 수 있다.

D3는 셀렉션과 바인딩이다.

집 몇 채의 가격과 크기를 담은 데이터셋과 그림이나 전통적인<div> 요소를 담은 일련의 웹페이지 요소를 생각해보고 나서, 데이터셋을 텍스트, 혹은 크기와 색상으로 표현하려고 한다고 가정했을 때, 셀렉션은 이 모두를 담은 묶음으로, 이 묶음 단위로 이동, 색상 변경, 데이터 값 변경 등을 수행하게 된다. d3의 진정한 힘은 셀렉션으로 데이터와 웹 페이지 요소를 결합하는 능력에서 나온다.

d3.selectAll("cirlcle.a").style("fill", "red").attr("cx", 100);

위 코드는 웹페이지에서 a 클래스에 속한 원을 모두 선택해 빨간색으로 채우고 원의 중심을 <svg> 영역의 왼쪽에서 100px 떨어진 곳에 위치시키는 예시 코드다. 이와 마찬가지로 다음 코드는 웹 페이지에 있는 모든 <div> 요소를 빨간색으로 칠하고 클래스를 b로 변경한다.

d3.selectAll("div").style("background", "red").attr("class", "b");

원과 <div>를 변경하려면 먼저 원이나 <div>를 만들어야 한다. 

위의 코드에서 제일 앞에 나오는 d3.selectAll()은 셀렉션 코드로써, D3를 이해하는 데 필요한 핵심 코드다. d3.select()와 d3.selectAll()이 있는데, select()는 찾아낸 첫 번째 요소를 선택하고, selectAll()은 여러 요소를 선택한다. 셀렉션은 데이터셋에 연결돼 있을 수도 있는 하나 이상의 웹 페이지 요소의 그룹이다. 

다음 코드의 셀렉션은 [1, 5, 11, 3] 배열에 있는 요소를 market 클래스의 <div> 요소에 바인딩 하는 코드이다.

d3.selectAll("div.market").data([1, 5, 11, 3]);

d3에서 이러한 연결은 데이터 바인딩이라고 하며, 셀렉션은 일련의 웹 페이지 요소와 이에 대응하는 일련의 데이터라고 생각하면 된다. 종종 DOM 요소보다 데이터 요소가 많거나 혹은 그 반대인 경우가 있는데 이때 콘텐츠를 생성하는 데 요소를 생성하거나 제거하는 메서드를 d3에서 제공한다. 데이터를 바인딩 하지 않는 셀렉션도 있지만 데이터를 바인딩하면 d3가 제공하는 강력한 데이터 시각화 기법을 사용할 수 있다.  리스트, 원, 심지어 아프리카 지도에서의 특정 지역까지 웹 페이지 위의 어떤 요소도 선택할 수 있다. 요소가 다양한 형태를 취할 수 있는 것과 마찬가지로 그 요소에 연결된 데이터도 어떤 형태든 취할 수 있다.