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.

[week14] Getting started with D3.js

2,164 views

Published on

http://www.facebook.com/datadesigner2015
http://www.datadesigner.org

Published in: Data & Analytics
  • Be the first to comment

[week14] Getting started with D3.js

  1. 1. d3.js를 이해하기 위한 HTML/CSS 기초
  2. 2. 데이터수집 outwithub 데이터정제 openRefine 데이터가공+시각화 R 데이터시각화+인터랙티브 D3.js D3.js
  3. 3. 1. D3.js 개요
  4. 4. d3.js란무엇인가 - D3.js는 ‘데이터 중심의 문서’(Data-Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어입니다. - D3.js는 사용자가 입력한 시각화 규칙을 바탕으로 데이터를 반영해 시각화 결과물을 생성합니다. D3.js D3.jsData-Driven Documents Javascript
  5. 5. D3.js d3.js예시 http://d3js.org http://christopheviau.com/d3list/gallery.html http://bl.ocks.org/mbostock
  6. 6. D3.js d3.js동작과정이해하기 데이터 불러오기 (Loading) 데이터 엮기 (Binding) 시각적 요소 지정 (Transforming) 사용자 반응 지정 (Transitioning) • 시각적 요소를 그리기 전에 보여주고자 하는 데이터를 불러옴. • .tsv, .csv, .json 등 다양한 형식의 데이터 연동 가능. • 데이터를 시각적인 요소와 연동시킴. • 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연동시킴. • 데이터의 시각적인 요소 지정. • 그래프의 유형, 요소의 색상, 축과 범례의 여부 등 다양한 요소 지정 가능. • 파이, 트리맵 등 그래프 유형별로 레이아웃 코드 제공 • 클릭, 드래그 등 사용자 반응에 따른 효과 지정 가능.
  7. 7. D3.js d3.js로가능한것/불가능한것 O X 다양한 인터랙티브 기능 지원 SVG, GeoJSON 등 벡터 형태 지원 데이터와 시각적 요소 연동 오래된 브라우저 지원 비트맵 이미지 지원 원본데이터 숨김 X
  8. 8. 2. D3.js를 활용하기위한 HTML/CSS 기초
  9. 9. D3.js HTML/CSS/Javascript HTML CSS Javascript
  10. 10. D3.js HTML/CSS/Javascript HTML에 디자인 속성을 적용하는 방법 1. 내부 코드 작성 - HTML 요소 내에 스타일 태그를 지정함. - 장점 : 별도의 연동이 필요 없다. - 단점 : 수정을 한꺼번에 할 수 없고 일일이 해야 함. 2. CSS 파일 별도 작성 - HTML 요소 속성을 CSS 파일에 지정. - 장점 : 수정 및 관리 용이 보통 CSS파일 작성을 추천하지만 오늘의 실습은 내부 요소에 먼저 작성해보기
  11. 11. <body> </body> D3.js 꼭알아야하는기초개념 코드를 작성할 때는 ‘열고’, ‘닫고’
  12. 12. D3.js 꼭알아야하는기초개념 일반적인 (x,y)좌표 (0,0) HTML (x,y) 좌표 (0,0) ( x , y ) 기준은 왼쪽 상단부터
  13. 13. D3.js 꼭알아야하는기초개념 Class와 ID HTML요소에 붙는 일종의 라벨 HTML 내의 콘텐츠에서 구체적으로 하나를 찾을 때 활용 동일한 Class/ID를 가진 요소는 동일한 속성이 적용됨
  14. 14. D3.js SVG란무엇인가 웹용 벡터그래픽 HTML 문서에 직접 포함시키거나 삽입할 수 있다. 인터넷 익스플로러 8 이하를 제외한 모든 브라우저에서 지원 코드작업으로 이미지 편집 가능 품질손상없이 확대/축소 가능 SVG(Scalable Vector Graphics)
  15. 15. D3.js [실습]로컬호스트 사용법 localhost ? 컴퓨터 내부 서버를 이용해 실제 인터넷 접속 조건과 동일하게 내부 콘텐츠를 보여주는 것.
  16. 16. D3.js [실습]로컬호스트 사용법 [Mac] 1. ‘터미널’ 2. 입력 [Windows] 1. 탐색기-‘cmd’ 2. 입력 python -m SimpleHTTPServer 8888 ※ 대소문자/띄어쓰기 구분! V V V
  17. 17. D3.js [실습]로컬호스트 사용법
  18. 18. D3.js [실습]HTML문서기초구조 html 문서 만들기 1. 에디터 프로그램을 켭니다. 2. 저장합니다. ‘.html’
  19. 19. D3.js [실습]HTML문서기초구조 페이지 관련 정보 공간 ex) 속성 파일 경로, 페이지 제목, 메타정보 등 페이지 콘텐츠 공간 ex) SVG, D3.js, 제목, 글, 영상 <!— <head> —> <!— <body> —>
  20. 20. D3.js [실습]HTML문서기초구조 <!— CSS요소 작성 —> <!— Javascript 작성 —>
  21. 21. D3.js [실습]HTML문서기초구조 <!— CSS 파일 —> <!— Javascript 파일 —> <!— 경로설정 주의 —> 경로가 일치하지 않으면 문서가 제대로 작동하지 않음.
  22. 22. D3.js [실습]HTML문서기초구조 <!— 경로설정 방법 —> 1. 같은 폴더 내에 있을 때 2. 하위폴더에 있을 때 3. 상위폴더에 있을 때
  23. 23. D3.js [실습]svg만들기 width = 가로 height= 세로
  24. 24. D3.js [실습]svg도형만들기-사각형 x = 사각형 가로 시작점 y = 사각형 세로 시작점 width = 가로 height = 세로
  25. 25. D3.js [실습]svg도형만들기-둥근사각형 x = 사각형 가로 시작점 y = 사각형 세로 시작점 width = 가로 height = 세로 rx = 가로 둥근 정도 ry = 세로 둥근 정도
  26. 26. D3.js [실습]svg도형만들기-원 cx = 원의 가로 좌표 cy = 원의 세로 좌표 r = 원 반지름
  27. 27. D3.js [실습]svg도형만들기-원 100px 50px 20px
  28. 28. D3.js [실습]svg도형만들기-타원 cx = 원의 가로 좌표 cy = 원의 세로 좌표 r = 원 반지름 rx = 가로 둥근 정도 ry = 세로 둥근 정도
  29. 29. D3.js [실습]svg도형만들기-다각형 (x,y) 꼭지점을 이어서 도형을 만드는 방식
  30. 30. D3.js [실습]svg도형만들기-선 시작점 (x1, y1) 끝점 (x2,y2) 선의 색상 : stroke
  31. 31. D3.js [실습]svg도형만들기-속성변경1:색상 fill : 도형 안의 색상 opacity : 도형의 불투명도
  32. 32. D3.js [실습]웹색상구조
  33. 33. D3.js [실습]웹색상구조-HEX HEX 각 지수는 0~9, a~f까지 가능. 0에 가까울수록 검은색 F에 가까울수록 흰색 #000000 빨강 초록 파랑
  34. 34. D3.js [실습]svg도형만들기-속성변경2:테두리 fill : 도형 안의 색상 stroke : 도형 테두리 색상
  35. 35. D3.js [실습]왜D3.js를활용하면편리한가? 데이터를 시각화 요소에 자동 반영 ex) 반지름, 높이, 요소의 개수 …
  36. 36. D3.js [실습]svg도형만들기-예제
  37. 37. D3.js [실습]HTML 요소활용해보기
  38. 38. D3.js [실습]d3.js연동시키기 d3.js 작동방법 - d3.js가 작성된 주소에서 d3.js를 불러옴 - 웹주소를 쓰는 방법 / 파일을 다운받아서 로컬에 연동시키는 방법 - 웹주소를 권장. 업데이트 내용이 바로 반영됨 - 주소 : http://d3js.org

×