자바스크립트 라이브러리 중 하나인 D3.js는 데이터 시각화에 사용되는 라이브러리이다.
웹브라우저상에서 동적이고 Interactive한 정보 시각화를 구현하기 위한 자바스크립트 라이브러리이며, 자바스크립트 문법을 취하고, 웹 표준인 HTML, SVG, CSS와 결합하여 강력한 접근성을 제공한다.
자세한 내용은 공식 사이트 https://d3js.org 와 https://github.com/d3/d3/wiki 이곳에서 자세한 래퍼런스와 내용을 공부할 수 있다.
그렇다면 D3를 시작해보자. CSS, HTML, Javascript에 대해 어느정도 알고 있는 상황에서 시작한다.
실습을 할때, 로컬 웹 서버를 통해 페이지에 접근해야 좋다. 필자는 node.js 의 npm을 사용하였다.
d3는 체인 문법을 사용한다. JQuery사용자라면 익숙할 수 있다. 구두점(.) 과 함께 메서드를 체인으로 연결하여 한줄에 여러 동작을 실행할 수 있는 기법이다. 기본 코드를 통해 어떻게 이루어지는지 살펴보자.
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
//.을 이용한 체인 문법, 코드 한줄에 여러동작을 실행
// select에서 문서의 body를 요청, select는 body에 대한 참조를 체인으로 연결하고 메서드를 넘겨줌
// .append는 전달인자로 받은 DOM문서요소를 새로 생성해서 앞 체인(select)선택한 문서요소가 무엇이든 그 끝(안쪽)에 추가
// -> p문서요소를 새로 생성해서 body에 추가한것.
// text는 전달인자로 문자열을 받아 해당 선택물의 여는 태그와 닫는태그 사이에 추가
// 바로 전 메서드에서 새로운 p 문서요소의 참조를 전달받았으므로 <p></p> 사이에 텍스트를 추가
p.text("New Paragraph2!");
// d3에 문서요소를 생성하는 방법
var dataset;
// 데이터 엮기(binding) : 입력 데이터 값을 DOM 문서요소와 엮는다. 엮기 위해 1. 데이터, 2. DOM 문서요소가 필요
console.log(data);
dataset = data;
//generateVisualization();
//makeAwesomecharts();
}); // csv파일을 console.log로 출력됨 json은 .json으로 가능
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
하나씩 살펴볼 것이다.
d3
D3 객체를 참조해서 D3의 메서드를 사용할 수 있게 해준다. 시작이라고 생각하자
.select('body')
메서드에 전달인자로 CSS 선택자를 주면 조건과 일치하는 DOM문서요소의 참조를 반환한다. 여기서는 본문의 'body'를 요청했으므로 body에 대한 참조를 체인으로 연결하고 메서드에 넘겨준다. 쉽게 말해 body에 뭔가를 한다 라고 생각하자
.appned()
전달인자로 받은 DOM('body')문서요소를 새로 생성해서 앞 체인에서 선택한 문서요소가 무엇이든 그 끝에 연결한다.
여기서는 'p'문서요소를 새로 생성해서 body에 추가한다. 이 말은 빈 'p' 문서요소가 추가되었고 생성된 p를 다음 메서드로 넘긴다.
.text("New paragraph!)
이 메서드는 전달인자로 문자열을 받아 해당 선택물의 여는 태그(<)와 닫는태그(>)에 추가한다. 전 메서드에서 'p' 문서요소의 참조를 받았으니 이 코드는<p> </p> 에 텍스트를 추가한다.
위의 첫번째 <script>코드가 기본 문법이 담긴 코드이다. 이번에는 데이터를 엮어보자
데이터시각화를 위해 데이터를 시각 요소로 연결하는 과정이다. D3를 이용하여 입력 테이터 값을 DOM문서에 엮는다
여기서는 CSV데이터를 불러오는것을 해본다.
CSV데이터는 ,로 구분된 데이터를 의미한다. 본 실습에서의 데이터는 아래와 같다.
Food,Deliciousness
Apples,9
Green Beans,5
Egg Salad Sandwich,4
Cookies,10
Liver,0.2
Burrito,7
위의 d3.csv(...) 이 d3로 csv데이터를 불러오는 것이다. 주의할점은 로컬 웹 서버를 사용하지 않으면 브라우저로 확인할 수 없다. 실행결과를 보자
오른쪽의 Console을 보면 6개의 Object 객체가 배열로 있음을 볼 수 있다. 하나씩 확인해보면,
각 객체는 Food 와 Deliciousness 프로퍼티가 있으며 순서대로 저장됨을 볼 수 있으며, 객체의 속성답게 'key'와 'value'로 저장되어 있다.
JSON파일도 동일한 방법으로 데이터를 얻을 수 있다.
다음에는 준비된 데이터를 엮고 생성하는 방법에 대해 알아보자.
'D3_js' 카테고리의 다른 글
| [D3.js] 척도 (0) | 2019.08.03 |
|---|---|
| [D3.js] Scatter_산포도 (0) | 2019.07.25 |
| [D3.js] SVG를 이용한 Chart와 Circle (0) | 2019.07.19 |
| [D3.js] chart 그리기 (0) | 2019.07.17 |
| [D3.js] DOM 문서요소 선택하기 (0) | 2019.07.15 |