DSCI 532: Data Visualization II
This module continues with analysis, design, and implementation considerations for creating interactive visualizations including multiple linked views, in contrast to the focus of DSCI 531 (Data Visualization I) on the creation of single static figures.
Slack channel: https://ubc-mds.slack.com/messages/532_viz-2
Schedule
Summary
- Lectures: 11am-12:20pm Tue/Thu, Jan 2 - 25 2018, DMP 301
- Labs: 2-4pm Thu, Jan 4-25, ESB 1042
- Instructor office hours: Wed 5-6, Jan 3-24, ICICS/CS X661
Lecture Schedule
Lect | Date | Day | Topic |
---|---|---|---|
1 | 2018-01-02 | Tue | Introduction and interaction design: reactivity, responsiveness, and selection. |
2 | 2018-01-04 | Thu | Interactive navigation: panning, zooming, and other changes of viewpoint. |
3 | 2018-01-09 | Tue | Multiple view coordination: juxtaposing, partitioning and layering. |
4 | 2018-01-11 | Thu | Data reduction: filtering and aggregation of items. |
5 | 2018-01-16 | Tue | Perceptual principles, color theory. |
6 | 2018-01-18 | Thu | Rules of thumb, usability testing. |
7 | 2018-01-23 | Tue | Design and justification exercises. |
8 | 2018-01-25 | Thu | Beyond R. |
Lab Schedule
Lab | Date | Topics | Material |
---|---|---|---|
1 | Thu Jan 4 2018 | Overview of assessments; Introduction to shiny
|
tutorial html, tutorial md |
2 | Thu Jan 11 2018 |
shiny tutorial: intermediate |
tutorial html, tutorial md |
3 | Thu Jan 18 2018 |
shiny tutorial: advanced |
tutorial html, tutorial md |
4 | Thu Jan 25 2018 | Peer feedback session | instructions html, instructions md |
Assessments
This is a project-based course involving four assessments.
Week | Assessment | Weight | Due |
---|---|---|---|
1 html, 1 md | Lab Assignment 1 | 20% | Sunday January 7, 2018, at 15:00 |
2 html, 2 md | Project Milestone 1: Proposal | 10% | Sunday January 14, 2018, at 15:00 |
3 html, 3 md | Project Milestone 2: First submission | 30% | Sunday January 21, 2018, at 15:00 |
4 html, 4 md | Project Milestone 3: Final submission | 40% | Sunday January 28, 2018, at 15:00 |
Solutions
Teaching Team
Position | Name | Slack Handle | GHE Handle |
---|---|---|---|
Lecture Instructor | Tamara Munzner | @tmm |
@munzner |
Lab Instructor | Vincenzo Coia | @vcoia |
@vcoia |
Lab Instructor | Tiffany Timbers | @tiffany |
@timberst |
Teaching Assistant | Sam Hinshaw | @samhinshaw |
@hinshaws |
Teaching Assistant | Ana Crisan | @Ana Crisan |
@acrisan |
Teaching Assistant | Vaden Masrani | @vaden |
@vadmas |
Reference Material
-
Overall
- Munzner, Tamara. Visualization Analysis and Design (VAD), CRC Press, 2014. ebook link, Tamara's book page
-
Week 1: Lectures 1/2, Tue Jan 2 & Thu Jan 4. Intro, Manipulate & Interact.
- Slides: Lectures 1/2 1up PDF, 16up PDF
- Further reading: VAD Chapter 1, VAD Chapter 2, VAD Chapter 3, VAD Chapter 4, VAD Chapter 11
- Lab optional reading
- Effectiveness of Animation in Trend Visualization Robertson et al, IEEE TVCG 14(6):1325-32 (Proc InfoVis 2008).
- Demos/Videos:
- video: Same Stats, Different Graphpaper page
- Growth of a Nation
- Sortable Bar Chart
- DataStripes
- Shiny Genome Browser
- video: Animated Transitions
- Stacked to Grouped Bars
- Hierarchical Bar Chart
- Collapsible Tree
- The Scrollytelling Scourge, Kosara
- How to Scroll, Bostock
- Scrollytelling: Bloomberg Warming
- Scrollytelling: NYT Oil
- Zoom to Bounding Box
- Every Map Projection
- Tissot Indicatrix
- Myriahedral Projections
- bonus: What Your Favorite Map Projection Says About You
-
Week 2: Lectures 3/4, Tue Jan 9 & Thu Jan 11. Faceting into Multiple Views.
-
Further reading: VAD Chapter 12, VAD Chapter 13
-
Demos/Videos:
- Change Blindness: Simons lab videos including door experiment, Rensink flicker videos including airplane
- unidirected linked views
- bidirected linked views
- multidirectional linking: Buckets
- Cerebral small multiples
- overview-detail navigation with unidirectional links: highcharts, d3
- EdgeMaps: one-hop highlight on click
- D3 one-hop highlight on hover
- Crossfilter
- Buy/Rent Calculator crossfilter in NYTimes article
- Parallel Coordinates
- Continuous Scatterplots
- Dual-Axis Chart Caveats from Cairo
- Using t-SNE Effectively
-
Pointers from discussion
-
Week 3: Lectures 5/6, Tue Jan 16 & Thu Jan 18. Perceptual Principles, Color Theory, Rules of Thumb.
- Slides: Lecture 5/6 1up PDF, 16up PDF
- Further reading: VAD Chapter 5, VAD Chapter 10, VAD Chapter 6
- Demos/Videos:
- Suggested reading for graphic design: The Non-Designer’s Design Book, 4th ed. Robin Williams, Peachpit Press, 2015.
- Suggested reading for usability testing:
- Suggested reading for general UX/HCI:
-
Interaction Design: Beyond Human-Computer Interaction Comprehensive HCI textbook, recently updated.
- About Face: The Essentials of Interaction Design Interaction design from a practitioner point of view, quite complete, recently updated.
- Task-Centered User Interface Design Online book from the 90s, now completely free.
- Designing with the Mind in Mind Highly readable distillation of many cognitive principles relevant for UX (user experience) designers.
-
Interaction Design: Beyond Human-Computer Interaction Comprehensive HCI textbook, recently updated.
-
Week 4: Lectures 7/8, Tue Jan 23 & Thu Jan 25. Design & Justification Exercises, Beyond R
- Slides: Lectures 7/8 1up PDF, 16up PDF
- Lecture material:
- Ana: Data Visualization Tools & GapMinder Demo: Tableau vs R 1up PDF, 16up PDF
- Ana R GapMinder demo
- Vaden Python interactive notebook
- Demos/Videos/Resources:
- Design/Redesign Process In Depth:
- Dear Data Two visualization designers gather data and create visualizations sent to each other on a hand-drawn postcard, one specific topic each week for a full year; each post includes reflections about data gathering and the design process.
- Data Sketches Two visualization designers each do a substantial project each month on the same theme, with extensive notes on process and design choices and computational methods and tests.
- Makeover Mondays (Tableau) Each week dozens to hundreds of people do a redesign of a chosen chart in Tableau, intended to be a quick thing doable in just a few hours; blog post includes critique/analysis of several of the standouts.
Learning Outcomes
By the end of the course, students are expected to be able to:
- Analyze interactive visualizations in terms of approaches to handling complexity: dynamic change over time, partitioning into multiple views, data reduction within a single view, and the derivation of new data.
- Design new interactive visualizations for complex datasets.
- Implement interactive visualizations using existing toolkits and libraries.
- Explain the trade-offs of using animation vs juxtaposed views vs derived data.
- Explain and justify methods to validate visualization design effectiveness including computational benchmarks, field studies on deployed software, and qualitative discussion of visual results.
Lecture Learning Objectives
- Interaction design: reactivity, responsiveness, and selection.
By the end of the lecture, students are expected to be able to:
- Explain costs and benefits of interactively changing views.
- Reason about the design choices involved in selection and highlighting.
- Characterize human response to latency into categories relevant to the design of responsive software.
- Interactive navigation: panning, zooming, and other changes of viewpoint.
By the end of the lecture, students are expected to be able to:
- Explain the tradeoffs between constrained and unconstrained navigation.
- Explain the tradeoffs between slicing, cutting, and projection.
- Multiple view coordination: juxtaposing, partitioning between views, and visual layering.
By the end of the lecture, students are expected to be able to:
- Analyze the use of multiple views in terms of shared versus different visual encoding and data shown.
- Discuss the tradeoffs between a single view that changes over time and multiple linked views.
- Explain the costs and benefits of different view coordination strategies.
- Reason about the order in which to select attributes to partition a dataset into multiple views according to the target user's task.
- Analyze the scalability of superimposed layers for static and dynamic layering
- Data reduction: filtering and aggregation.
By the end of the lecture, students are expected to be able to:
- Discuss the tradeoffs of filtering vs aggregation for reducing data.
- Analyze static aggregation techniques in terms of what data was derived to support them
- Analyze dynamic aggregation techniques in terms of derived data and interactive selection.
- Perceptual principles.
By the end of the lecture, students are expected to be able to:
- Discuss the perceptual issues involved in decisions about aesthetics and geoms.
- Analyze visual encodings according to whether the combination of channels is integral or separable.
- Apply the principles of expressiveness and effectiveness to choose appropriate visual channels for specific data types.
- Distinguish between contexts where visual popout will occur versus those where serial search must be used to find specific items.
- Colour theory.
By the end of the lecture, students are expected to be able to:
- Analyze the use of colour in terms of luminance, saturation, and hue.
- Choose effective strategies to accommodate colour-blind users.
- Explain the discriminability limits on the use of categorical colours and discuss appropriate alternative designs.
- Explain the drawbacks of rainbow colourmaps for ordered data and discuss appropriate alternative designs.
- Rules of Thumb, Usability Testing.
By the end of the lecture, students are expected to be able to:
- Discuss the costs and benefits of 3D visual representations for both spatial and nonspatial data
- Apply basic graphic design principles about spatial layout.
- Discuss the tradeoffs between resolution and immersion.
- Conduct basic usability testing.
- Design & Justification Exercises.
By the end of the lecture, students are expected to be able to:
- Synthesize across and reason about tradeoffs between the four major approaches to handling complexity.
- Explicitly justify design choices in terms of all visualization theory concepts previously covered in module.