Skip to content

D3.js

D3.js(D3 또는 Data-Driven Documents)는 웹브라우저 상에서 동적이고 인터렉티브한 정보시각화를 구현하기 위한 자바스크립트 라이브러리이다. D3.js는 프로토비즈의 라이브러리로 정보시각화 라이브러리이며, SVG와 HTML5, CSS 등 웹표준에 기반해 구현되어 있다. 2012년 8월에 2.0.0 버전이 릴리즈되었으며, 2016년 6월에 4.0.0이 릴리즈 되었다.

데이터 시각화 회사인 데이터미어(Datameer)에서는 공식적으로 D3.js를 핵심 기술로서 활용하고 있으며, 뉴욕 타임즈에서는 인터렉티브 기사를 제작할 때 D3.js를 활용해오고 있다. 오픈스트리트맵의 iD 에디터도 D3.js를 사용하고 있다. 또한 GeoJSON과 Topojson을 지원하고 있어서 웹에서 지도를 표현할 때도 사용된다.

API 구조

D3.js API는 수백 개의 기능이 있으며 다음의 논리적인 단위로 묶을 수 있다:

  • 선택(Selections)
  • 변화(Transitions)
  • 배열(Arrays)
  • 수식(Math)
  • 색(Color)
  • 스케일(Scales)
  • SVG
  • 시간(Time)
  • 레이아웃(Layouts)
  • 지오그래피(Geography)
  • 지오메트리(Geometry)
  • 행위(Behaviors)

오픈소스 시각화 라이브러리 d3.js 개발 10년동안 배운 것

  • 10 Years of Open-Source Visualization / Mike Bostock / Observable
  • 툴을 만드는데 있어서 가장 중요한 건 사용법 교육. 모든 문서 형태중 예제가 가장 효과적
  • 사용자를 지원하는 것은 강력한 연구수단. 도와주면서 결함을 빨리 찾을수 있음. 하지만 모두를 도울 수는 없고, 그걸 목표로 삼지 말 것
  • 실용적이진 않은 멋부리기 조심: 인터랙션/애니메이션 같은 기술적인 이쁜 것들에는 비용이 들어감. 무엇보다 정적인 형태에 집중할 것
  • 시각화는 탐색부터 설명까지 하나의 스펙트럼임. 모든 시각화가 동일한 목적에 쓰인느게 아니므로, 디자인 할때 스펙트럼의 어디에 있는지를 파악할 것
  • 대부분의 경우, 시각화 작업의 80%는 데이터를 만지는 것이어야 함. 시각화는 분석의 최종결과. d3-array 와 d3-dsv를 가장 많이 쓰고, tidy.js 나 Arquero 같은 도구가 나와서 기쁨
  • 데이터를 실제 넣어 보기 전에는 특정 시각화 형식에 얽메이지 말 것
  • 10%의 코드가 90%의 버그를 유발
  • 아무리 당신의 작업이 좋아도, 인터넷에서는 누군가 아픈 말을 할거고 기분이 나빠질 것
  • 혼자 가지 말 것. 검증,피드백,지원 및 멘토링을 할수 있는 팀을 찾을 것
  • 좋은 시간을 보내세요. 즐긴다면 실패해도 후회하는 일이 줄어듭니다.

See also

Favorite site