D3 (Data-Driven Documents)는 데이터 시각화 라이브러리로

다양한 차트를 쉽게 제작할 수 있다.

D3로 만들 수 있는 차트는 githubbl.ocks.org에서 확인해 볼 수 있다.

인터넷에서 찾을 수 있는 대부분의 예제는 v3 버전으로 제작되었고

최신 버전인 v4는 관련된 예제가 많지 않다.

v3와 v4는 척도(scale) 사용에 변화가 있고

대부분 유사하게 사용할 수 있다.

자세한 차이는 여기를 읽어보길 바란다.


실제 개발에서는 D3(v3)를 이용하여

무료로 제공하는 JUI, C3 등의 차트 라이브러리가 있으니

이 라이브러리를 사용하는 것이 좋을 것이다.


여기서는 개발 능력을 높이고 자신에게 맞는 차트를 제작하기 위하여

컬럼 차트(Column Chart) 예제를

v4를 이용하여 단계별로 제작하며 정리할 예정이다.


예제를 익히기 위해서는

select, selectAll, enter, data, append, domain, range 등의

기본적인 함수는 알고 있다는 전제로 시작하기 때문에

모른다면 찾아본 후에 진행하는 것이 좋다.

이 함수들에 대한 자세한 설명은 정리하지 않지만

사용법을 익히는 예제로 구성되어서 보는데는 문제가 없을 것이다.


첫번째 예제로

주어진 데이터(dataset)의 값을 화면에 출력하는 예제이다.

각 데이터는 차트로 보이기 위해 사각형(rect)을 생성(append)하였다 [라인 12].


컬럼 차트이기 때문에

값(dataset[i])에 따라 도형(rect)의 크기(height)가 바뀌고 [라인 13]

데이터 순서에 따라 생성한 도형의 위치(x)가 지정된다 [라인 15].

값의 크기는 그대로 도형의 크기로 지정했지만

순서를 그대로 위치(x)로 사용하면 도형이 모두 붙어버리기 때문에

도형의 너비(40)보다 조금 크게(50 * i) 지정하였다 .


마지막으로 도형을 주어진 데이터 개수 만큼(dataset.length)

반복해서 생성하기 위해 for문을 사용하였다 [라인 11].

예제를 실행하면 생성된 바(rect)가

위에서 아래로 향하고 있는 문제를 확인할 수 있다.

웹에서 좌표는 좌측 상단을

기준 (0, 0)으로 좌표를 지정하여 구현하기 때문이다.

(상세한 설명은 아날로그 시계 참조)

즉, y좌표를 지정하지 않았기 때문이다.

    svg.append("rect")
        .attr("height", dataset[i])
        .attr("width", 40)
        .attr("x", 50 * i)
        .attr("y", 100 - dataset[i]);

전체코드보기

차트의 바닥을 y좌표가 100 인 지점으로 임의 지정 하고,

(데이터의 최대값이 39 이므로 39 보다 크면 된다.)

각 도형의 y좌표 값을 100 에서 자신의 크기를 뺀 값으로

지정하면 다음 그림과 같이 실행된다.

dataset이 [9, 19, 29, 39, 29, 19, 9]로 되어 있으니

100에서 각 값으 빼면

[91, 81, 71, 61, 71, 81, 91]이 된다.

즉, 91px에서 9px 크기(height)의 도형을 생성한다.


다음으로 데이터의 개수 만큼 도형을 생성할 때

for문을 이용하였다.

이건 일반적인 자바스크립트를 이용한 코딩 방법이고

D3 (Data-Driven Documents)의 특징을 반영한 것이 아니다.

D3는 이름 그대로 데이터 기반,

즉 데이터 처리를 쉽게 하는 것이 목적이기 때문에 다음과 같이 작성해야 한다.


D3에서는 사용할 데이터를 지정하면 [라인 11]

각 데이터별(enter)로 실행해서 도형을 생성할 수 있다 [라인 12].

다만, 데이터 값을 가지고 오는 방식이

배열(dataset[i])로 지정할 수도 있고

함수의 파라미터로 넘어오는 값(d)을 이용할 수도 있다.

(여기서 사용된 함수를 callback함수라고 한다.)

도형의 크기(height)는 파라미터 값을 이용했고 [라인 13]

도형의 위치는 (y)는 배열을 이용했다 [라인 16].

이해를 위해서 두가지 방법을 사용했지만

일반적으로 파라미터 값을 이용한다.


이번에는 다음 그림과 같이 차트를 보다 크게 구현해 본다.

이것은 도형의 크기를 5배 크게(d*5) 하면 간단하게 구현된다.

