[week12] D3.js_Basic

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

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 강의 진행은 변동될 수 있습니다

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

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

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

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

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

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

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

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

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

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

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

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

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

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

35. 시즌2 실습

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

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

41. 시즌2[실습] 로컬호스트 설정하기 [ Window ] 2. python 설치 후 설치된 폴더로 이동

43. 시즌2[실습] 로컬호스트 설정하기 [ Window ] 3. shift키를 누른 상태에서 폴더명을 마우스 오른쪽 버튼으로 클릭 4. ‘여기서 명령 창 열기’ 선택

45. 시즌2[실습] 로컬호스트 설정하기 [ Window ] 5. 명령창이 뜨면 아래의 명령어 입력 ※ 대소문자/띄어쓰기 구분! python -‐m http.server 8888 V V VV 입력하면 위와 같은 문구가 등장

47. 시즌2[실습] 로컬호스트 설정하기 [ Mac ] python -‐m SimpleHTTPServer 8888 ※ 대소문자/띄어쓰기 구분! V V V ‘터미널’ 여기에 입력하세요

49. 시즌2[실습] 로컬호스트 설정하기 localhost:8888 명령어 입력 후 인터넷 브라우저 주소창에 아래 문장을 입력하면 로컬호스트 접속 완료

51. 시즌2[실습] HTML 기본 구조 이해하기 페이지 관련 정보 공간 ex) 속성 파일 경로, 페이지 제목, 메타정보 등 페이지 콘텐츠 공간 ex) SVG, D3.js, 제목, 글, 영상 head body Tip HTML의 기본 개념 ‘태그’ HTML 문서는 문서요소인 태그를 이용해 컨텐츠를 표현한다. 태그는 시작태그와 종료태그가 있다. ‘열고’ ‘닫고’를 기억하자. tag 웹 화면에 보이는 내용 /tag 문을 열었으면 닫아야 한다

53. 시즌2 Tip HTML에서의 x,y좌표 일반적인 (x,y)좌표 (0,0) HTML (x,y) 좌표 (0,0) 일반적인 (x,y)좌표는 왼쪽 하단에서 시작하지만 HTML에서는 왼쪽 상단이 기준점이다 [실습] SVG 요소 만들기

55. 시즌2[실습] SVG 요소 만들기 width heightsvg 01_svg.html

57. 시즌2[실습] SVG 요소 만들기 width height (x,y) rect 02_rect.html

59. 시즌2 width height (x,y) (rx/ry) rect [실습] SVG 요소 만들기 03_rect2.html

61. 시즌2 (cx,cy) r circle [실습] SVG 요소 만들기 04_circle.html

63. 시즌2 (cx,cy) ellipse (rx) (ry) [실습] SVG 요소 만들기 05_ellipse.html

65. 시즌2 points=“x,y” polygon (“x,y”) (“x,y”) [실습] SVG 요소 만들기 06_polygon.html

67. 시즌2 (x1, y1) (x2, y2)line [실습] SVG 요소 만들기 07_line.html

69. 시즌2 fill opacitystroke [실습] SVG 요소 만들기 08_fill.html

71. 시즌2 Tip 웹 색상 구조 ‘HEX’ #000000 빨강 초록 파랑 각 지수는 0~9, a~f 까지 가능. 0에 가까울수록 검은색 F에 가까울수록 흰색 [실습] SVG 요소 만들기 Tip Opacity값 보통 그래픽 프로그램에서 opacity값은 %로 계산되지만 웹에서 opacity값은 0부터 1까지다. 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1

73. 시즌2[실습] D3.js가 편리한 이유 데이터 요소 데이터를 시각화 요소에 자동으로 반영

75. 시즌2오늘의 실습 [ 1 ] 빈칸 채우기 [ 2 ] SVG 도형 그리기 09_practice.html

76. Neuro Associates ・ Portfolio : neuroassociates.co.kr/portfolio ・ Address : 서울특별시 마포구 상수동 145-1 6F ・ Site : neuroassociates.co.kr ・ Mail : neuro.associates.consulting@gmail.com or info@neuroassociates.co.kr ・ SNS : www.facebook.com/neuroassociatessns ・ Phone : 02-334-2013

[week12] D3.js_Basic

More Related Content

What's hot (13)

Viewers also liked (11)

Similar to [week12] D3.js_Basic (20)

More from neuroassociates (15)

[week12] D3.js_Basic