JS와 D3를 이용한 시각화(Visualization): js-d3-basic

D3.js - Basic

D3.js의 이해와 사용을 위한 준비

D3.js 개요

D3.js 란?
D3.js의 특징
필요한 배경 지식
D3.js 사용을 위한 준비

HTML 페이지에 D3 Object를 생성하고 웹 브라우저에 출력하기

HTML 페이지 만들기
Selecting 과 Appending
Text와 Mouse Event Appending 하기
원과 사각형의 속성 설정과 그리기

D3.js의 이해와 사용을 위한 준비 관련 페이지 보기

D3.js 개요

이 페이지에서는 D3.js를 소개하기 위하여 몇 종류의 D3 메서드를 자세한 설명 없이(D3 메서드의 자세한 설명은 다른 페이지에 작성함) 사용한다.

D3.js 란?

D3.js는 JavaScript 라이브러리로 데이터 기반 프레임 워크(Data-driven framework)이다. D3.js를 이용하면 더 적은 코드 라인으로 데이터 시각화 차트, 그래프, 지리 공간지도, 애니메이션(Animation) 등을 용이하게 실현할 수 있다.
데이터 탐색 및 분석을 위해 웹 페이지의 DOM 요소를 선택(Selection)하고 처리(Manipulating)하여 시각화 하기 위한 오픈 소스 JavaScript 라이브러리 이다.
배열, XML, CSV 및 JSON과 같은 데이터 형식으로 저장된 데이터를 D3를 사용하여 그래프, 차트, 애니메이션 등으로 변환 할 수 있다.
원격 장치의 측정 데이터와 동작 상태, 모바일 및 기타 장치의 통화 내역 기록, Twitter, Facebook, WhatsApp과 같은 소셜 미디어 플랫폼의 메시지, 토론 또는 트위트 로그와 같은 빅 데이터, 시장 동향의 로그 및 거래 정보 등을 다양하게 시각화 할 수 있다.

D3.js의 특징

데이터 기반(Data-Driven): D3는 주로 데이터를 분석 및 탐색하여 대화 형 실시간 그래프, 차트 등으로 데이터를 시각화 하는데 사용된다.
DOM 객체 활용(DOM Manipulation): DOM 객체(or elements)를 활용하여 다양한 시각화 형식으로 데이터를 변환하는 오픈 소스 라이브러리 이다.
웹 표준 활용: 웹 표준인 HTML, CSS(Cascading Style Sheet), DOM(Document Object Model), SVG(Scalable Vector Graphics)를 사용하여 데이터를 시각화 한다. 또한 웹 표준을 사용하여 처리하기 때문에 브라우저 이외의 다른 플러그인를 필요로 하지 않는다. Chrome과 같이 "개발자 도구"를 포함하고 있는 브라우저를 사용하는 경우 별도의 디버깅 도구를 필요로 하지 않는다.
빠른 DOM 객체의 선택과 응답: 선택한 DOM 객체를 한 상태에서 다른 상태로 빠르게 변환하거나 애니메이션하거나 할 수 있다.
동적 전환 표시(Display Dynamic Transitions): 이 라이브러리는 DOM을 사용하여 빠른 동적 전환(Dynamic transition)과 시각화가 가능하도록 설계되었다.
Angular.JS, Ember.JS 또는 React와 같은 다른 JavaScript 프레임 워크와 함께 사용할 수 있다.

필요한 배경 지식

JavaScript: D3.js는 JS(JavaScript) Library 이기 때문에 기본 프로그램 언어인 JS에 대한 이해는 필수 요건이다.

참고자료: JavaScript Tutorial

HTML: HTML(Hyper Text Markup Language)은 웹 페이지를 구축하는 표준 언어로 웹 페이지의 콘텐츠를 작성하는데 사용된다.

참고자료: HTML Tutorial

CSS: CSS(Cascading Style Sheet)는 웹 페이지의 스타일(디자인, 레이아웃 및 화면 크기 등)을 지정하는데 사용된다.

참고자료: CSS Tutorial

SVG: SVG(Scalable Vector Graphics)는 벡터 기반 그래픽을 XML 형식으로 정의한다.

참고자료: SVG Tutorial

DOM: DOM(Document Object Model)을 이용하여 HTML Document의 Object에 접근(필요한 Object를 선택하여 처리할 수 있게함)하여 데이터 시각화 등을 하기 때문에 이해가 필요하다.

브라우저에서 HTML 페이지를 로드하면 HTML의 모든 태그는 부모-자식 계층 구조를 가진 DOM의 element/object로 변환된다.
DOM은 HTML 페이지를 논리적으로 구조화하여 HTML 페이지 Element의 처리(추가/수정/제거)를 용이하게 한다.
아래 예는 HTML 문서(Document)를 DOM으로 변환한 예 이다.

HTML Document와 DOM(Document object model)의 관계를 보여주기 위한 HTML Document

위 HTML Document의 DOM(Document object model)

참고자료: JavaScript HTML DOM

