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