Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

꿈데디 D3.js강의 2주차

3,442 views

Published on

꿈꾸는 데이터 디자이너 d3.js 실무강의 2주차

Published in: Education
  • Be the first to comment

꿈데디 D3.js강의 2주차

  1. 1. d3.js 외부 데이터 불러오기 & 막대그래프 2015.4.4
  2. 2. Songyi Lim 오늘의 수업 실습이론 • D3.js의 데이터 종류 • CSV 형식 • JSON 형식 • 자바스크립트 ‘변수’ 개념 • 자바스크립트 ‘함수’ 개념 • D3.js의 데이터 매칭 원리 • 데이터 문장 만들기 • 외부 데이터 연동 • 막대그래프 그리기 • bl.ocks.org 만들기
  3. 3. Songyi Lim D3.js에서 활용할 수 있는 데이터들 내부 외부 단순배열 데이터 TSV CSV JSON HTML XML TEXT
  4. 4. Songyi Lim 종류 설명 TSV 데이터가 탭으로 구분된 형식. 헤더있음. CSV 반점으로 구분한 텍스트. 헤더있음. JSON JavaScript Object Notation’의 약자. XML과 비교해 간단하고 데이터 용량도 적음. 헤더없음. HTML 브라우저로 표시했을 때 데이터를 보기 좋게 표시해줌. 다른 데이터와 달리 레이아웃이 있다. XML 태그를 이용해서 데이터 표현. 범용적인 데이터 포맷. SVG도 XML의 종류 중 하나. TEXT 순수한 문자로만 구성된 데이터 파일. D3.js 외부 데이터 종류별 특징 요약
  5. 5. Songyi Lim CSV 반점으로 구분한 텍스트 d3.csv() D3.js 데이터 종류 - CSV item1, item2, item3, 120, 60, 300, 60, 50, 80, 300, 30, 90, 80, 10, 150, 헤더 • 그래프 요소에 연동할 때 속성 이름으로 다뤄짐. • CSV 형식에 헤더가 없으면 별도 처리가 필요하다 • D3.js에서는 첫 줄이 헤더라는 것을 전제
  6. 6. Songyi Lim • JavaScript Object Notation. 자바스크립트 문법을 바탕으로 하는 자료형식 • TSV나 CSV와 달리 헤더는 없다. • 여러개의 데이터는 []로 감싼다 • 데이터에 레이블을 붙일 때는 { } 사이에 ‘키 이름 : 값’의 쌍을 필요한 데이터 개수만큼 반점으로 구분. • 계층구조를 가진 데이터에서 많이 사용. [   {“item”  :  “상품A”,  “sales”  :  [150,90,300]},   {“item”  :  “상품B”,  “sales”  :  [70,920,320]},   {“item”  :  “상품C”,  “sales”  :  [20,40,360]},   {“item”  :  “상품D”,  “sales”  :  [50,210,200]},   {“item”  :  “상품E”,  “sales”  :  [400,610,100]},   ] d3.json() ex) D3.js 데이터 종류 - json JSON
  7. 7. Songyi Lim [ 실습 ] D3.js 실

×