D3.js 사용을 위한 준비

D3.js를 본인의 컴퓨터에 설치하여 사용 방법과 Link 하여 사용하는 방법이 있다.

D3.js 설치하기

D3js.org 에서 D3.zip을 Download 한다.
D3.zip의 압축을 해제하면 d3.js와 d3.min.js가 포함 되어 있다. d3.min.js는 d3.js를 축소한 버전으로 기능은 축소되어 있지만 크기가 작기 때문에 보통 이 버전을 사용한다.
d3.min.js 사용하기: HTML 페이지에 아래와 같은 내용을 삽입한다. 아래 예는 HTML 페이지와 d3 폴더가 같은 폴더에 있는 경우이다.

d3.min.js를 Link 하여 사용하기

HTML 페이지에 아래와 같은 내용을 삽입한다. 아래 예는 d3 버전 v6를 사용하는 예이다.

HTML 페이지 예

HTML 페이지에 D3 Object를 생성하고 웹 브라우저에 출력하기

HTML 페이지 만들기

D3 Element를 웹 브라우저에 출력하기 위하여는 웹 브라우저에 출력되는 HTML 페이지가 필요하다.

HTML 페이지 예

위 HTML 문서를 복사하여 index.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 "D3 Drawing testing"가 출력된다.

Selecting 과 Appending

D3 Element를 웹 브라우저에 출력하기 위하여는 웹 브라우저의 특정 위치를 선택(Selecting)하여 이곳에 D3 Element를 첨부(Appending)하여야 한다.

selecting Method: HTML 문서 내의 DOM Object(웹 페이지가 Load되면 브라우저는 HTML 문서의 Document Object Model(DOM)을 생성한다.)를 선택하는 Method 이다.
Appending Method: 선택된 DOM Object에 Element(or Object)를 첩부(Appending)하는 Method 이다.
HTML 문서에 p(Paragraph) "hello world" Text를 Appending 하는 예

위 HTML 문서를 복사하여 d3-blue-sky.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 "D3 Drawing testing"아래에 "blue" 색의 "Blue sky"가 출력된다.

Text와 Mouse Event Appending 하기

이 예는 HTML 문서에 SVG elements Text와 Mouse event를 Appending 하는 예이다.

주의: SVG elements와 HTML elements를 처리(추가/수정/제거)하는 메서드(method)의 기술 방법이 조금 다르기 때문에 주의가 필요하다.

참고자료: SVG Tutorial

svg에 Text와 Mouse event를 Binding 하는 예

<body>
    <h3>D3 Click on Blue sky </h3>
	
	<div class="chart-container" style="max-width: 1000px;"></div>
    <script>
	// HTML DOM offsetWidth Property를 사용하여 chart-container가 표시되는 창의 폭을 구한다.
	let canvasWidth = document.querySelector('.chart-container').offsetWidth;
	let canvasHeight = 300;
	//let canvasHeight = canvasWidth / 2;
	let canvasSize = {width: canvasWidth, height: canvasHeight,
                  margin: {top: 20, right: 50, bottom: 20, left: 50}}

// chart-container 위치에 svg을 추가(Appendding) 한다.
	const d3Svg = d3.select(document.querySelector('.chart-container')).append('svg');
		d3Svg.attr('width',  canvasSize.width);
		d3Svg.attr('height', canvasSize.height);
	// svg의 속성을 Grouping 하고 초기 위치를 변환(transform method을 이용)하여 d3Canvas object 를 만든다.
	// 이제 d3Canvas에 Element를 추가하면 svg에 표시된다.
	// d3Canvas의 Element는 DOM을 이용하여 선택(selection)하고 사용할 수 있다.
	const d3Canvas = d3Svg.append('g')
            .attr('transform',`translate(${canvasSize.margin.left},${canvasSize.margin.top})`);
	  // text를 Appending 한다.
	  d3Canvas.append("text")
		// 디음에 이 Element에 접근할 필요가 있는 경우 Element에 id를 부여한다.
		.attr("id", "textId")
		.style("font-weight", "bold")
		// Text color를 Blue으로 설정한다.
		.style("fill", "blue")
		// Text 출력 위치를 설정한다.
		.attr("x",5)
		.attr("y",5)
		.text("Blue sky")
		// Text 위에 Mouse가 위치하면 Tex color가 Red된다.
		.on("mouseover", function() {
			// id를 이용하여 Text element를 선택하고 속성(Tex color)을 Green으로 설정한다.
			d3.select("#textId").style("fill", "green")})
		// Mouse가 Text 위를 벗어나면 Tex color가 Blue가 된다.
		.on("mouseout", function() {
			d3.select("#textId").style("fill", "blue")})
		// Text 위에서 Mouse를 click 하면 alert 창이 열리고 "The sky is blue." 메세지가 출력된다.
		.on("click", function() {alert("The sky is blue.")})	
	</script>
  </body>
</html>

