프로필사진
owgno6
CODELIB
검색하기
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total

티스토리 뷰

D3.js

01 간단한 도형 차트(Bar Chart) 만들기

owgno6 2018. 5. 25. 16:26

D3.js 는 데이터 시각화 프레임워크로 잘 알려져 있고, 자바스크립트로 개발을 한다.

HTML5의 SVG(Scalable Vector Graphic)을 통하여

다양한 화면 해상도에서도 깨짐없는 Visualizing이 가능하고,

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


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

버전은 크게 v3와 최신버전인 v4로 나뉜다. v3와 v4는 척도(scale) 사용에 변화가 있고 대부분 유사하게 사용할 수 있다. 자세한 차이는 여기를 읽어보면 대략 알수있다.


D3.js의 개발언어 함수를 익힐려면 select, selectAll, enter, data, append, domain, range 등의 기본적인 함수는 알고 시작해야하고 모른다면 찾아본 후에 진행하는 것이 좋다.


예제로 주어진 데이터(dataset)의 값(9, 19, 29, 39, 29, 19, 9) [line 6]을 화면에 출력해보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<meta charset="utf-8">
<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");
 
    for (var i = 0; i < dataset.length; i++) {
        svg.append("rect")
            .attr("height", dataset[i])
            .attr("width", 40)
            .attr("x", 50 * i);
    }
</script>



D3 차트를 사용하기 위해서는 해당 스크립트 링크 주소를 넣어준다

<script src="https://d3js.org/d3.v4.min.js"></script> [line 4]. 

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

컬럼 차트이기 때문에 값(dataset[i])에 따라 도형(rect)의 크기(height)가 바뀌고 [line 12]. 

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

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

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

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



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

반복해서 생성하기 위해 for문을 사용하였다 [line 10].







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

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

웹에서 좌표는 좌측 상단을

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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<meta charset="utf-8">
<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");
 
    for (var i = 0; i < dataset.length; i++) {
        svg.append("rect")
            .attr("height", dataset[i])
            .attr("width", 40)
            .attr("x", 50 * i)
            .attr("y", 100 - dataset[i]);
 
    }
</script>



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

(단, 데이터의 최대값이 39 이므로 39 보다 작으면 안된다.) 각 도형의 y좌표 값을 100 에서 자신의 크기를 뺀 값으로 지정하면 다음 그림과 같이 실행된다.






다음으로 데이터의 개수 만큼 도형을 생성할 때 for문을 이용하였다. 이건 일반적인 자바스크립트를 이용한 코딩 방법이고 D3 (Data-Driven Documents)의 특징을 반영한 것이 아니다. D3는 이름 그대로 데이터 기반, 즉 데이터 처리를 쉽게 하는 것이 목적이기 때문에 다음과 같이 작성해야 한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<meta charset="utf-8">
<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("bar")
        .data(dataset)         
        .enter()                     
        .append("rect")
            .attr("height",function(d, i) {return d})         
            .attr("width", 40)
            .attr("x", function(d, i) {return (50 * i)})     
            .attr("y", function(d, i) {return (100 - dataset[i])});
</script>



D3에서는 사용할 데이터를 지정하면 [line 11]. 각 데이터별(enter)로 실행해서 도형을 생성할 수 있다 [line 12]. 다만, 데이터 값을 가지고 오는 방식이 배열(dataset[i])로 지정할 수도 있고 함수의 파라미터로 넘어오는 값(d)을 이용할 수도 있다. (여기서 사용된 함수를 callback함수라고 한다.) 도형의 크기(height)는 파라미터 값을 이용했고 [line 14]. 도형의 위치는 (y)는 배열을 이용했다 [line 17]. 이해를 위해서 두가지 방법을 사용했지만 일반적으로 파라미터 값을 이용한다.

결과는 같다.




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




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<meta charset="utf-8">
<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("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)});
 
</script>
 





다음에는 바 차트에 원하는 색을 지정해보고 마우스오버 효과를 표현해봤다.
이어서 데이터값도 넣어본다.


 

 

 

1
2
3
4
5
6
7
8
<style>
.bar {                /* based */
    fill: gold;
}
.bar:hover {        /* change */
    fill: orange;
}
</style>

 

1
2
3
4
5
6
7
8
9
10
<style>
.bar {
    fill: orange;
    fill-opacity: 0.3;
    stroke: orange;
}
.bar:hover {
    fill-opacity: 1;
}
</style>


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

배경색을 background-color에 지정하는데 SVG (D3)에서는 fill로 지정한다. 따라서, 생성한 바(rect)에 클래스를 추가하고 .attr("class", "bar") 스타일에서 bar 클래스에 fill 속성 값을 지정해 주면 된다. 마우스가 올라간 바(rect)의 색을 바꾸는 것은

hover선택자를 이용한다.


text데이터 제작하는 방법은 rect를 생성하는 것과 동일한데 rect대신에 text를 생성하면 된다.






하지만 위 그림의 text 출력값이 맘에 들지 않는다.

text 위치와 옵션을 바꿔서 좀 더 보기 깔끔하게 출력해봤다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
    fill: skyblue;
}
.bar:hover {
    fill: royalblue;
    cursor: hand;
    font-fill: black;
    font-weight:bold;
}
.text {
    fill: white;
    font-weight:bold;
}
 
</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)});
 
svg.selectAll("text")
    .data(dataset)
    .enter().append("text")
    .text(function(d) {return d})
        .attr("class", "text")        // css
        .attr("x", function(d, i) {return 50 * i +10})             
        .attr("y", function(d, i) {return 250-d*5 +15});        
 
</script>
cs



text 역시 D3 svg에서는 fill로 사용한다.

도형 중앙에 출력하기 위해 x좌표에 +10을 더해주고,

도형안에 출력하기 위해 y좌표에 +15를 더해서 출력했다.










'D3.js' 카테고리의 다른 글

06 라인 차트(Line Chart) - 툴팁(Tooltip), 꺾은선(Curve Line)  (0) 2018.06.11
05 라인 차트(Line Chart)  (0) 2018.06.05
04 툴팁(Tooltip)  (2) 2018.06.04
03 그리드(Grid)  (0) 2018.06.01
02 척도(X / Y축) - Axis와 Scale의 이해  (0) 2018.05.30
공유하기 링크
댓글