Interactive Visualization HS 2017

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 3 students.

Module Details

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

Please bring your own laptop to the course!

Week 2: Reading Week
Students 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.

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.

• 10% Participation (Data Literacy)
• 60% Final work (Data Visualization)
• 30% Documentation (Data Visualization)

Any assignment that remains unfulfilled receives a failing grade.

Deliverables

• Graphical Poster (Representation) & Interactive Protoype (Experience)
• Extensive Documentation as PDF (Process)
• Assets for IAD Documentation (Images & Videos, Text)

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, annotations, methodology, sources, credits.

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.

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
• Interactive or not? https://www.fastcodesign.com/3069008/the-problem-with-interactive-graphics and https://www.vis4.net/blog/posts/in-defense-of-interactive-graphics/ and https://medium.com/@dominikus/static-visualizations-do-not-exist-b2b8de1ed224

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
• Tutorials & Resources by Alberto Cairo

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
• https://www.rstudio.com/wp-content/uploads/2015/03/ggplot2-cheatsheet.pdf - a cheatsheet for ggplot2 (see below)

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

Visualization Tools

• 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
• RAWGraphs - easily prototype or even build multivariate & more advanced data visualizations in the browser.
• Lyra - an interactive visualization design environment
• ggplot2 - a graphics language for R
• GGobi - classic system for visualizations of multivariate data

Visualization Programming Environments

• Bl.ocks: Code examples, hosting, and reviews
• Bl.ocks Explorer: Explore and discover bl.ocks based on D3 API calls
• Block Builder: Environment to create, edit, and fork D3 examples

Network Analysis Tools

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

Color Tools

• 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
• https://github.com/gka/chroma.js/ - JavaScript library for all kinds of color manipulations

Data Literacy Resources

General / good reads

• «The world’s most valuable resource is no longer oil, but data» / «Data is not the new oil»

• Data Scientist: The Sexiest Job of the 21st Century

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.

Data formats / conversions

• http://www.convertcsv.com for converting data from a myriad of formats into others, e.g. from CSV to JSON.
  
• http://www.reformattext.com for formatting text files and extracting information out of them.
  
• https://jsonformatter.curiousconcept.com/ for validating and formatting JSON data.
• An introduction to APIs
• How to use APIs with Python – The normal way of working with APIs is via a programming language. Python lends itself to communicating with many APIs, so once you know a bit of Python, this interactive course might be good for you.

Regex

• https://regexr.com/: Interactively test and learn Regex

Geospatial data

• An overview of common spatial data formats
• QGIS is an open source geographical information system and a good option for working with geodata on a non-regular basis (e.g. to look at some data or to compute areas of some regions). This tutorial collection will introduce you to it.
• https://tools.retorte.ch/map/: Convert coordinates into/from the Swiss projection system.
• Municipal boundaries and districts of Swiss cities by the BFS. Jeremy Stucki (former IAD student) has processed these and other data into TopoJSON (easier to use for web applications).

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

• Data Analysis with R: Recent and good introduction, no prior knowledge needed
• rddj.info: Resources for doing data journalism with R

Data journalism examples

Calendar

TG: Timo Grossenbacher, BW: Benjamin Wiederkehr, JG: Joël Gähwiler

Inputs

TG: Timo Grossenbacher, BW: Benjamin Wiederkehr, JG: Joël Gähwiler