THE ART OF NARRATIVE VISUALIZATION
With the exponentially growing amount of data around us, we need sound training in visualization to extract meaningful information from complex datasets. This course introduces working with data visualization and digital media for students new to the fields of information and interaction design. Students learn to create clear and meaningful visualizations, tell stories with interactive graphics, and create sophisticated interaction techniques. Weekly topics include; concepts of data visualization, collection and analysis of data, basic programming skills and web languages, choosing representations and interactivity design. Each student works on a course-long project which can be either a data visualization piece that can serve as exploratory and analytical tool; or a new media interface design as it relates to their own interest. A strong interest in working with data and interactivity is required.
SYLLABUS
Class 01: What is design thinking? What is out there - introduction to information design through inspiring examples ?
In class exercise: How do you visualize information? Visual queries with simple arrays
Assigned Readings:
Tufte, The Visual Display of Quantitative Information (Chapters 1-3) Ware, Visual Thinking for Design (Chapter 1)
Lab 01: Introduction to Git workflow. Basic Web Development Tools: Introduction to HTML and CSS
Class 02: What is the question? Who is the audience? Data visualization techniques and Tufte’s principles
In class exercise: Creative visualization exercises
Assigned Readings:
Heer, Bostock, and Ogievetsky, A Tour Through the Visualization Zoo Cairo, The Functional Art (Chapter 3,4)
Lab 02: Introduction to Javascript and basic data structures
Class 03: Perception and Visual Hierarchy: From Gestalt to Bertini
In class exercise: Evaluating data visualization: How to give design critics
Assigned Readings:
Healey, Perception in Visualization
Bertin, The Semiology of Graphics (Part 1, section 1) Elliott, 3 9 Studies About Human Perception in 30 minutes
Lab 03: Advanced Javascript methods and introduction to D3; data joins, selections and scales.
Class 04: Introduction to Human-centered Design: User Experience Principles
In class exercise: Sketch to Wireframe and Interaction Design
Assigned Readings:
Norman, The Design of Everyday Things pages 135-161 & 220-236
Lab 04: D3 scales, shapes and transitions.
Class 5: Narrative Visualization: Telling Stories with Data
Class exercises: Re-mapping the narrative space (collaborative work) Assigned Readings:
Segel & Heer, N arrative Visualization: Telling Stories with Data Vallandingham, S o You Think You Can Scroll
Lab 05: D3 map and layouts. Introduction to Mapbox and spatial data.
Class 06: Storytelling and Interaction Design
Class exercises: Storyboarding, User flows and Personas Assigned Reading:
McCloud, Making Comics (Chapter 4 World Building) Review 5 project from https://docubase.mit.edu/ Review 2 projects from https://www.gapminder.org/
Lab 06: Interaction design with Javascript 1. (Javascript interaction design libraries introduction)
Class 07: User testing methods and heuristic evaluation
Class exercises: Preparing and Implementing Talk-aloud Tests Assigned Readings:
Zuk and Et al.,Heuristics for Information Visualization Evaluation
Lab 07: Interaction design with Javascript 2. (Javascript interaction design libraries introduction) Page Structure.
Class 08: Final Presentations
Lab 08: Final project coding session + debugging
**Students will follow Scott Murray, Interactive Data Visualization for the Web, 2nd Edition An Introduction to Designing with D3.