정보문화학 비주얼라이제이션 2018 ISC Visualization 2018

교과목번호

2114.411

교과목명

비주얼라이제이션

담당교수

성명 : 원인호
이메일 : wonderino+course@gmail.com
면담방법(시간/장소) : 매 수업 후 강의실 (수업 전에 이메일로 요청)

수업 관련 정보

깃허브 : 해당 페이지에 강의 자료 등이 공유됩니다. https://github.com/isc-visualization/isc-visualization-2018
슬랙 : 슬랙 메신져를 활용하여 수강생간의 소통이 이루어질 예정입니다.

선이수교과목

필수 과목은 아니지만 아래 과목들을 선이수 하고 등록 하는 것을 추천합니다.
2114.304 정보문화기술입문
M1313.000200 웹프로그래밍개론

수업목표

웹 상에서 상호작용적인 데이터 시각화를 위한 기본적인 이론을 배우고 이를 실습한다.
d3.js 라이브러리를 기반으로, 웹 프로그래밍을 이용한 기본적인 데이터 다루기와 데이터 시각화 제작 과정을 경험한다.
고도화된 이론보다는 기본적인 챠트들을 직접 제작하면서 원리를 이해하고 응용한다.

교재 및 참고문헌

별도의 주교재 없이 강의자료를 바탕으로 진행합니다. 아래의 참고문헌을 활용합니다.
Visualisation Analysis and Design, Tamara Munster, 2014
Interactive Data Visualization for the Web, 2nd Edition, Scott Murray, 2017
The Truthful Art: Data, Charts, and Maps for Communication, Alberto Cairo, 2016
Data Visualisation: A Handbook for Data Driven Design, Andy Kirk, 2016
The Visual Display of Quantitative Information, Edward Tufte, 1983
Visual Complexity: Mapping Patterns of Information, Manuel Lima, 2011
Mastering D3.js, Pablo Navarro Castillo, 2013
Developing a D3.js Edge, Chris Viau, 2013

평가방법

출석 10%, 과제 40%, 기말 프로젝트 45%, 기타 참여 5%

출석

결석 3회 이상은 낙제 입니다.
지각 2회 당 결석 1회로 처리합니다.
피치못할 사정이 있는 경우 미리 연락 부탁드립니다.

과제

매주 실습 과제가 주어집니다.
과제는 드랍박스 과제 제출함에 제출합니다. 자세한 사항은 매 과제별로 설명하겠습니다.
제출 기한을 지난 과제물은 받지 않습니다.

기말과제

주어진 데이터셋을 가지고 직접 시각화 작업물을 제작합니다.
지난 학기 과제물 보기 : https://isc-visualization.github.io/isc-visualization-2016/
대상 데이터셋과 자세한 사항은 추후 재공지 하겠습니다.

기타 참여

슬랙을 통해 질문과 답변을 공유합니다.
수업 및 과제에 도움이 되는 정보를 공유합니다.

강의계획(주차별)

1주차 : 강의 소개 및 시각화 맛보기 (3/3)

강의소개
구글 시트로 간단히 시각화 만들어보기
HTML 기초
(과제 1) : 시각화 && HTML 맛보기, Javascript 예습

2주차 : 데이터의 이해 (3/10)

데이터 추상화
올바른 데이터 구조 만들기
HTML과 CSS 기본
(과제 2) : Javascript 예습

3주차 : 데이터 인코딩 : 마크와 채널 (3/17)

CSS 기본2
Javascript 기타 등등
SVG 기본
(과제 3) : 과제03 SVG를 만들고 Javascript로 스타일 및 속성 통제 해보기

4주차 : d3의 기본적인 사용 (3/24)

데이터 인코딩 : 마크와 채널
D3 세팅
D3 데이터 연결
(과제 4) : D3로 svg 없이 막대 챠트 만들어보기

5주차 : d3로 챠트 맛보기 (3/31)

바 챠트 그려보기
d3의 Scale에 대해 이해하기
(과제 5) 스캐터플롯 그려보기

6주차 : d3에서 데이터의 업데이트 (4/7)

d3의 업데이트 기능 이해하기
d3의 Transition 기능 이해
SVG의 transform 이해
(과제 6) 버블플롯 업데이트

7주차 : 애니메이션과 인터액션 (4/14)

d3의 update 기능 추가 이해
d3의 nested Selection 기능에 대한 심화 이해
(과제 7) 스몰 멀티플즈 Small multiples

8주차 : d3로 라인 챠트 그려보기 (4/21)

d3로 중첩 nesting 기능 그려보기
d3에서 SVG path 활용하기
챠트간 상호 연동하기
(과제 8) 스몰 멀티플즈2

9주차 : 시계열 데이터 다루기, 중첩 챠트 (4/28)

시계열 데이터 다루기
중첩 영역 챠트 그리기
(과제 9) 중첩 영역챠트

10주차 : 위계 정보 다루기 (5/12)

위계정보 다루기
위계정보 시각화 기법 Tree와 Treemap
d3로 Treemap 만들기
(과제 10) 확대축소 트리맵

11주차 : 네트워크 구조 다루기 (5/19)

네트워크 자료 구조 이해
매트릭스, 힘-방향 배치 구현
(과제 11) 기말 프로젝트 구현 개시

12주차 : 다변량 구조 시각화 (5/26)

다변량 구조를 위한 시각화 표현 기법
산점도 행렬, 평행좌표 구현
브러쉬 기능 사용
(과제 12) 기말 프로젝트 중간 점검

13주차 : 분포도 (6/2)

분포도(histogram) 이론
d3.histogram 사용

14주차 : 시각화에서의 색상 사용 (6/9)

색상 매핑
d3의 색상 사용

15주차 : 기말 발표 (6/16)

기말 프로젝트 발표

참고사항

수업 홈페이지(깃허브) https://github.com/isc-visualization/isc-visualization-2018
본 수업은 프로그래밍 강좌 수업이 아닙니다.
본 수업의 강의와 실습은 웹 프로그래밍에 대한 기본적인 지식과 경험이 있다는 전제하에 진행됩니다. 간단한 워크샵 형태의 웹 프로그래밍 강좌가 진행되지만, 해당 내용만으로는 수업을 원활히 이수하기 어렵습니다.
본 수업 수강에 앞서 선이수교과목에 추천한 강좌나 다른 프로그래밍 관련 수업을 선이수 하는 것을 추천합니다. 해당 과목의 선이수가 어려울 경우 수업 이외의 별도의 프로그래밍 자습이 필요합니다.
수강생 상황에 따라 강의 계획을 탄력적으로 운영할 계획입니다.
원칙적으로 추가 수강 신청(초안지)은 받지 않을 계획입니다.