D3.js 시작하기
- 최근 시각화쪽에 관심이 생겨 알아보던중 자바스크립트 D3를 이용하여 만들어진 여러 차트들을 보게되었는데 다양성과 퀄리티 자체가 나의 잠재적인 시각화 흥미를 불러일으켰다. 그래서 D3에 대해서 기초부터 하나씩 정리해보고자한다.
D3 란?
- 데이터 기반 문서
- D로 시작하는 단어가 3개라서 D3
- Data
- Driven
- Document
SVG, HTML, CSS를 사용하여 웹브라우저 상에서 동적, 시각화를 구현하기 위한 자바스크립트 라이브러리
D3 기능
- 웹 표준 사용
- 대화형 데이터 시각화를 생성하는 강력한 시각화 도구
- 최신 웹 표준인 SVG, HTML, CSS를 활용하여 데이터 시각화를 구성
- 데이터 기반
- 정적 데이터를 사용하거나, array, object, csv, json, xml 등과 같은 다양한 형식으로 원격서버에서 데이터를 가져와서 다양한 유형의 차트 생성 가능
- DOM조작
- 데이터를 기반으로 DOM(문서 객체 모델)을 조작할 수 있음
- 데이터 기반 요소
- 테이블, 그래프, HTML 요소 등 동적으로 실행하고 요소에 스타일을 적용할 수 있도록 데이터를 강화
- 동적 속성
- 대부분의 기능에 동적 속성을 제공 할 수 있는 유연성 제공
- 속성은 데이터의 함수로 지정 가능(데이터가 스타일과 속성 주도 가능)
- 시각화 유형
- 표준 시각화 형식이 없음
- HTML에서 원형 차트, 그래프, 막대차트, 지리 공간지도 등 여러가지 시각화 유형을 만들 수 있음
- 사용자 지정 시각화
- 웹표준과 함께 작동하므로 사용자가 시각화 기능을 제어할 수 있음
- 전환
- transition() 함수 제공
- 내부적으로 D3가 논리를 계산하여 값 사이를 보간하고 일시적인 상태를 찾음
- 상호 작용 및 애니메이션
- duration(), delay(), ease()와 같은 함수를 사용하여 애니메이션 지원
- 한 상태에서 다른 상태로 애니메이션은 빠르고 사용자 상호작용에 반응
웹 표준
D3를 사용하여 시각화를 하기 위해서는 웹표준에 먼저 익숙해져야함
- HTML
- 웹 페이지의 내용 구성(현재 버전은 HTML5) → 웹페이지에 구조를 제공
- DOM
- 문서 객체 모델
- 페이지에 대한 html 코드를 작성하면 브라우저에서 계층 구조로 변환
- html의 모든 태그는 부모+자식 계층이 있는 DOM 요소로 변환
- DOM이 형성되면 페이지의 요소를 더 쉽게 조작(추가/수정/삭제)할 수 있음
- CSS
- 웹 페이지의 스타일을 지정
- HTML, XML, SVG등 작성된 문서의 표현을 설명하는데 사용되는 스타일 시트 언어
- 웹 페이지에서 요소를 렌더링
- SVG
- 확장 가능한 벡터 그래픽 → 이미지를 렌더링하는 방법(다양한 모양을 그릴 수 있는 캔버스)
<svg width="500" height="500"></<svg>
-
- SVG의 기본 측정값은 픽셀이므로 단위가 픽셀인지 지정할 필요는 없음
- SVG라는 캔버스를 그리고 그 안에 직사각형을 그리려면 <rect> 태그 사용
<svg width="500" height="500"> <rect x="0" y="0" width="200" height="100" fill="red"></rect> </svg> - 이외에도 SVG에서 그릴 수 있는 다른 모양으로는 선, 원, 타원, 텍스트 및 경로가 있음
- 색상을 지정하고 싶다면, 각 태그안에 fill="red" 을 사용하여 색상 지정 가능
- 직접적인 이미지가 아니라 텍스트를 사용하여 이미지를 만드는 방법
- 브라우저 크기에 따라 크기가 조정되므로 브라우저 크기를 조정해도 이미지가 왜곡되지않음
- IE8 이하를 제외한 모든 브라우저는 SVG를 지원
- 데이터 시각화는 시각적 표현이므로 SVG를 사용하여 D3로 시각화를 렌더링하는것이 좋음
- JavaScript
- 사용자의 브라우저에서 실행되는 스크립트 언어
- 웹 사용자 인터페이스를 대화형으로 만들기 위해 html요소(DOM요소)와 상호작용
D3 환경셋팅
아래의 4가지가 있다면 아래의 요소가 필요
- D3 라이브러리
- 웹서버
- 에디터
- 웹브라우저
1) D3 라이브러리
- D3를 사용하여 데이터 시각화를 하려면 D3.js 라이브러리를 HTML내에 포함시켜야함
- 방법 1) 프로젝트 폴더에서 D3 라이브러리 포함
- 방법 2) CDN (Content Delivery Network)에서 HTML 페이지에 직접 연결
- CDN : 파일이 호스팅되고 지리적 위치를 기반으로 사용자에게 전달되는 서버 네트워크(소스코드를 다운받을 필요가 없음)
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
// D3 코드 작성
</script>
</body>
</html>- 오픈소스 라이브러리이기 때문에 D3 웹사이트에서 소스코드를 가져와 사용할 수 있음
- d3.min.js(d3 소스코드의 축소형태) → HTML head 태그 내 포함
- D3는 자바스크립트 코드이므로 <script> 태그 내에 모든 D3 코드를 작성할 수 있음
- 기존 DOM 요소를 조작해야하므로 <body> 태그 앞에 D3 코드를 작성하는게 좋음
2) 웹 서버
- 대부분의 브라우저는 웹 브라우저에서 직접 로컬 HTML파일을 제공
- 외부 파일(csv, json 등)에서 데이터를 로드하는 경우가 있으므로 처음 셋팅시 웹서버를 설정해두면 더 편리
3) 에디터
- 코드를 작성하여 실행할 수 있는 공간
- Visual Studio Code(VS Code)
- SublimeText
- Atom
- 메모장
4) 웹 브라우저
- IE8 이하를 제외한 모든 브라우저에서 작동
- 구글 크롬 사용
환경 셋팅이 끝났다면 이제 D3를 다루기 위한 기본적인 내용을 공부할 예정이다
D3 기초부터 심화까지 마스터해보겠어 ! 파이팅 !!!!!!
[D3.js] DOM 요소 선택하기
D3를 사용하여 DOM 요소 선택하기 D3를 사용하면 HTML에서 DOM 요소를 조작할 수 있음 먼저 특정 요소 또는 요소 그룹을 선택한 뒤, 다양한 D3 메서드를 사용하여 해당요소를 조작해야함 D3.js 내 메소
bodi.tistory.com
'Dev > D3' 카테고리의 다른 글
| [D3.js] DOM 요소 선택하기 (0) | 2021.06.23 |
|---|
