블로터아카데미의 '선거데이터를 통한 데이터 시각화 오픈소스실습'의 타블로퍼블릭에 관한 자료입니다.
정보화 시대, 수많은 정보 속에서 정보의 흐름을 빠르게 파악하고 자신의 의견을 다른사람에게 잘 설득하는 방법은 매우 중요합니다. 데이터 시각화는 수 많은 정보를 한장의 시각화 결과물로 보여줌으로써 자신이 전달하고자 하는 메시지를 강력하게 전달할 수 있는 핵심적인 방법입니다.
4.29 재보선 완벽대비!
누구나 할 수 있는 Data visualization!
타블로를 이용해 데이터시각화로 콘텐츠를 풍부하게 만들어보세요.
http://www.bloteracademy.net/archives/ba_course/datavisual_1504 ☜ 클릭
꿈꾸는 데이터 디자이너 시즌2 교육설명회 슬라이드 입니다. 시즌2에 대한 정보와 시즌1에서의 결과에 대한 설명입니다.
www.facebook.com/datadesigner2015
https://www.facebook.com/groups/datadesigner/
www.datadesigner.org
블로터아카데미의 '선거데이터를 통한 데이터 시각화 오픈소스실습'의 타블로퍼블릭에 관한 자료입니다.
정보화 시대, 수많은 정보 속에서 정보의 흐름을 빠르게 파악하고 자신의 의견을 다른사람에게 잘 설득하는 방법은 매우 중요합니다. 데이터 시각화는 수 많은 정보를 한장의 시각화 결과물로 보여줌으로써 자신이 전달하고자 하는 메시지를 강력하게 전달할 수 있는 핵심적인 방법입니다.
4.29 재보선 완벽대비!
누구나 할 수 있는 Data visualization!
타블로를 이용해 데이터시각화로 콘텐츠를 풍부하게 만들어보세요.
http://www.bloteracademy.net/archives/ba_course/datavisual_1504 ☜ 클릭
꿈꾸는 데이터 디자이너 시즌2 교육설명회 슬라이드 입니다. 시즌2에 대한 정보와 시즌1에서의 결과에 대한 설명입니다.
www.facebook.com/datadesigner2015
https://www.facebook.com/groups/datadesigner/
www.datadesigner.org
꿈꾸는 데이터 디자이너 시즌2 교육설명회 슬라이드 입니다. 시즌2에 대한 정보와 시즌1에서의 결과에 대한 설명입니다.
www.facebook.com/datadesigner2015
https://www.facebook.com/groups/datadesigner/
www.datadesigner.org
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
19. 시즌2데이터 시각화 그리고 d3.js
D3.js
개발자
디자이너
기획자
!
• 데이터에 따라 달라지는 그래픽 코드
• 데이터를 고려해야 하는 코딩
• 코딩 그 자체
• 디자인 및 개발까지 소화해야 하는 어려움
• 코딩 그 자체
• 데이터에 대한 이해
융합적인 능력을 요구하는 언어, D3.js
27. 시즌2d3.js 동작과정 이해하기
웹 브라우저를 통해 사용자에게 보이는 웹문서를 작성하기 위한 언어
HTML
( Hypertext Markup Language )
CSS
( Cascading style sheets )
웹문서의 전반적인 스타일을 지정한 문서.
JavaScript
웹브라우저에서 실행하는 스크립트 언어. 동적 요소를 지정.
31. 시즌2d3.js 동작과정 이해하기
SVG
웹용 벡터그래픽
HTML 문서에 직접 포함시키거나 삽입할 수 있다.
인터넷 익스플로러 8 이하를 제외한 모든 브라우저에서 지원
코드작업으로 이미지 편집 가능
품질손상없이 확대/축소 가능
( Scalable Vector Graphics )
33. 시즌2d3.js 동작과정 이해하기
데이터 불러오기
(Loading)
데이터 엮기
(Binding)
시각적 요소 지정
(Transforming)
사용자 반응 지정
(Transitioning)
• 시각적 요소를 그리기 전에 보여주고자 하는 데이터를 불러옴.
• .tsv, .csv, .json 등 다양한 형식의 데이터 연동 가능.
• 데이터를 시각적인 요소와 연동시킴.
• 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연동시킴.
• 데이터의 시각적인 요소 지정.
• 그래프의 유형, 요소의 색상, 축과 범례의 여부 등 다양한 요소 지정 가능.
• 파이, 트리맵 등 그래프 유형별로 레이아웃 코드 제공
• 클릭, 드래그 등 사용자 반응에 따른 효과 지정 가능.
51. 시즌2[실습] HTML 기본 구조 이해하기
페이지 관련 정보 공간
ex) 속성 파일 경로, 페이지 제목, 메타정보 등
페이지 콘텐츠 공간
ex) SVG, D3.js, 제목, 글, 영상
head
body
Tip HTML의 기본 개념 ‘태그’
HTML 문서는 문서요소인 태그를 이용해 컨텐츠를 표현한다. 태그는 시작태그와 종료태그가 있다. ‘열고’ ‘닫고’를 기억하자.
tag 웹 화면에 보이는 내용 /tag 문을 열었으면 닫아야 한다
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