Module 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, in-class exercises, project assignments and independent study blocks. Project assignments are conducted in 5 groups of .
Module Details
- Title: Interactive Visualization
- Dates: November 2 – December 1 2017
- Days: Tuesday to Friday
- Lecture hours: 09.00 – 17.00
- Office hours: 09.00 – 17.00
- Language: English
Module Theme
The theme of this module is aligned with the overall theme of the fall semester 2017: instability. We interpret the term instability in the context of this course as an antonym to stability and the students are asked to look for stability, instability, or the dynamic between these two terms in data sets covering the world around us. Tectonic instability leading to earthquakes, job instability leading to fluctuating jobless rates, economic instability leading to financial crises, political instability leading to democratic overhaul, are just some of the potential examples.
Module Instructors
Joël Gähwiler
joel.gaehwiler@zhdk.ch
Data visualization tools and technology
Benjamin Wiederkehr
benjamin@interactivethings.com
+41 76 533 33 72
Data analysis, visualization, interaction, narration, communication, and evaluation
Timo Grossenbacher
timo@timogrossenbacher.ch
Data sources and data quality, data acquisition, formatting and converting data.
Module Sessions
Input Lectures
Presentations will introduce the students to the essential theory and practice of data literacy and data visualization. These lectures will be divided into design- and technology-oriented inputs. Joël Gähwiler will provide the technology inputs, Benjamin Wiederkehr will provide the design inputs.
Group Mentoring
Individual review and coaching sessions where the instructors give advice to groups of students.
Subject and Objectives
Subject Overview
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
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, visual perception, graphical encoding, visualization types, color, interaction, animation, exploration, and explanation. In a practical assignment, students apply the techniques, tools, and technologies to design and develop interactive visualizations. 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.
Module Outline
The module is split into three parts:
Week 1: Data Literacy
Students learn the basics of data acquisition, formatting, and data conversions. They get to know a wide variety of data sources.
Week 2: Reading Week
Students conduct personal research, read articles, watch videos, and listen to podcasts relevant to the topic of data visualization.
Week 3 – 5: Data Visualization
Students learn and apply the basics of data visualization within a group assignment to build their own interactive visualization.
Assignment
The students collaborate in groups of three people. We recommend to form cross-functional groups where technically-oriented people team up with design-oriented people. We propose the following process to achieve the expected results in time.
- In the first phase, the discovery phase, the students explore indicators of instability in the world around us. Such indicators can be found in economics, politics, or finances, but also in social diversity or climate phenomena. The students will research data sets which hold the potential to describe or even explain this instability.
- In the second phase, the definition phase, the students will conduct a visual analysis of the selected data sets to find their key insight. This can include visualizing different facets of a data set, visualizing a data set with different graphical methods, or putting different data sets in relation to each other. The students will define a question which they can answer using the right data set and the right visualization technique.
- In the third phase, the development phase, the students design and develop their visualization into a final visual artifact. This is either a graphical poster (minimum requirement) or an interactive prototype (advanced requirement). Depending on the student composition and the intended reader / user experience, the priority between these two artifacts can be defined for each group individually.
- In the fourth phase, the delivery phase, the students will exhibit and present their work to the rest of the class. Besides the final result, we’re interested in the overall development process from interest to question to answer. These stages should be documented as a visual journal including sketches, mockups, and prototypes.
Deliverables
Graphical Poster and Interactive Prototype
Documentation as PDF
Documentation for the web (text, images, videos)
Graphical Poster
We expect all groups to deliver and present at least a static data visualization of an appropriately sized data set which is relevant to the overarching topic of instability. The visualization should make the data set accessible to people not familiar with the subject matter and highlight important aspects like trends, patterns, or outliers. The poster should include, but is not limited to, the following content: Title, subtitle, introduction, visualization with scales, legends, and annotations, as well as methodology, sources, credits. Format: A3 Portrait
Interactive Prototype
More advanced groups are asked to deliver a prototype of an interactive version of the visualization represented on the poster. The prototype should illustrate the intended functionality in terms of interaction and animation. The prototype can be built using any of, but not limited to, the following tools and technologies: InVision, Principle, Adobe After Effects, Adobe Animate, HTML, CSS, JS, etc. Format: Clickable Prototype
Documentation
The documentation should include:
- Abstract
- Introduction into the topic and research question
- Data analysis with sources and methodology
- Design and development process with stages and variations
- Result with explanation and evaluation
- Conclusion and outlook
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.
- 10% Participation (Data Literacy)
- 60% Final work (Data Visualization)
- 30% Documentation (Data Visualization)
Any assignment that remains unfulfilled receives a failing grade.
Calendar
Week 1 | Tuesday 31.10 | Wednesday 1.11 | Thursday 2.11 | Friday 3.11 |
|---|
|
|
| Data Literacy
09.30-17.00
4.D12, TG Introduction From Data to Knowledge Data Sources Please bring your own laptop to the course! | Data Literacy
09.30-17.00
4.D12, TG Data Sources & Quality Data Types / Formats
Data Tools / Working with Data
|
Week 2 | Tuesday 7.11 | Wednesday 8.11 | Thursday 9.11 | Friday 10.11 |
|---|
| Data Literacy
09.30-17.00
4.D12, TG Data Quality More Data Tools
Geospatial Data
tbd. | Data Visualization
Introduction & Briefing 09.00-12.0
4.D12, BW, JG Topic and Data Research | Design Input 1
Basic Techniques 09.00-12.00
4.D12, BW Topic and Data Research | Tech Input I 09.00-12.00
4.D12, JG Mentoring
13.00-15.00
Atelier, BW, JG Topic and Data Research |
Week 3 | Tuesday 14.11 | Wednesday 15.11 | Thursday 16.11 | Friday 17.11 |
|---|
B&A | Data Analysis | Data Analysis | Ideation and Concept | Ideation and Concept |
Week 4 | Tuesday 21.11 | Wednesday 22.11 | Thursday 23.11 | Friday 24.11 |
|---|
B&A | Design Input 2
Intermediary Techniques 09.00-12.00
4.D12, BW Mentoring
13.00-15.00
Atelier, BW, JG Concept | Tech Input 2 09.00-12.00
4.D12, JG Concept Finalization | Aesthetics of Interaction
09.00 - 12.00 Production | Mentoring
09.00-12.00
Atelier, BW, JG Production |
Week 5 | Tuesday 28.11 | Wednesday 29.11 | Thursday 30.11 | Friday 1.12 |
|---|
B&A | Production | Aesthetics of Interaction
09.00 - 12.00 Mentoring
13.00-17.00
Atelier, BW, JG Production | Production | Presentation
09.00-12.00
4.D12, BW, JG Documentation
|
TG: Timo Grossenbacher, BW: Benjamin Wiederkehr, JG: Joël Gähwiler
| Input | Date | Content | Instructor | Slides |
|---|
| Introduction & Briefing | 8.11 | Data Visualization Foundation - Purpose
- History
- State of the Art
- Future Frontiers
Briefing - Theme
- Approach
- Deliverables
- Schedule
- Data Sources
- Materials
| BW | Interactive Visualization — Data Visualization Foundation — Benjamin Wiederkehr (2017).pdf |
| Design Input 1 | 9.11 | Basic Techniques - Data Properties
- Human Properties
- Graphical Encoding
- Graphical Methods
| BW | |
| Design Input 2 | 21.11 | Intermediary Techniques - Color
- Interaction
- Animation
- Exploration
- Explanation
| BW |
|
| Technology Input 1 | 10.11 | - Online Tools (Plotly)
- Data In & Out
- Export => Illustrator
| JG |
|
| Technology Input 2 | 22.11 | - Programmatic Analysis
- Programmatic Transformation
| JG |
|
TG: Timo Grossenbacher, BW: Benjamin Wiederkehr, JG: Joël Gähwiler
Module Materials
Data
Books
Websites
Podcasts
Videos
Articles
On ethics:
On color:
On interactivity:
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 – JavaScript library for data-driven DOM manipulation, interaction and animation. Includes utilities for visualization techniques and SVG generation.
- Vega – 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 – High-level visualization grammar that compiles concise specifications to full Vega specifications.
- Processing or p5.js – 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 – Open-Source mapping library
- Tableau for Students – Free version of Tableau for students
- Tableau Public – Free version of Tableau for publishing on the web
- Voyager and Polestar – Web-based data exploration tools from UW's Interactive Data Lab
- Lyra – Interactive visualization design environment
- GGplot2 – Graphics language for R
- GGobi – Classic system for visualizations of multivariate data
Visualization Programming Environments
- Gephi – Graph analysis application for Windows, Mac, and Linux
- SNAP – Graph analysis library for C++ and Python
- Chroma.js – Javascript library for dealing with colors
- D3.js – Javascript library with modules for dealing with colors
- HCL Wizard – Tool for viewing, manipulating, and choosing HCL color palettes
- I Want Hue – Tool for generating and refining palettes of optimally distinct colors
- Colorbrewer – Tool for finding sequential, diverging, and qualitative color palettes
- Color Picker for Data – Tool for picking color palettes
- Accessible Color Matrix – Tool for building accessible color palettes
- Contrast Finder – Tool for finding good contrasts between two colors
- Chromaticity – Guidance for accessible visualization color design
- Color Oracle – Free color blindness simulator for Window, Mac and Linux
Data Literacy Resources
Here are the slides for this part of the course. Also have a look at the speaker notes, sometimes there's a bit more information.
General / good reads
Data quality
- The Quartz Guide To Bad Data
- Tidy Data – although the principle of tidy data stems from an R developer and the examples in this document are made in R, "tidy data" is a very valuable standard that you should achieve when working with data. Once your data is "tidy", visualization in R (or in any other language / framework) becomes easier. You can also look at the more formal and less R-heavy scientific paper.
Regex
Geospatial data
Working with the CLI
The command line interface (CLI, often referred to as "shell" or "terminal") is a very powerful tool, and each operating system has one. Working with the CLI is easiest on Linux and Mac, and they are both similar since they are both based on Unix. I really recommend getting to know the 101 of working with the terminal, e.g. through this tutorial. Here are some more tips for working with data on the CLI. This Twitter account gives useful and sometimes funny tips on how to make the most of the terminal.
Data processing in R