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

교과목번호

• 2114.411

교과목명

• 비주얼라이제이션

담당교수

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

수업 관련 정보

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

선이수교과목

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

수업목표

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

교재 및 참고문헌

• 별도의 주교재 없이 강의자료를 바탕으로 진행합니다. 아래의 참고문헌을 활용합니다.
• Visualisation Analysis and Design, Tamara Munster, 2014
• Data Visualisation: A Handbook for Data Driven Design, Andy Kirk, 2016
• The Visual Display of Quantitative Information, Edward Tufte, 1983
• Semiology of Graphics, Jacque Bertin, 1967
• Visual Complexity: Mapping Patterns of Information, Manuel Lima, 2011
• Interactive Data Visualization for the Web, Scott Murray, 2013
• 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/4)

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

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

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

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

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

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

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

5주차 : d3로 챠트 맛보기 (4/1)

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

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

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

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

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

8주차 : d3로 라인 챠트 그려보기 (4/29 : 4/22 휴강 예정)

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

8주차 : 시계열 데이터 다루기, 중첩 챠트 (5/6)

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

9주차 : 위계 정보 다루기 (5/13)

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

11주차 : 특강 (5/20 예정)

• (과제 11) 기말 프로젝트 구상

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

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

13주차 : 다변량 구조 시각화 (6/3)

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

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

• 색상 매핑
• d3의 색상 사용

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

• 기말 프로젝트 발표

참고사항

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