Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

HAMA 블로그

밑바닥 부터 시작하는 d3.js (version 4) 와 Typescript 를 이용한 데이터 가시화 본문

데이터 가시화 (d3.js , Plotly, Grafana, Kibana 등)

밑바닥 부터 시작하는 d3.js (version 4) 와 Typescript 를 이용한 데이터 가시화

[하마] 이승현 (wowlsh93@gmail.com) 2018. 2. 19. 11:42


https://bl.ocks.org 싸이트를 보면 굉장히 다양한 d3.js 예제들이 있으니 참고 하십시요.
이 글은 글 마지막의 레퍼런스를 요약한 것이니, 구체적인 설명은 링크를 따라가서 읽어보십시요.
아래 내용은 윈도우8에서 테스팅하고 확인 하였습니다. (패키지 버전을 확인하세요. 버전이 다르면 본 문서의 명령어가 안먹힐 수도 있습니다.)

+  


개발환경 세팅 

자바스크립트 개발 환경 세팅

Node 설치  (npm 이용 및 브라우저 없이 실행하기 위함)

VS CODE 편집기 설치  (편집기는 아무거나~) 


1. 프로젝트 폴더 생성

mkdir d3v4-with-ts
cd d3v4-with-ts


2. 폴더 내에서 package.json 생성 (패키지 및 프로젝트 관리를 위함) 
npm init -y

3. 패키지 받아오기 (d3 와 타입스크립트를 설치합니다. -S 는 --save , -D 는 --save-dev) 
npm i -S d3@^4.13.0
npm i -D typescript@^2.4.2
npm i -D @types/d3@^4.10.0


타입스크립트 컴파일 환경 세팅
(타입스크립트를 Node 실행기가 이해하는 언어로 변경하기 위함)

 

4. 타입스크립트 컴파일러 설정 파일 만들기 (파일명: tsconfig.json)

{
"compilerOptions": {
"noImplicitAny": true,
"target": "es5",
"sourceMap": true,
"declaration": true,
"module": "es2015",
"moduleResolution": "node"
},
"exclude": [
"node_modules",
"dist"
]
}


  •  noimplicitAny : 모든것은 타입을 명시적으로 가져야 한다. 
  •  es5 버전의 자바스크립트로 컴파일하라. 
  •  소스캡을 만들어라. 브라우저에서 오리지날 파일에 대한 디버깅을 할 수 있다.
  •  es2015 (or es6) 모듈 타입을 사용하라. 
  •  노드가 하는 것처럼 모듈을 해석하라. 더 자세한 것은 여기 참고 here.




5. src 폴더를 만들고 그 안에 app.ts 파일을 만들고 일단 아래 내용 입력 

console.log('hello, world');


6. 커맨드라인에서 아래를 입력하여 타입스크립트를 js 로 변경 해보자

.\node_modules\.bin\tsc

build01

이렇게 js 파일들이 생겨 날 것이다. 

7. 위의 명령이 너무 길기 때문에 줄여 보자. package.json 의 script 섹션안에 아래 내용 입력

"build": "tsc"

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc"
},


파일을 저장하고 이제 다음과 같이 명령하면 자동적으로 타입스크립트를 빌드 할 것이다.

npm run build

현재는 src 폴더 안에 ts 파일과 컴파일된 js 파일이 같이 저장될 것이나, 나중에는 따로 저장하게 만들어서 관리하기 편하게 할 것이다.

롤업을 이용한 번들링  
(브라우저가 이해하는 형태로 변경하기 위함)

8. 이제부터 번들링을 시작해보자. rollup 패키지를 설치한다. (참고로 라이브러리 번들링에는 Webpack 보다 더 낫다고 한다. Webpack and Rollup: the same but different)

npm i -D rollup@^0.45.2

9. 모드 모듈을 해결하기 위해서 플러그인도 설치 하자.
npm i -D rollup-plugin-node-resolve@^3.0.0

10. rollup 을 설정하기 위해서 rollup.config.js 파일을 만들고 아래 내용 입력

import resolve from 'rollup-plugin-node-resolve';

export default {
entry: 'src/app.js',
dest: 'src/bundle.js',
format: 'umd',
plugins: [
resolve({
jsnext: true,
main: true,
module: true
})
],
moduleName: 'app'
};



11. 아래 명령어를 실행해서 번들링하자. src/bundle.js 파일이 생겨 날 것이다.
.\node_modules\.bin\rollup -c
 (-c 는 설정파일을 이용하라는 의미)

12. 역시 너무 길기 때문에 다시 package.js 의 scripts 섹션에 build 를 수정하자.

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc && rollup -c"
},


파일을 저장하고 이제 다음과 같이 명령하면 자동적으로 타입스크립트를 컴파일해서 js 만들고 js 를 번들링 해서 최종적으로 브라우저가 이해 할 수 있는 js 파일로 만들 것이다. (파일 크기를 줄이고, 난독화하는 설정도 추가 가능하다) 


npm run build

서비스 시작하기 

13.  간단하게 파일을 서비스 하기 위해 live-server 설치
npm i -D live-server@^1.2.0

