The Theory & Practice of Visualizing Data

https://en.wikipedia.org/wiki/Charles_Joseph_Minard

https://en.wikipedia.org/wiki/Charles_Joseph_Minard

Note: This semester-long course was given to Masters students in the computer science department at the University of Massachusetts, Dartmouth.

The size and complexity of data are quickly growing. Visualizations can take advantage of human cognition to help us better understand information. This course takes a holistic, end-to-end approach to visualization, from data collection to interface design to user evaluation. Students will gain theoretical foundations from principles in graphic design and research in cognitive science while learning how to apply this knowledge in visualization projects.

Students will be exposed to an assortment of technologies, including HTML, CSS, JavaScript, SVG, D3, Git, Mechanical Turk, and various public APIs (e.g., Twitter, Google Maps, etc.) during the creation of a semester-long interactive visualization of a data set.

Course: CIS602 The Theory & Practice of Visualizing Data
Instructor: Gideon Goldin (email: gideon_goldin@brown.edu)
Class: Tuesdays & Thursdays from 5:00 to 6:15 pm in Dion 101
Office Hours: Tuesdays & Thursdays from 6:20 to 7:20pm in Dion 302B (or by appointment)
Required Textbook: Information Visualization, Third Edition: Perception for Design (henceforth referred to as Ware; Link on Amazon)
Optional Textbook: The Visual Display of Quantitative Information, Second Edition (henceforth referred to as Tufte; Link on Amazon)


Calendar

Date Topic Reading (due this day) Assignment (assigned this day)
Week 1: Introduction to Data Visualization
Tuesday, January 28, 2014 Introduction to the course Ware Chapter 1 (up to but not including "Gibson's Affordance Theory");
The Value of Information Visualization
"Homework" #0: Peruse syllabus

Read the syllabus and browse some of the resources. Think about how visualization might relate to your area(s) of interest. There is nothing to submit for this assignment.

Thursday, January 30, 2014 Introduction to Data Visualization;
Setting up a development environment
Read the rest of Ware Chapter 1;
A tour through the Visualization zoo;
optional On Distinguishing Epistemic from Pragmatic Action
Homework #1: Hello, World!

To familiarize yourself with the technologies you will need to use for your project, you should create a web site that displays, "Hello, World!" upon some kind of interaction (e.g., key press, mouse click, etc.). The web site must also have the ability to modify the look of the text, "Hello, World!" by modifying its CSS via another interaction. You must make explicit use of HTML, CSS, and JavaScript.

Your web site must comprise three files: an HTML file, a CSS file, and a JavaScript file. Your HTML file should link the other two. You must use JavaScript functions. Be creative. If you like, take this time to get a head start on learning D3 and incorporating it into your web site by making explicit calls to D3 functions. Using D3 is not necessary, but it is highly recommended that you to start learning these technologies right away.

For this assignment, you should zip all your files together and email them to me at gideon_goldin@brown.edu. Remember, this assignment is intended get you used to using HTML, CSS, and JavaScript together, so take this time to learn as much as you can before you will need to implement more advanced functionality in the coming weeks. As per the course policy, the deadline is the midnight before class on Tuesday the 4th (i.e., Monday night).

Week 2: Designing Visualizations (Part I)
February 4, 2014 Setting up an development environment (Part II); Types of Data; Graphical Excellence; Project brainstorming Affordance, Conventions, and Design Homework #2: Brainstorming

The sooner you start thinking about final project ideas, the better shape you'll be in. For this assignment, you need to simply come up with one to two visualization project ideas. They don't have to be fully fleshed-out; a paragraph for each idea is fine, but each should make use of interaction. You do not need to stick to these ideas, they are just intended to get you to start thinking.

