Page Comparison

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 sessions, in-class exercises, project assignments and independent study blocks.
Projects Project assignments are conducted in 5 groups of 3 students.

Module Details

• Course titleTitle: 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

...

Joël Gähwiler
joel.gaehwiler@zhdk.ch
Technology and programming

Benjamin Wiederkehr
benjamin@interactivethings.com
Data analysis, visualization, interaction, narration, communication, and evaluation

...

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, acquisition, mining, formatting and basic statistics

Module Sessions

Input Lectures
Presentations will introduce the students to the essential theory and practice of data literacy and 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 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.

...

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 a practical exercisesassignment, students apply the techniques, 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.

...

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  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 Viz.Visualization)
• 30% Documentation (Data Viz.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

...

• 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

Inputs

Design Input I

• Basic Techniques

Tech Input I

• Online Tools (Plotly)
• Data In & Out

Design Input 2

• Advanced Techniques

Tech Input 2

• Programming
• Export => Illustrator

Calendar

TG: Timo Grossenbacher, BW: Benjamin Wiederkehr, 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

Final Presentation
09.00-12.00
4.D12, BW, JG

...

: Joël Gähwiler

Inputs

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

...