...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
(1) Syllabus Overview
The module takes place over 5 weeks, including a reading week (3), from Tuesday to Friday, 9.30 – 17.00, November 02 – December 01 2017.
Class sessions include lectures, discussions, mentoring sessions, in-class exercises, assignments and independent study blocks.
Projects are conducted in groups of 4 students.
Module Details
- Course title: Interactive Visualization
- Dates: November 2 – December 1 2017
- Days: Tuesday to Friday
- Lecture hours: 09.30 – 17.00
- Office hours: 09.30 – 17.00
- Classroom: TBD
Module Instructors
Joël Gähwiler
joel.gaehwiler@zhdk.ch
Technology and programming
Benjamin Wiederkehr
...
benjamin@interactivethings.com
...
Data analysis, visualization, interaction, narration, communication, and evaluation
...
Timo Grossenbacher
...
timo.grossenbacher@srf.ch
...
Data literacy, acquisition, mining, formatting, and basic statistics
...
...
Class Sessions
- Lectures: Presentations will introduce the students to the essential theory and practice of data visualization.
- Design Studio: Collective review sessions where the students can get and give feedback to their current state.
- Coding Lab: Collaborative coding sessions where the students can experiment and get support.
- Group Mentoring: Individual review and coaching sessions where the instructors give advice to groups of students.
(2) Overview and Objectives
Topic Overview
(Description and explanation of the relevancy of the topic of the course)
Many aspects of society, science, business, finance, journalism, and everyday human activity, become ever more quantified. As a result, our world is awash with data of increasing amount and complexity. Still, we must keep afloat with our innate human abilities and limitations. For designers in this environment, working confidently with data becomes an essential skill. Visualization is one way to tame this information overload: well-designed representations replace difficult cognitive calculations with simpler perceptual interpretations. They can thus improve accessibility, comprehension, and memory. More literally, visualization is the process of transforming data into visuals like charts, graphs, and maps. These are then used to explore, evaluate and explain insights hidden in the data. The goal being to engage and aid diverse audiences in analytical sense and decision making.
Student Objectives
(Objectives set for the students: learning outcomes and expected deliverables)
This course provides students with an introduction into the theory and practice of designing with data while keeping the human in mind. They learn the basics for creating effective data visualizations. This includes principles from graphic design, human-computer interaction, perceptual psychology, cognitive science, and statistics. We touch on the topics of data literacy, graphical encoding, visual perception, interaction, animation, narration, color, maps, networks, graphs, and text visualization. In practical exercises, students apply the tools and technologies to design and develop interactive visualizations for the web. After this course, students will be able to turn a data source into a useful, truthful, and beautiful data experience— tailored to specific information needs or communication goals.
(3) Module Outline
The module is split into three parts:
- One week of data literacy where students learn the basics of data acquisition, mining, formatting, and statistics.
- One week of self-study where students read articles, watch videos, and listen to podcasts relevant to the topic of data visualization.
- Three weeks of learning and applying the basics of data visualization within a group assignment to build their own interactive visualization.
(4) Expectations and Grading
Grades will be based on group presentations, class participation, home assignments, documentation (journal) and final work.
Contributing to constructive group feedback is an essential aspect of class participation.
Regular attendance is required. Two or more unexcused absences will affect the final grade. Arriving late on more than one occasion will also affect the grade.
...
Any assignment that remains unfulfilled receives a failing grade.
(5) Deliverables
See Example below:
...
- The journal should be structured in a generally comprehensible manner
- The lecture notes, including annotations, are stored
- Notes, sketches for each lesson should be included as well
(6) Course Materials
Essentials
Add a short list of specific articles, chapters, videos, podcasts, etc. here.
Books
- The Visual Display of Quantitative Information(2nd Edition), E. Tufte. Graphics Press(2001)
- Envisioning Information, E. Tufte(2005)
- Visual Thinking for Design, Colin Ware, Morgan Kaufman(2008)
- Interactive Data Visualization for the Web(2nd Edition), Scott Murray, O’Reilly(2017)
- Visualization Analysis and Design, Tamara Munzner, CRC Press(2014)
- The Functional Art, Alberto Cairo, New Riders(2012)
- Design for Information, Isabel Meirelles, Rockport(2013)
Articles
Websites
Podcasts
- Data Stories by Moritz Stefaner and Enrico Bertini
A variety of useful toolkits have been designed to help support information visualization applications. Some include support for the full visualization pipeline from data to interactive graphics, while others focus only on a subset, typically graphics and interaction.
Visualization Cheatsheets
- D3- A JavaScript library for data-driven DOM manipulation, interaction and animation. Includes utilities for visualization techniques and SVG generation.
- Vega- A declarative language for representing visualizations. Vega will parse a visualization specification to produce a JavaScript-based visualization, using either HTML Canvas or SVG rendering. Vega is particularly useful for creating programs that produce visualizations as output.
- Vega-Lite- A high-level visualization grammar that compiles concise specifications to full Vega specifications.
- Processing or p5.js- A popular Java-like graphics and interaction language and IDE. Processing has a strong user community with many examples. p5.js is a sister project for JavaScript.
- Leaflet– a popular open-source mapping library
- Tableau for Students- get a free Tableau license as a student
- Tableau Public- a free version of Tableau which publishes to the web
- Voyager and Polestar– web-based data exploration tools from UW's Interactive Data Lab
- Lyra- an interactive visualization design environment
- GGplot2- a graphics language for R
- GGobi- classic system for visualizations of multivariate data
- Gephi- an interactive graph analysis application
- NodeXL- a graph analysis plug-in for Excel
- GUESS- a combined visual/scripting interface for graph analysis
- Pajek- another popular network analysis tool
- NetworkX- graph analysis library for Python
- SNAP- graph analysis library for C++
(7) Calendar
Content week by week or module calendar. See examples below:
...
Week 1 | Tuesday 28.3 | Wednesday 29.3 | Thursday 30.3 | Friday 31.3 |
|---|
Morning | Kickoff
09.30-11.00
Introduction about the module, Presentation of the topic, Note on Documentation
JB 11.00-12.00
Ethnographic study
NF | Field Research | Independent Study
11.00-12.00
Exercise: Idea
Generation
JB
| Field Research / Independent Study
|
Afternoon | 13.00-13.45
Brainstorming session
NF 13.45-14.15
Exercise: group building
JB 14.15-14.45
Renting Equipment
NF 14.45-15.30
Get prepared for Field Research
NF 15.30-
Initial Field Research | 13.00-14.00
Group presentations:
First Impressions
JB, NF 14.00-15.00
Sense Making (AEIO)
NF 15.00-
Independent Study
| 13.00-15.00
Mentoring: Sense Making and Clustering (Going Back to the Field)
NF 15.00-
Field Research | 13.00-15.00
Group presentations: Inspirations and Field Research
JB, NF
|
Week 2 | Tuesday 4.4 | Wednesday 5.4 | Thursday 6.4 | Friday 7.4 |
|---|
Morning | 09.30-11.30
Theory Class - IAD Method
JB
| 09.30-12.00
Mentoring: Narrowing
Down
NF | Independent Study
| Independent Study:
Preparation of presentation |
Afternoon | 13.00-13.15
Expectations for the week
JB 13.15-15.30
Exercise: Very rapid prototyping
JB 15.30-16.00
Group Presentations: mock-ups
JB, NF | Independent Study:
Desk-based Research
(Related work,
state of the art) | Independent Study
| 13.00-15.00
Group presentations: Related Work and Production Plan for the next 4 weeks
JB, NF |
Week 3 | Tuesday 11.4 | Wednesday 12.4 | Thursday 13.4 | Friday 14.4 |
|---|
Morning | 09.30-11.30
Theory Class - IAD Method
JB 11.30-12.30
Mentoring: Protyping
JB | Independent Study
| 09.30-12.00
Mentoring
JB | Holiday |
Afternoon
| 13.00-15.00
Exercise: Prototyping Ideas
JB 15.00-
Independent Study | Independent Study
| 13.00-15.00
Group presentations: Prototypes
JB
|
Week 4 | Tuesday 18.4 | Wednesday 19.4 | Thursday 20.4 | Friday 21.4 |
|---|
Morning | 09.30-12.00
Mentoring: Storytelling
JB | Independent Study | Independent Study | 09.30-12.00
Group presentations:
Storytelling
NF |
Afternoon
| 13.00-15.00
Exercise: Storytelling
JB | 13.00-16.00
Mentoring
JB
| Independent Study | 13.00-16.00
Mentoring: Storyboards
NF
|
Week 5 | Tuesday 25.4 | Wednesday 26.4 | Thursday 27.4 | Friday 28.4 |
|---|
| Reading Week | Reading Week
Mentoring: Video production (optional)
NF | Reading Week | Reading Week |
|
Week 6 | Tuesday 2.5 | Wednesday 3.5 | Thursday 4.5 | Friday 5.5 |
|---|
Morning | 09.30-12.00
Group presentations:
Back from the reading week
JB, NF
| 09.30-12.00
Mentoring
JB | 09.30-12.00
Mentoring: Editing
NF | 09.30-12.00
Final Group presentations
JB, NF |
Afternoon | 13.00-16.00
Mentoring: Editing
NF | Independent Study | Independent Study |
|
JB: Joëlle Bitton, NF: Nicole Foesterl