You can come up with ideas whereby you propose a visualization for some data set, or ideas whereby you create or modify a visualization tool/technique (rather than simply visualize a data set). For example, you might think of a novel method for interaction (http://www.aviz.fr/wiki/uploads/Teaching2013/Bier_MagicLenses.pdf), data collection/handling (http://vis.stanford.edu/wrangler/), search/querying, design (http://colorbrewer2.org/) etc.

EDIT (2/6/14): This is now due via email midnight 2/7!

February 6, 2014 Graphical Integrity; How to present a research paper; Getting on GitHub available Ware Chapter 5
Week 3: Designing Visualizations (Part II)
February 11, 2014 Data-Ink and Graphical Redesign unavailable The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations, Shneiderman, Proc. IEEE Conference on Visual Languages, Boulder 1996.
February 13, 2014 Chart Junk; Introduction to D3 unavailable S. Bateman, et al, "Useful Junk? The Effects of Visual Embellishment on Comprehension and Memorability of Charts", Proceedings of CHI '10, April 2010, pp. 2573-2582. Homework #3: Final Project Idea

Email me with your final project idea. This should be between 500 and 1000 words, and it must include a sketch-up of the visualization/tool (you may use paper and pencil, wireframing software, photoshop, etc.). You must explain the domain, the nature of the data, the type of visualization/tool, and the nature of the interaction(s) you will employ. Properly motivate your idea by explain why your visualization/tool is novel and useful. If you are in a group, have a single representative email me and include everyone's name and UID.

I will respond to each proposal. If the project idea is not adequate, you will be asked to make the necessary modifications and resubmit.

This is due via email 2/17 at midnight. There is no reading/response for the next class, and there isn't class on Tuesday, so you can focus on coming up with an strong idea.

Week 4: Data Handling
February 18, 2014 No class; Follow Monday's schedule
February 20, 2014 Data Handling; APIs; Project proposal presentation guidelines unavailable Polaris: A System for Query, Analysis and Visualization of Multi-dimensional Relational Databases. Stolte, Tang, and Hanrahan. IEEE TVCG 2002.
Week 5: Visualization Software (Part I)
February 25, 2014 D3; Project Proposals unavailable D3: Data-Driven Documents Michael Bostock, Vadim Ogievetsky, Jeffrey Heer IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2011;
unavailable A Rank-by-Feature Framework for Interactive Exploration of Multidimensional Data. Seo and Shneiderman. Information Visualization 2005.
February 27, 2014 Project Proposals available Laws of Attraction: From Perceived Forces to Conceptual Similarity. Caroline Ziemkiewicz, Robert Kosara, Proc of InfoVis 2010.
Week 6 (midpoint): Visualization Software (Part II)
March 4, 2014 Big Data (Guest Lecture by Justin DeBrabant); Git; GitHub; D3 available Pro Git (Sections 1.1-2.5, 2.8)
March 6, 2014 Git; GitHub; D3 available Pousman, Zachary, John T. Stasko, and Michael Mateas. "Casual information visualization: Depictions of data in everyday life." Visualization and Computer Graphics, IEEE Transactions on 13.6 (2007): 1145-1152.
Week 7: Visualization & Cognitive Science (Part I)
March 11, 2014 Lightness, Brightness, Contrast, and Constancy unavailable Ware Chapter 3;
available Product Plots. H. Wickham, H. Hofmann. IEEE Transactions on Visualization and Computer Graphics (Proc. InfoVis '11), 2011.
March 13, 2014 Color unavailable Ware Chapter 4;
optional D. Borland and R. Taylor. Computer Graphics and Applications, 27(2), pp. 14-17, 2007.;
availableColor Naming Models for Color Selection, Image Editing and Palette Design. Heer & Stone. CHI 2012
Week 8 (spring break; no class)
Week 9: Visualization & Cognitive Science (Part II)
March 25, 2014 Emotion, Aesthetics & Art unavailable Tractinsky, N., Katz, A.S., & Ikar, D. (2000). What is beautiful is usable. Interacting with Computers, 13, 127-145.
March 27, 2014 Space unavailable Bederson, B. B., Grosjean, J., & Meyer, J. (2004). Toolkit Design for Interactive Structured Graphics, IEEE Transactions on Software Engineering, 30 (8), pp. 535-546.;
unavailable Cockburn, A., Karlson, A., & Bederson, B. B. (2008). A review of overview+ detail, zooming, and focus+ context interfaces. ACM Computing Surveys (CSUR), 41(1), 2.
Week 10: Evaluating User-Interfaces
April 1, 2014 Experimental Design
Project progress report presentations
available Wrangler: Interactive Visual Specification of Data Transformation Scripts Sean Kandel, Andreas Paepcke, Joseph Hellerstein, Jeffrey Heer ACM Human Factors in Computing Systems (CHI), 2011
April 3, 2014 Data Analysis
Project progress report presentations
unavailable Crowdsourcing Graphical Perception: Using Mechanical Turk to Assess Visualization Design Jeffrey Heer, Michael Bostock ACM Human Factors in Computing Systems (CHI), 203–212, 2010;
unavailable Ware Appendix C
Week 11: Interaction & Animation
April 8, 2014 Animation unavailable Animation: Can It Facilitate? Barbara Tversky, Julie Morrison, Mireille Betrancourt, International Journal of Human Computer Studies, v57, p247-262. 2002.;
unavailable Effectiveness of Animation in Trend Visualization. Robertson, Fernandez, Fisher, Lee, Stasko. InfoVis 2008.
April 10, 2014 Interaction unavailable Ware Chapter 10;
available Generalized Selection via Interactive Query Relaxation. Heer, Agrawala, Willett. CHI 2008.
Week 12:
April 15, 2014 Geo-spatial Data & Mapping available WORLDMAPPER: the world as you've never seen it before. Danny Dorling, Anna Barford and Mark Newman, IEEE TVCG 12(5), 2006.;
available Rendering Effective Route Maps: Improving Usability Through Generalization. Maneesh Agrawala and Chris Stolte, SIGGRAPH 2001.
April 17, 2014 Text unavailable Information Visualization for Search Interfaces, Marti Hearst, ''Search User Interfaces'', Chapter 10;
available The Chinese Room: Visualization and Interaction to Understand and Correct Ambiguous Machine Translation. Joshua Albrecht, Rebecca Hwa, G. Elisabeta Marai. EuroVis 2009.
Week 13:
April 22, 2014 Narrative & Explanation; Finalizing your project presentations and reports unavailable Ware Chapter 9;
unavailable Narrative Visualization: Telling Stories with Data Edward Segel, Jeffrey Heer IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2010
April 24, 2014 Project Crits availableWongsuphasawat, Krist, et al. "LifeFlow: visualizing an overview of event sequences." Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM, 2011.
Week 14: Final Project Presentations
April 29, 2014 Catching-up; Final project presentations
May 1, 2014 Final project presentations
Week 15 (final week):
May 6, 2014 Final project presentations

Syllabus

Grading Policy

Grades will be determined according to the following division:

  • Class Participation: 10%
  • Reading Responses: 10%
  • Reading Presentations: 15%
  • Homework Assignments: 25%
  • Final Presentation: 30%
  • Final Paper: 10%

The following grade mapping will be used:

  • 90% - 100%: A(-/+)
  • 80% - 89%: B(-/+)
  • 70% - 79%: C(-/+)
  • 60% - 69%: D(-/+)
  • 0% - 59%: F
Participation

As much of this course will be driven by student presentations and demonstrations, lecture slides will not be posted online. In any case, attending class will behoove you as the slides contain only a small subset of lecture material.

Collaboration Policy

You are to submit your own work on all assignments. If you choose to work with a partner for your semester-long project, you will be evaluated on your individual contributions/commits to the repository. Keep this in mind while working on your project, but do not let it inhibit your progress.

Late Assigment Policy

You will get 1 (one) free pass for a late day. For the entire semester, you are permitted to turn in any assignment one day late. You will not receive extra credit if you do not "use up" this pass, but you will enjoy the satisfaction of timeliness. After using this pass, the normal late assignment policy applies: This policy entails that you lose 1 (one) letter grade each day (24 hours, weekday or weekend) you are late. There will be no exceptions to this rule (including assignments turned in just 5 or 10 minutes late) nor will any deadline extensions be given, except for verified emergencies.

Reading Presentations

Each student will be expected to complete one reading presentation. The goal of the reading presentation is to present the main points of the chosen reading, as well as provide thoughtful analysis as to the readings's contributions. Each presentation must be 15 and 25 minutes in length (plus question and answer session, so be prepared) and will be followed by a class-wide discussion regarding the reading. This is modelled after a conference-style talk. Grades will be based on how well the student(s) covered the main points of the reading in addition to the clarity of the information presented.

You can follow the optional but recommended template below for reading presentations:

  • Title & Source - Properly cite the reading. Include the title, as well as where it is from (e.g., what conference?, what book?). This should take about a minute or less.
  • Abstract - Explain the main idea(s) this reading is offering, and any important results. In other words, give a very brief review of what you will present. This should take about 3-4 minutes.
  • Motivation - Motivate the reading. Why is it important? Why should anyone care? This should also take about 3-4 minutes.
  • Methodology - How was the research conducted? If it is not a primary research paper, briefly explain a subset of the experiments or methods used. If it is a primary research paper, go into a bit more detail about what the authors did in order to make their point. This should take another 3-4 minutes.
  • Main Results - If presenting a paper, provide a description of the results that supporting the main idea. Do you agree with them? Are they biased? Why or why not? If it is not a paper (e.g., book chapter), describe how the author(s) utilized previously acquired results to support their arguments. This should also take about 3-4 minutes.
  • Impact - What is the impact of this reading (i.e. how will it affect science/industry)? How important are the findings? Spend about 2-3 minutes here.
  • Related Work - What paper(s) or system(s) is/are most closely related with this work? It could be something listed in the related work section or a subsequent paper that we have or haven't already read or discussed in class. Explain how these are related, and what makes them different. This should take 2-3 minutes.
  • Conclusion - This should be a rehashing of the abstract, given everything you've already presented. This should take about a minute or less.

This should run between 15 and 25 minutes or so. You may deviate from time suggestions for any given section, but I strongly encourage you to follow this template, as I will be listening for these points. Remember, this is 15% of your grade!

Students are to sign up for reading presentations on a first-come-first-serve basis. To sign up for a paper, simply email me at gideon_goldin@brown.edu with the reading of your choice. Available readings are provided in the Calendar. I will mark readings as unavailable as people sign up for them. I encourage you to sign up quickly!

Reading Responses

Before each paper presentation, every student must review the reading. You must submit a response to (un)available readings, but not to regular required readings, nor to optional readings (i.e., readings to be presented in class). When more than one (un)available readings is listed, you must choose one to write about (though of course you should read all of them). This will require understanding the main points of the reading and it will also require thinking critically about the reading's points. You can follow the optional but recommended template below for reading responses:

  • Title & Source - Properly cite the reading. Include the title, as well as where it is from (e.g., what conference?, what book?)
  • Novel Idea(s) - Write a paragraph describing the main idea(s) this reading is offering.
  • Main Results - If responding to a paper, provide a paragraph describing the results supporting the main idea. If it is not a paper (e.g., book chapter), describe how the author(s) utilizes previously acquired results to support their arguments.
  • Impact - What is the impact of this reading (i.e. why should we care)?
  • Related Work - What paper(s) or system(s) is/are most closely related with this work? It could be something listed in the related work section or a subsequent paper that we have or haven't already read or discussed in class. Explain how these are related, and what makes them different.
  • Question (required) - Come up with 1 question you had while reading this reading. These questions will be used to drive in-class discussion, so think carefully!

Requirements: Your reports must be between 150 and 300 words. You must include a clear, thoughtful, and explicit question as the last paragraph of your report. This must be a critical analysis question, not a defnitional or otherwise trivial question. Your questions may be used to foster in-class dialog, so they should be worthy of conversation rather than being answerable by a simple look-up.

Each student must submit a soft copy via email of their paper review by midnight the day before the class date the reading is listed for, so that I have sufficient time to review them before class.

Short Assignments

A series of short assignments will be given during the semester. Students must complete these assignments, and like paper reviews, these will be due at midnight of the day before the posted due-date online.

For each assignment, you will be instructed to submit via email or via GitHub. Thus, students will need to set up a GitHub account. Registering with a .edu account will provide you with free, private repositories (see here: https://github.com/edu). All assignment submissions must adhere to the following naming template: Firstname_Lastname_CIS602_HW# (e.g., Gideon_Goldin_CIS602_HW3).

Project

The heart of the course will rest on your semester-long projects, and each topic we learn about should contribute to your project as we progress through the course. You may choose to work by yourself or with up to two partners (the person-hours contributed should be the same in either case).

For this project, you will be tasked with designing an interactive visualization, evaluating your project, and documenting major stages of the project in your process log (i.e., sketches, ideas, prototypes, inspiration, etc.). Please choose a topic of interest to you and/or your field of study. A series of milestones will be evaluated:

  • Project proposal (~10 minute presentation)
  • Mandatory one-on-one feedback (email or in-person)
  • Mid-semester progress report (~10 minute presentation)
  • Final presentations/demos (~10 minute presentation)
  • Process Log
  • Final paper (conference length)

The purpose of this project should be to do at least one of the following: (1) build a visualization that is used to explore data and generate hypotheses in a novel environment, (2) build a visualization that makes clear a previously hidden insight or discovery or relation, (3) build a visualization tool, one that improves upon some aspect of the visualization process (data gathering/handling -> data transformation -> rendering/mapping -> interactivity/manipulation/collaboration -> data exploration). Consider Ware's guidelines (those we discussed in class) when developing your project idea.

Resources