다만, 도형이 커졌으니 차트의 바닥을 100에서 250으로 바꾸어 주었다.

그렇게 않으면 도형의 윗 부분이 잘려서 출력된다.

svg.selectAll("bar")
    .data(dataset)
    .enter().append("rect")
        .attr("height", function(d, i) {return (d*5)})
        .attr("width", 40)
        .attr("x", function(d, i) {return (50 * i)})
        .attr("y", function(d, i) {return (250-d*5)});

전체코드보기


이번에는 그림과 같이

바 차트에 원하는 색을 지정하고

바에 마우스를 올리면 다른 색으로 바뀌게 작성해 본다.

이것은 프로그램으로 처리하는 것 보다

CSS로 간단하게 구현할 수 있다.

일반적인 HTML 태그(예 div)는

배경색을 background-color에 지정하는데

SVG (D3)에서는 fill로 지정한다.

따라서, 생성한 바(rect)에 클래스를 추가하고 .attr("class", "bar")

스타일에서 bar 클래스에 fill 속성 값을 지정해 주면 된다.

마우스가 올라간 바(rect)의 색을 바꾸는 것은

hover선택자를 이용한다.

<style>
.bar {
    fill: skyblue;
}
.bar:hover {
    fill: blue;
}
</style>

<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var dataset = [9, 19, 29, 39, 29, 19, 9];
var svg = d3.select("svg");
svg.selectAll("rect")
    .data(dataset)
    .enter().append("rect")
        .attr("class", "bar")
        .attr("height", function(d, i) {return (d*5)})
        .attr("width", 40)
        .attr("x", function(d, i) {return (50 * i)})
        .attr("y", function(d, i) {return (250-d*5)});
         
</script>

전체코드보기

이외에도 바의 선 색(stroke) / 굵기(stroke-width), 투명도(fill-opacity) 등

차트를 보기 좋게 처리하는 것을 CSS로 구현할 수 있다.

.bar {
    fill: skyblue;
    fill-opacity: 0.3;
    stroke: skyblue;
}
.bar:hover {
    fill-opacity: 1;
}

전체코드보기

이번에는 그림과 같이 도형에 맞는 값을 출력한다.

제작하는 방법은

rect를 생성하는 것과 동일한데

rect대신에 text를 생성하면 된다.

svg.selectAll("rect")
    .data(dataset)
    .enter().append("rect")
        .attr("class", "bar")
        .attr("height", function(d, i) {return (d*5)})
        .attr("width", 40)
        .attr("x", function(d, i) {return (50 * i)})
        .attr("y", function(d, i) {return (250-d*5)});

svg.selectAll("text")
    .data(dataset)
    .enter().append("text")
    .text(function(d) {return d})
        .attr("x", function(d, i) {return 50 * i})
        .attr("y", function(d, i) {return 250-d*5});

전체코드보기

기존의 rect를 생성하는 코드 다음에

위 코드에서 작성된 것처럼 text 생성 코드만 추가하면 된다.

rect와 text 생성이 동일하게 작성되었다.

text는 높이와 너비가 필요 없고,

별도의 CSS 클래스(class)를 지정하지 않았다.

그리고, text 함수를 호출하여 데이터 값을 넣어준다.


위 그림에서 보는 것처럼

출력된 값이 왼쪽에 치우쳐 있어 보기에 좋지 않다.

그리고, 다음 그림처럼 값을 도형 안에 출력해 본다.

<style>
~~생략 ~~
.text {
    fill: white;
    font-weight:bold;
}

</style>
~~생략 ~~
svg.selectAll("text")
    .data(dataset)
    .enter().append("text")
    .text(function(d) {return d})
        .attr("class", "text")
        .attr("x", function(d, i) {return 50 * i + 10})
        .attr("y", function(d, i) {return 250-d*5 + 15});

전체코드보기

도형안에 출력하기 위해 Y좌표에 글자의 높이(15) 만큼 더해주고,

도형의 중앙에 출력하기 위해 X좌표에 글자의 너비(10) 만큼 더해서 지정했다.

그리고, 글자를 조금 더 보기 좋게 하기 위해

CSS로 text를 생성하여 지정하였다.

일반적인 HTML에서는 글자색이 font-color이지만

D3 (실제론 SVG)에서는 fill로 지정한다.




'JavaScript > Chart' 카테고리의 다른 글

2. D3 (SVG) 차트 만들기 - Bar II  (0) 2017.04.15
3. D3 (SVG) 차트 만들기 - Line  (6) 2017.04.15

+ Recent posts