위 HTML 문서를 복사하여 d3-sky-on-click.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 "D3 Click on Blue sky" 아래에 "Blue sky"가 "blue" 색으로 출력된다. "Blue sky" 위에 Mouse가 위치하면 Text 색이 "green"로 바뀌고 Mouse가 Text 위를 벗어나면 Text 색이 "blue"로 바뀐다. Mouse를 Text 위에서 click 하면 Alert 창이 열리고 "The sky is blue." 메세지가 출력된다.

원과 사각형의 속성 설정과 그리기

자주 사용하는 SVG elements인 원(circle)과 시각형(rect)의 추가와 속성 변경에 대한 이해를 위한 예이다.

아래 HTML 페이지가 브라우저에 출력된 예

원과 시각형을 그리고 속성을 변경하는 예

<body>
	
	<div class="chart-container" style="max-width: 1000px;"></div>
    <script>
	// HTML DOM offsetWidth Property를 사용하여 chart-container가 표시되는 창의 폭을 구한다.
	let canvasWidth = document.querySelector('.chart-container').offsetWidth;
	let canvasHeight = 140;
	//let canvasHeight = canvasWidth / 2;
	let canvasSize = {width: canvasWidth, height: canvasHeight,
                  margin: {top: 20, right: 50, bottom: 20, left: 50}}

// text를 Appending 한다.
	d3Canvas.append("text")
		// 디음에 이 Element에 접근할 필요가 있는 경우 Element에 id를 부여한다.
		.attr("id", "textId")
		.style("font-weight", "bold")
		// Text color를 Black으로 설정한다.
		.style("fill", "Black")
        // Text 출력 위치를 설정한다.
		.attr("x",5)
		.attr("y",5)
        .text("Circle and Rrectangular")

// circle를 Appending 한다.
	d3Canvas.append("circle")
		.attr("id", "circleId")
        .style("stroke", "green")
        .style("stroke-width", 2)
        .style("fill", "Aqua")
		.style('opacity', 1)
        .attr("cx", 30)
        .attr("cy", 60)
        .attr("r", 30)
        // Circle 위에 Mouse가 위치하면 Circle color가 Red된다.
        .on("mouseover", function() {
            // id를 이용하여 Circle element를 선택하고 속성(Circle color)을 Red로 설정한다.
			d3.select("#circleId").style("fill", "Red")})
        // Mouse가 Circle 위를 벗어나면 Circle color가 Aqua이 된다.
        .on("mouseout", function() {
            d3.select("#circleId").style("fill", "Aqua")})
        // Circle 위에서 Mouse를 click 하면 Circle이 사라진다.
		.on("click", function() {
            // id를 이용하여 Circle element를 선택하고 opacity 속성을 0(보이지 않게됨)으로 설정한다.
			d3.select("#circleId").style("opacity", 0)})

// rect를 Appending 한다.
	d3Canvas.append("rect")
		.attr("id", "rectId")
        .style("stroke", "Green")
        .style("stroke-width", 2)
        .style("fill", "Lime")
		.style('opacity', 1)
        .attr("x", 150)
        .attr("y", 35)
        .attr("width", 70)
        .attr("height", 50)
        // Rect 위에 Mouse가 위치하면 Rect color가 Red된다.
        .on("mouseover", function() {
            // id를 이용하여 Rect element를 선택하고 속성(Rect color)을 Red로 설정한다.
			d3.select("#rectId").style("fill", "Red")})
        // Mouse가 Rect 위를 벗어나면 Rect color가 Lime이 된다.
        .on("mouseout", function() {
            d3.select("#rectId").style("fill", "Lime")})
        // Rect 위에서 Mouse를 click 하면 Rect가 사라진다.
		.on("click", function() {
            // id를 이용하여 Rect element를 선택하고 opacity 속성을 0(보이지 않게됨)으로 설정한다.
			d3.select("#rectId").style("opacity", 0)})	
	// "Circle display" 버튼을 클릭하면 실행되는 함수로 Circle이 보이게 한다.
	function circleDisplayOn() {
		d3.select("#circleId").style("opacity", 1);
	}

// "Rect display" 버튼을 클릭하면 실행되는 함수로 Rect이 보이게 한다.
	function rectDisplayOn() {
		d3.select("#rectId").style("opacity", 1);
	}
	
    </script>
       
	<input id="pause" type="button" value="Circle display" onclick="circleDisplayOn();" />
       
	<input id="pause" type="button" value="Rect display" onclick="rectDisplayOn();" />
  </body>
<html>

위 HTML 문서를 복사하여 d3-circle-rect.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 원과 사각형이 출력된다.도형 위에 Mouse가 위치하면 도형이 적색으로 바뀌고 Mouse가 도형을 위를 벗어나면 원래 색으로 돌아온다. 도형 위에서 click 하면 도형이 사라진다. 도형 아래 "Circle display" 버튼을 클릭하면 원이 다시 보이고, "Rect display" 버튼을 클릭하면 사각형이 다시 보인다.

D3.js의 이해와 사용을 위한 준비 관련 페이지 보기