14.  package.json 의 scripts 섹션에 아래 추가 (html,js,css 를 읽어서 서비스 제공 및 변화 감시)
"serve": "live-server src --watch=src/**/*.html,src/bundle.js,src/**/*.css"

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc && rollup -c",
"serve": "live-server src --watch=src/**/*.html,src/bundle.js,src/**/*.css"
},


15. src 폴더 아래에 index.html 파일 생성 (bundle.js 파일을 참조하여 브라우저에서 표현)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>D3 with TypeScript</title>
</head>
<body>
<script src="/bundle.js"></script>
</body>
</html>


16. 드디어 서비스 시작!! 이제 브라우저에서 index.html 을 열어서 컨텐츠를 확인할 수 있다. 현재는 아무것도 안나올 것이며, F12 개발자도구의 콘솔창을 통해 hello, world 를 확인 할 수 있다.
npm run serve

17. 만약 app.ts 의 내용이 바꾸고 다시 빌드 하면 바뀐 내용을 볼 수 있을 것이다.
npm run build



TS 파일 변화에 대한 감시(Watching)
(지금까지는 ts파일을 변경해도 브라우저에서 내용이 변하지 않았다. 감시기는 JS,HTML 만 감시하지 ts를 감시하지는 않았기 때문인데, 이제 ts 포맷을 감시하도록 해보자)

18. 타입스크립트 내용을 변경 시킬 때마다 build 를 한다는것은 매우 귀찮은 일이다. rollup-watch 를 통해 해결하자.
npm i -D rollup-watch@^4.3.1

19. Pakcage.json 파일에 scripts 에 다음 내용을 추가하자.

"tsc:w": "tsc -w",
"rollup:w": "rollup -c -w",


20. 아래와 같은 명령어를 터미널 3개를 열어서 실행 시키면 app.ts가 바뀌었을때 브라우저도 자동으로 바뀔 것이다. 
npm run serve
npm run tsc:w
npm run rollup:w


Scripts 의 모든 명령을 한방에 해결하기 

21.  이 모든것을 한방에 하기 위해서는 아래 패키지를 설치한다.

npm i -D npm-run-all@^4.0.2

22.  Package.json 에 아래 "start" 를  추가하고

"scripts": {
...
"start": "npm-run-all --parallel tsc:w rollup:w serve"
},


23.  npm start 로 실행하면 모든게 한방에 된다. 이제 부터 ts,html 아무것이나 수정해도 브라우저에는 최신 내용이 업데이트 될 것이다.

npm start

D3 로 차트 만들기 

자 이제부터 본론인 데이터 가시화로 들어가 보자. (-.-;;) 

d3.js 는 차트라이브러리가 아니다. d3 는 데이터를 웹페이지 상에서 표현하는것을 도와주는 로우레벨 API 이다. 따라서 손쉽게 차트를 나의 서비스에 추가하고 싶은 분이라면 d3 기반의 좀 더 사용하기 쉬운 라이브러리나 엑셀차트를 사용하는 편이 더 낫다. 내가 d3.js 를 선택한 이유는 내 구미에 맞는 데이터 가시화를 하기 위해서이다. 따라서 d3.js 를 시작하기 위해서는 자바스크립트 및 DOM 이 무엇이며 SVG 가 무엇이지에 대한 기초 지식은 필수이다. 

d3.js 밑바닥 맛보기

아래와 같은 도형의 나열을 d3.js 를 이용하여 표현해보자.

1. HTML 의 body 요소 아래에 svg 요소를 추가하자. (DOM 추가) 

let svg = d3.select("body").append("svg");


2. 해당 svg 요소의 크기를 설정해준다. (attr 를 이용한다. style 을 이용하여 이쁘게 할 수 도 있다)

const w = 960;
const h = 480;

svg.attr("width",w);
svg.attr("height", h);


3. DOM에 바인딩할 데이터를 준비해두고,

let dataset = [5,10,15,20,25];


4. 데이터를 바인딩할 DOM 을 만들어서 HTML 문서에 추가한다. circle 이라는 DOM 들을 선택하고 , dataset 의 크기 만큼  바인딩하는데 ,이때 선택된 DOM 보다 data 가 더 많은 경우 , enter 를 이용해서 임의의 요소를 만든 후에 , circle 이라는 DOM 을 append 해준다라는 의미이다.

- enter에 대한 설명은 요기 참고 -> http://blog.nacyot.com/articles/2015-02-02-d3-selection/

let circle = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")


5. svg 에 circle 요소가 추가되었으니, 이제 circle 에 대한 속성을 추가해보자. circle 이 위치할 x,y 좌표와 반지름을 속성에 넣어준다. 반지름의 경우는 바인딩된 data 의 개별 요소가 익명함수를 이용하여 들어간다.

circle.attr("cx", function(d,i){
return (i * 50) + 25;
})
.attr("cy", h/2)
.attr("r", function(d){
return d;
})


좀 더 그럴싸한 차트를 그려보자.

이 단락에서는 위와 같은 챠트를 얻을 것이다. reddit API를 사용하여 마지막 25개의 포스트에 대한 스코어를 표현 할 것이다.

