꿈꾸는데이터디자이너 'D3.js' 강의 자료 입니다 www.attrs.co.kr www.facebook.com/datadesigner2015

1. Data Designer
D3.js
01 : D3.js를 이해하기 위한
HTML/CSS 기초

2. 꿈꾸는데이터디자이너

3. 시즌2
임송이
교육 • 경희대학교 언론정보학 졸업
경력 • 뉴로어소시에이츠 데이터 디자이너 (2013.9 ~ 현재)
• 한국경제 데이터저널리즘 프로젝트 컨텐츠 제작 (2015.9 ~)
• 꿈꾸는 데이터 디자이너 1기 매니저 및 D3.js 강의 (2015.1~5)
• 경기도 데이터 기반 실시간 인포그래픽 기획 (2015.5)
• 서울시 정책통계 인터랙티브 인포그래픽 기획 (2015.1)
• 한겨레교육문화센터 ‘데이터디자이너 되기’ 강의 (2015.3)
• 유럽데이터저널리즘 로컬그룹 세미나 매니저 (2014.6)
• Knight Center for Journalism in the Americas,
‘Data Visualization and Infographics with D3.js’ 수료
www.attrs.co.kr

4. 꿈꾸는데이터디자이너

5. 시즌2d3.js 강의계획
1 HTML/CSS 기초 6 Interactive chart 1
2 D3.js 데이터 연동 7 Interactive chart 2
3 축과 척도 8 Pie chart
4 산포도 9 D3.js template
5 Transition 10 Mapping
강의 진행은 변동될 수 있습니다

6. 꿈꾸는데이터디자이너

7. 시즌2오늘의 수업
이론 실습
1. D3.js란 무엇인가? 1. 로컬호스트 설정
2. HTML 문서 기초 이해
3. SVG요소 그리기

8. 꿈꾸는데이터디자이너

9. 시즌2d3.js란 무엇인가
• D3.js는 ‘데이터 중심의 문서’(Data-Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어입니다.
• D3.js는 자바스크립트 기반의 라이브러리 언어로 HTML, CSS, SVG를 활용해 시각화 결과물을 생성합니다.
• D3.js는 사용자가 입력한 시각화 규칙을 바탕으로 데이터를 반영해 시각화 결과물을 생성합니다.
D3.jsData-Driven Documents
Javascript

10. 꿈꾸는데이터디자이너

11. 시즌2d3.js란 무엇인가
Mike Bostock Scott Murray
http://alignedleft.com/http://bost.ocks.org/mike/

12. 꿈꾸는데이터디자이너

13. 시즌2d3.js란 무엇인가
D3.js
데이터시각화
≠

14. 꿈꾸는데이터디자이너

15. 시즌2데이터 시각화 그리고 d3.js
데이터 소비자 매체 데이터
시각화데이터에서
어떤메시지를
전달할수있는가?
보는사람에게
가장효과적인
표현방식은
무엇인가?
매체의특성을
고려했을때
가장효과적인
전달방식은
무엇인가?
+ + =

16. 꿈꾸는데이터디자이너

17. 시즌2
인터랙션 O
인터랙션 X
고정데이터
자동 업데이트
데이터
고정형 시각화
인터랙티브 시각화 실시간 인터랙티브 시각화
데이터 시각화 그리고 d3.js
전시형 시각화

18. 꿈꾸는데이터디자이너

19. 시즌2데이터 시각화 그리고 d3.js
D3.js
개발자
디자이너
기획자
!
• 데이터에 따라 달라지는 그래픽 코드
• 데이터를 고려해야 하는 코딩
• 코딩 그 자체
• 디자인 및 개발까지 소화해야 하는 어려움
• 코딩 그 자체
• 데이터에 대한 이해
융합적인 능력을 요구하는 언어, D3.js

20. 꿈꾸는데이터디자이너

21. 시즌2데이터 시각화 그리고 d3.js
상호작용이 가능한 웹 기반 시각화
오픈소스 웹 표준 기술
직접 원하는 시각화 유형 제작
그래도 D3.js를 배우는 이유

22. 꿈꾸는데이터디자이너

23. 시즌2d3.js로 가능한 것 / 불가능한 것
O X
다양한 인터랙티브 기능 지원
벡터 이미지 지원
데이터와 시각적 요소 연동
오래된 브라우저 지원
비트맵 이미지 지원
원본데이터 숨김

24. 꿈꾸는데이터디자이너

25. 시즌2d3.js 동작과정 이해하기
HTML CSS Javascript

26. 꿈꾸는데이터디자이너

27. 시즌2d3.js 동작과정 이해하기
웹 브라우저를 통해 사용자에게 보이는 웹문서를 작성하기 위한 언어
HTML
( Hypertext Markup Language )
CSS
( Cascading style sheets )
웹문서의 전반적인 스타일을 지정한 문서.
JavaScript
웹브라우저에서 실행하는 스크립트 언어. 동적 요소를 지정.

28. 꿈꾸는데이터디자이너

29. 시즌2d3.js 동작과정 이해하기
HTML 요소 + CSS 스타일링
D3.js로 그래프 생성
생성된 요소 하나하나는 SVG

30. 꿈꾸는데이터디자이너

31. 시즌2d3.js 동작과정 이해하기
SVG
웹용 벡터그래픽
HTML 문서에 직접 포함시키거나 삽입할 수 있다.
인터넷 익스플로러 8 이하를 제외한 모든 브라우저에서 지원
코드작업으로 이미지 편집 가능
품질손상없이 확대/축소 가능
( Scalable Vector Graphics )

32. 꿈꾸는데이터디자이너

33. 시즌2d3.js 동작과정 이해하기
데이터 불러오기
(Loading)
데이터 엮기
(Binding)
시각적 요소 지정
(Transforming)
사용자 반응 지정
(Transitioning)
• 시각적 요소를 그리기 전에 보여주고자 하는 데이터를 불러옴.
• .tsv, .csv, .json 등 다양한 형식의 데이터 연동 가능.
• 데이터를 시각적인 요소와 연동시킴.
• 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연동시킴.
• 데이터의 시각적인 요소 지정.
• 그래프의 유형, 요소의 색상, 축과 범례의 여부 등 다양한 요소 지정 가능.
• 파이, 트리맵 등 그래프 유형별로 레이아웃 코드 제공
• 클릭, 드래그 등 사용자 반응에 따른 효과 지정 가능.

34. 꿈꾸는데이터디자이너

35. 시즌2
실습

36. 꿈꾸는데이터디자이너

37. 시즌2[실습] 로컬호스트 설정하기
localhost
컴퓨터 내부 서버를 이용해
실제 인터넷 접속 조건과 동일하게 내부 콘텐츠를 보여주는 것.

38. 꿈꾸는데이터디자이너

39. 시즌2[실습] 로컬호스트 설정하기
[ Window ]
https://www.python.org
1. python 사이트에서 python 3을 다운로드 받아 설치