관리 메뉴

지식을 연주하는 사람

데이터시각화 언어 D3.js 넌 대체 누구냐?!! 본문

Ph.D Course/Data Science

데이터시각화 언어 D3.js 넌 대체 누구냐?!!

지식 연주가 Knowledge Designer 2015.07.27 19:36

D3.js 


데이터 분석과 시각화가 주목을 받으면서 관련된 언어선택의 이슈에 맞닿게 됩니다. 자신에게 맞는 언어를 찾아 숙련도를 높여야 하는거죠. 그러기 위해서는 각 언어에 대해 알아야 합니다. 그래서 이번에는 시각화의 대표적 언어라 할 수 있는 D3.js 를 소개합니다. 오픈소스이기 때문에 구하기도 쉽고 마찬가지로 라이브러리도 많기에 시각화를 처음 접하는 분들이 쓰기 좋은 언어입니다. 



D3 라는 이름은 Data Driven Document 의 축약형이다. D3.js 는 오픈소스 JavaScript 라이브러리로, 빅데이터를 보여주는 문서를 조작할 수 있다. 이 프로그램 집합을 사용하면 웹 기술(HTML5, SVG, SCC) 을 이용하여 동적인 그래픽을 만들 수 있다. 또한, 여러가지 시각화 방법을 제공하여 코드 다이어그램이나 거품형 차트, 계통도, 트리 등의 그림을 만들 수 있다. D3.js 는 오픈소스이기 때문에 끊임없이 개선되고 확장되고 있으며, 속도가 빠르고 다양한 플랫폼에서 실행되는 프로그램과 호환되도록 설계되었다. 완벽한 데이터 시각화 프로그램(Tebleau)을 대체할 정도는 아니지만, 좋은 부가 구성요소임을 기억해두자. D3.js 는 뉴욕 타임즈의 그래픽 편집자인 마이클 보스톡(Michael Bostock) 이 개발하였다. 

<source = 차하리아스 불가리스 저, 데이터 과학자>




위 내용에 나타난 것처럼 D3.js 는 시각화 전문 프로그램은 아니나, 전문 프로그램에 준하는 효과를 낼 수 있는 오픈소스 라이브러리로 볼 수 있습니다. 개인이 사용하기에는 오히려 적합할 수 있습니다. 라이센스 비용이 들지 않고 R 처럼 오픈소스이기 때문에 빠른 속도로 개선되고 확장되고 있기 때문입니다.

페이지 : http://d3js.org/


홈페이지의 소개에 따르면 앞선 설명처럼 데이터 문서를 제작하기 위한 자바스크립트 라이브러리라고 되어있는 것을 볼 수 있습니다. 아래는 그 문구입니다.



D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. 



D3.js 의 API Reference 를 볼 수 있는 페이지입니다. 각 API 에 대한 설명과 사용예시를 볼 수 있습니다.

페이지 : https://github.com/mbostock/d3/wiki/API-Reference



튜토리얼과 핵심 컨셉을 소개하는 페이지도 있습니다. Introduction, Let’s Make a Bar Chart, Parts I, II & III Three Little Circles 등의 순서를 따라가면서 공부하시면 보다 쉽게 D3.js 를 익히실 수 있습니다.

페이지 : whttps://github.com/mbostock/d3/wiki/Tutorialsiki/Tutorials



D3.js 강의도 있습니다. Udacity, Knight Center에서 강의하는 아래의 강좌가 대표적입니다.

페이지 : https://www.udacity.com/course/data-visualization-and-d3js--ud507

페이지 : http://journalismcourses.org/D3.html



D3.js 에 대해 살펴볼 수 있는 영상도 다수 있습니다. 몇가지를 소개합니다.

페이지 : https://www.youtube.com/watch?v=8jvoTV54nXw

페이지 : http://blog.visual.ly/visual-ly-meetup-recap-introductory-d3-workshop/



D3.js 의 라이브러리를 통해 표현할 수 있는 시각화의 예시입니다. Box Plots, Bubble Chart, Bullet Charts 등 다양한 표현을 할 수 있음을 볼 수 있습니다.

페이지 : https://github.com/mbostock/d3/wiki/Gallery


1 Comments
댓글쓰기 폼