D3.js
Download as PPTX, PDF3 likes1,204 views
D3.js (Data-Driven Documents) : 데이터를 기반으로 document를 생성하는 JavaScript 라이브러리
D3.js
- 1. ㈜유미테크 (데이터를 기반으로 document를 생성하는 JavaScript 라이브러리)
- 2. # Contents • 1. What is D3.js? • 2. Introduce • 3. Selections • 4. Dynamic Properties • 5. Enter and Exit • 6. Transformation, not Representation • 7. Transitions 사내전파교육 제목명을 적어주세요.2
- 3. 1. What is D3.js? • 데이터를 기반으로 document를 생성하는 JavaScript 라이브러리. • HTML, SVG, CSS를 이용해서 데이터에 생명력을 주입. – SVG(Scalable Vector Graphics): XML 기반의 2차원 벡터 그래픽 파일 형식. • 웹 표준을 엄격히 준수하며, modern 브라우저를 지원. 사내전파교육 제목명을 적어주세요.3
- 4. 2. Introduce • D3는 우리가 무엇을 할 수 있게 하는가? – 임의의 데이터와 Document Object Model(DOM)을 연결. – 데이터를 가공하여 그 결과를 document에 적용. • D3는 데이터 표현을 어떻게 하는가? – 데이터에 기반한 효과적인 document 생성 – 상상할 수 없을 정도의 유연성을 제공하고 CSS3, HTML5, SVG와 같은 웹표준의 모든 기 능을 제공 – 굉장히 빠른 속도와 대규모 데이터 처리 및 사용자 인터랙션과 애니메이션을 동적으로 제공 – 다양한 컴포넌트와 플러그인 형태로 코드 재사용 가능 • Core, Scales, SVG, Time, Layouts, Geography, Geometry, Behaviors 사내전파교육 제목명을 적어주세요.4
- 5. 3. Selections • Imperative 접근방법을 이용한 document 수정은 tedius. – 반복과 임시 변수들을 개발자가 처리 • D3는 declarative 접근방법과 selections 이용 – tag, predicates, attribute values, class, ID를 selections에 사용 – modern 브라우저에서 가능. 이전 브라우저는 Sizzle 사용 사내전파교육 제목명을 적어주세요.5
- 6. 4. Dynamic Properties • D3는 styles, attributes 이외의 많은 properties를 데이터에 대한 함수로 지정. – d3.geo.path는 geographic coordinates를 SVG path data로 투영 • 다양한 함수와 함수 팩토리 제공 – HSL: Hue, Saturation, Lightness – data is bound only once. 사내전파교육 제목명을 적어주세요.6
- 7. 5. Enter and Exit • 새로운 데이터에 대한 노드 생성과 필요없는 데이터에 대한 노드 삭제 – 노드 생성 – 각 selection을 분리해서 적용 – 성능향상과 전환 제어를 제공 • 데이터에 기반한 document 변형. – 사용자 인터랙션, 애니메이션 효과, 비동기적인 요소들. 사내전파교육 제목명을 적어주세요.7
- 8. • D3는 그래픽 요소를 표현하기 위한 새로운 방법이 아님. – D3를 이용해서 SVG 엘리먼트를 생성하고 CSS를 적용시킴. – 웹표준을 준수하므로 디버깅이 용이함. – Unlike Processing, Raphaël, Protovis 6. Transformation, not Representation 사내전파교육 제목명을 적어주세요.8 Raphaël Protovis Processing
- 9. 7. Transitions • Transition을 위한 함수를 제공함으로써 자연스러움(FOCUS ON!)을 제공 – elastic, cubic-in-out, linear, etc... • Interpolate를 통한 primitives 및 혼합형 데이터 지원 – primitives: 숫자형 데이터 및 크기나 경로데이터 값은 문자열 내장 숫자형 • Interpolate registry 확장을 통한 복잡한 프로퍼티 및 데이터 구조 지원 사내전파교육 제목명을 적어주세요.9
- 10. 10. References • D3.js – http://www.d3js.org • Sizzle – http://sizzlejs.com • Raphael – http://raphaeljs.com/ • Protovis – http://mbostock.github.io/protovis/ 사내전파교육 제목명을 적어주세요.10
Editor's Notes
- #4: [D3.js] 데이터 시각화 프레임워크 [modern 브라우저] 웹 표준을 준수하며 사용자가 방문한 웹사이트를 브라우저에 특화된 기능을 사용하지 않고, 만족할만한 수준의 속도로 렌더링하여 제공하는 브라우저. 예) Microsoft IE9, Google Ghrome, Mozilla Firefox, Apple Safari, Opera [SVC 개발] SVG는 매크로미디어와 마이크로소프트가 VML을 제안했지만, 애플과 썬 마이크로시스템즈가 대응하는 포맷인 PGML을 제안한 이후, W3C에 의해 1998년부터 개발되기 시작했다. 2001년 9월 4일 - SVG 1.0 권고 2003년 1월 14일 - SVG 1.1 권고 2003년 1월 14일 - SVG Tiny(이하 SVGT)와 SVG Basic이 W3C에 권고 2008년 12월 22일 - SVGT 1.2 권고. [SVG 지원] 인터넷 익스플로러는 IE9부터 SVG를 지원한다. 인터넷 익스플로러를 위한 플러그인이 어도비 사에서 나왔으나, 2009년 1월 1일부터 지원을 중단하였다.[ 오페라는 8.0 beta3부터 SVG 1.1 Tiny를 지원한다. 모질라 파이어폭스(1.5 베타 1 이후)는 SVG 1.1의 지원을 위한 기능을 개발 중이다.
- #5: [D3 데이터 표현] 데이터에 기반한 효과적인 document 생성 >> 생각할 수 있는 모든 것을 제공해 주는 monolithic framework이 아니라, 데이터에 기반한 표현 >> 데이터를 나타내기 위한 전형적인 표현방법을 회피하고, D3 Components Core - selections, transitions, data, localization, colors, etc. Scales - convert between data and visual encodings SVG - utilities for creating Scalable Vector Graphics Time - parse or format times, compute calendar intervals, etc. Layouts - derive secondary data for positioning elements Geography - project spherical coordinates, latitude & longitude math Geometry - utilities for 2D geometry, such as Voronoi diagrams and quadtrees Behaviors - reusable interaction behaviors
- #6: [Sizzle] - 순서 JavaScript로 만들어진 CSS selector 엔진 - 시스템 라이브러리로 추가 용이
- #7: [like something ?] jQuery, Prototpye .. bute [ 함수 및 함수 팩토리] area, line 그리고 pie charts 를 위한 SVG Shapes [geographic coordinates] GeoJSON(http://geojson.org) is a format for encoding a variety of geographic data structures. [path data] - http://www.w3.org/TR/SVG/paths.html#PathData A path is defined by including a ‘path’ element which contains a d="(path data)" attribute, where the ‘d’ attribute contains the moveto, line, curve (both cubic and quadratic Béziers), arc and closepath instructions.
- #8: [데이터에 긱반한 document 변형] 요소의 생성과 제어를 모두 포함. 사용자 인터랙션과 애니메이션 효과 또는 비동기적인 신호에 의해서도 기존 document를 변경가능게함. 서버상에서 document가 생성되고 D3를 통해서 클라이언트에서 갱신 가능.
- #9: [Processing] http://processing.org/ [Raphael] http://raphaeljs.com/ 웹상에서 벡터 그래픽 작업을 용이하게 하기 위한 JavaScript 라이브러리 [Protovis] http://mbostock.github.io/protovis/ low-level libraries for visualization은 쉽게 지루해지는 이유가 있어서, Protovis는 상속, 확장 그리고 레이아웃 개념을 적용시켜 데이터 생성을 쉽게 하는 동적 프로퍼티를 제공.