차트 구성 요약 

기본 차트 구성은 아래와 같을 것이다.

  • the svg (dark background)
  • the plot area (light background)
  • the axes (blue text)
  • the points (orange)

그러기 위해서 우리는 아래와 같은 절차를 밟을 것이다.

  • svg 만들기 
  • plot area 만들기 
  • plot area 에 x-축에 대한 그룹 추가 
  • plot area 에 y-축에 대한 그룹 추가 
  • plot area 에 데이터 포인트들에 대한 그룹 추가 

전체적인 외형 만들기 

import * as d3 from 'd3';
import { redditObject } from './redditFormat';
const width = 960;
const height = 480;
let svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
let plotMargins = {
top: 30,
bottom: 30,
left: 150,
right: 30
};
let plotGroup = svg.append('g')
.classed('plot', true)
.attr('transform', `translate(${plotMargins.left},${plotMargins.top})`);
let plotWidth = width - plotMargins.left - plotMargins.right;
let plotHeight = height - plotMargins.top - plotMargins.bottom;


- 아무것도 없는 HTML 파일에 동적으로 svg 엘리먼트를 추가하고 그것의 크기를 960 / 480으로 설정한다.
- 차트외형은 왼쪽에서 150, 위에서 30 만큼 이동해서 그려준다. plot 로 클래스명 설정

축 만들기 


let xScale = d3.scaleTime()
.range([0, plotWidth]);
let xAxis = d3.axisBottom(xScale);
let xAxisGroup = plotGroup.append('g')
.classed('x', true)
.classed('axis', true)
.attr('transform', `translate(${0},${plotHeight})`)
.call(xAxis);
let yScale = d3.scaleLinear()
.range([plotHeight, 0]);
let yAxis = d3.axisLeft(yScale);
let yAxisGroup = plotGroup.append('g')
.classed('y', true)
.classed('axis', true)
.call(yAxis);

- X,Y 축을 그려준다. 위치등을 자신이 알아서 설정 할 수 있다. 
- X 축은 시간축으로 그리기 위해서 scaleTime() 함수를 이용했고
- Y 축은 일반적인 데이터 크기에 따라서 그려지기 위해 scaleLinear() 를 이용했다. 
- 항상 순서는 scale 설정 ->  axis 에 scale 을 추가 -> plot 에 axis 추가  방식이다.

데이터 가져와서 바인딩 하기 

d3.json<redditObject>('https://api.reddit.com', (error, data) => {
if (error) {
console.error(error);
} else {
console.log(data);
}
});
let prepared = data.data.children.map(d => {
return {
date: new Date(d.data.created * 1000),
score: d.data.score
}
});
console.log(prepared);

- reddit 데이터를 가져와서 설정해준다. score: d.data.score 
- 시간은 unix timestamp (세컨드 + 소수점) 에서 javascript 시간 타입(밀리세컨드)으로 변경.


스케일/축 업데이트 하기

xScale.domain(d3.extent(prepared, d => d.date))
.nice();
xAxisGroup.call(xAxis);
yScale.domain(d3.extent(prepared, d => d.score))
.nice();
yAxisGroup.call(yAxis);


- 위에서 만든 기존 x,y 축을 데이터에 적합하게 바꾼다. 즉 데이터의 시간과 데이터 값의 min,max 에 따라서 축의 도메인을 변하게 만든다. 

데이터 포인트 드로잉


var dataBound = pointsGroup.selectAll('.post')
.data(prepared);

// delete extra points
dataBound
.exit()
.remove();

// add new points
var enterSelection = dataBound
.enter()
.append('g')
.classed('post', true);

enterSelection.append('circle')
.attr('r', 2)
.style('fill', 'red');

// update all existing points
enterSelection.merge(dataBound)
.attr('transform', (d, i) => `translate(${xScale(d.date)},${yScale(d.score)})`);


- 데이터 별 원형의 반지름2이고 빨강색으로 채워진 도형을 추가해줍니다.


완전한 코드샘플은 여기에 있습니다 GitHub.

레퍼런스:

https://hstefanski.wordpress.com/2017/07/23/d3-v4-and-typescript-getting-set-up/
https://hstefanski.wordpress.com/2017/08/15/creating-a-chart-with-d3-v4-and-typescript-or-es6/


저작자표시 비영리 동일조건

'데이터 가시화 (d3.js , Plotly, Grafana, Kibana 등)' 카테고리의 다른 글

InfluxDB , Telegraf, Grafana 모니터링 설치 (2021년 8월기준)  (0) 2021.03.09
Grafana 삭제하기  (0) 2017.12.11
Grafana 사용자 관리 정책 정리  (0) 2017.12.11
Grafana 에서 Telegram 으로 메세지 전송 하기  (0) 2017.12.01
Plotly 랑 Bokeh 공부하기 귀찮다. 그냥 matplotlib 를 사용해서 웹서비스하자.  (0) 2017.06.12
'데이터 가시화 (d3.js , Plotly, Grafana, Kibana 등)' Related Articles more
Comments