Interactive Visualization HS2017

(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:

1. One week of data literacy where students learn the basics of data acquisition, mining, formatting, and statistics.
2. One week of self-study where students read articles, watch videos, and listen to podcasts relevant to the topic of data visualization.
3. 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.

• 40% Final work
• 20% Group discussions
• 20% Journal documentation
• 10% Class participation

Any assignment that remains unfulfilled receives a failing grade.  

(5) Deliverables

See Example below:

• Oral presentations

Students must independently prepare lectures on selected texts from the week. These can be presented in different formats. 
Possible presentation formats are:

• • Live sketching
  • Demo with prototyping
  • Slides presentation
  • etc.

The presentation should include a 3-pages written discussion, made available to the class and instructor by Friday 9am, prior to the day of the class to insure a general discussion.

The paper should include title, author, date, context, summary, bibliography.

Additional sources can be added to inform the discussion if necessary.

• Final Essay

The essay is a final 2500-words essay with a diversity of sources and bibliography (classified by genre: book, book chapter, journal article, conference article, academic thesis, newspaper article, web article, etc). 

The topic of the essay is chosen by the student and proposed by Week 8 in the form of a short paragraph (100 words) explaining the topic and the questions at stake. I will inform the student if the topic is accepted in that week. The final essay has to be submitted by Week 12.

The paper should be written in English.

• Journal/Blog

A separate 'Journal' is developed by each student that reflects on learnings from the seminar. It should be in the form of an online blog (ie. WordPress, Tumblr or other):

• 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

• https://www.vis4.net/blog/posts/mastering-multi-hued-color-scales/
• https://www.vis4.net/blog/posts/avoid-equidistant-hsv-colors/
• https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283

Websites

• Flowing Data by Nathan Yau
• Information Aesthetics by Andrew Vande Moere
• Visual Complexity by Manuel Lima
• Visualising Data by Andy Kirk
• Edward Tufte: Ask E.T. Forum by Edward Tufte
• Visual Business Intelligence by Stephen Few

Podcasts

• Data Stories by Moritz Stefaner and Enrico Bertini

Tools

Visualization Cheatsheets

• http://datavizproject.com/
• http://ft-interactive.github.io/visual-vocabulary/
• http://labs.juiceanalytics.com/chartchooser/index.html

Visualization Toolkits

• 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++

• http://colorbrewer2.org/
• http://zzolo.org/colortools
• http://hclwizard.org:64230/hclwizard
• http://contrast-finder.tanaguru.com
• https://toolness.github.io/accessible-color-matrix
• http://www.hsluv.org
• http://colllor.com

(7) Calendar

Content week by week or module calendar. See examples below:
 

Example 1

Week 1 - 20.02.17 Deconstructing Interaction Design

The focus of this introductory lesson is a discussion on the term "Interaction Design". 

From your short experience as design students in the first semester and your various experience as customers and users, we’ll uncover the variety of meanings of interaction design.

We’ll also look at the syllabus and go through the lectures to prepare.

Reading: 

Löwgren, J. & Stolterman, E. (2007). Thoughtful Interaction Design. The Process (15­-41). 

Week 2 - 27.02.17 Perspectives of design

Historical outline and introduction of design methods theories. Highlighting the notion of design, technology and human experience.

Lecture : “Perspectives of Interaction Design”

Readings: 

Carroll, J. M. (2000). Making Use: Scenario-­Based Design of Human­Computer Interactions. The MIT Press. 

Dreyfuss, H. S. (1955). Designing for People. (26-­43). 

Dubberly, H. ­(2004). How do you design? Dubberly Design Office.

Kolko, J. (2011). Exposing the Magic of Design: A Practitioner’s Guide to the Methods and Theory of Synthesis (Oxford Series in Human­Technology Interaction) (1 ed.). Oxford University Press, USA. 

Additional readings:

Dreyfuss, H. S. The designer’s role (sketch).

Kolko, J. (2007). Thoughts on Interaction Design. Brown Bear LLC. (Chapter 3) 

Week 3 - 06.03.2017 Design in the everyday context

etc..

Example 2

JB: Joëlle Bitton, NF: Nicole Foesterl