Syllabus

Welcome to CS-5630 / CS-6630! This course is an introduction to key design principles and techniques for interactively visualizing data. The major goals of this course are to understand how visual representations can help in the analysis and understanding of complex data, how to design effective visualizations, and how to create your own interactive visualizations using modern web-based frameworks.

After successful completion of this course, you will be able to…

• Critically evaluate visualizations and suggest improvements and refinements
• Apply a structured design process to create effective visualizations
• Conceptualize ideas and interaction techniques using sketching
• Use principles of human perception and cognition in visualization design
• Create web-based interactive visualizations using HTML 5, JavaScript and D3

Course Logistics

Prerequisites

Students are expected to have programming experience ideally for web development. Skills about structured programming/software engineering are recommended. In this course you are required to develop significant projects in JavaScript and D3 which can have a steep learning curve. Exceptions by permission of the instructor.

Required Textbooks

We will be using two textbooks for this class, one to cover conceptual aspects of visualization (referred to as VAD for reading assignments), one to teach the necessary technical skills (short form: D3).

Visualization Analysis and Design, Tamara Munzner, CRC Press (2014) - VAD

“Visualization Analysis and Design provides a systematic, comprehensive framework for thinking about visualization in terms of principles and design choices. The book features a unified approach encompassing information visualization techniques for abstract data, scientific visualization techniques for spatial data, and visual analytics techniques for interweaving data transformation and analysis with interactive visual exploration. It emphasizes the careful validation of effectiveness and the consideration of function before form.”

Interactive Data Visualization for the Web, Scott Murray, O’Reilly (2013) - D3 Free online version

An introduction to D3 for people new to programming and web development, published by O’Reilly. “Explaining tricky technical topics with aplomb (and a little cheeky humor) is Scott Murray’s forte. If you want to dive into the world of dynamic visualization using web standards, even if you are new to programming, this book is the place to start.” - Mike Bostock, creator of D3

Recommended Textbooks

These recommended textbooks will allow you to deepen your understanding of specific aspects of the course, such as perception and storytelling.

Design for Information, Isabel Meirelles, Rockport (2013)

“The visualization process doesn’t happen in a vacuum; it is grounded in principles and methodologies of design, cognition, perception, and human-computer-interaction that are combined to one’s personal knowledge and creative experiences. Design for Information critically examines other design solutions —current and historic— helping you gain a larger understanding of how to solve specific problems. This book is designed to help you foster the development of a repertoire of existing methods and concepts to help you overcome design problems.”

Visual Thinking for Design, Colin Ware, Morgan Kaufman (2008)

“All the clanking gears are here: variable resolution image detection, eye movements, environmental information statistics, bottom-up/top-down control structures, working memory, the nexus of meaning, and specialized brain areas and pathways. By the time he’s done, Ware has reconstructed cognitive psychology, perception, information visualization, and design into an integrated modern form. This book is scary good.” - Stuart Card, Senior Research Fellow, and manager of the User Interface Research group at the Palo Alto Research Center

The Functional Art: An introduction to information graphics and visualization, Alberto Cairo, New Riders (2012)

“If graphic designer Nigel Holmes and data visualizer Edward Tufte had a child, his name would be Alberto Cairo. In The Functional Art, accomplished graphics journalist Cairo injects the chaotic world of infographics with a mature, thoughtful, and scientifically grounded perspective that it sorely needs. With extraordinary grace and clarity, Cairo seamlessly unites infographic form and function in a design philosophy that should endure for generations.” - Stephen Few, author of Show Me the Numbers

Course Components

Lectures

The class meets twice a week for lectures and joint class activities. The class activities are designed to help you master the relevant materials, to work on your homework in groups, and to get you started on your project. The weekly schedule of lectures is posted on the course web site.

Design Studios

Held during lecture times, in design studios are you will hone your skills in designing visualizations using sketching and rapid, paper-based prototyping. Attendance for design studios is mandatory for on-campus students. You work on analyzing a dataset and create multiple sketches of visualizations to address the dataset either alone or in teams, depending on the task. Online-only participants are encouraged to work in online-teams but are allowed to work individually. Some design studios will require you to critique each others work. The design studios are part of the homework and are submitted and graded together with these.

Project

At the core of the course is your project. The goal of the project is to design a web site and interactive visualizations that answer questions you have about some topic of your own choosing. You will acquire the data, design your visualizations, implement them, and critically evaluate the results. The path to a good visualization is going to involve mistakes and wrong turns. It is therefore important to recognize that mistakes are valuable in finding the path to a solution, to broadly explore the design space, and to iterate designs to improve possible solutions. The project has an intermediate milestone that will allow you to get feedback and to iterate.

In your project you will work closely with classmates in 2-3 person project teams. You can come up with your own teams and use Piazza to find prospective team members. If you cannot find a partner we will team you up randomly. We recognize that individual schedules, different time zones, preferences, and other constraints might limit your ability to work in a team. If this the case, ask us for permission to work alone.

Homework

There is no question that the best way to learn how to create effective visualizations is by creating them. Homework assignments are going to provide an opportunity to learn design and programming skills and to test your understanding of the material. The homework assignments are designed to support you in developing your projects. See the homework as an opportunity to learn, and not to “earn points”. The homework will be graded holistically to reflect this objective.

Reading Assignments

The course schedule includes required weekly readings – you are free to study ahead, but the schedule ensures that you are prepared for the activities in class and the homework. The goal of the reading assignments is to familiarize yourself with new terminology and definitions, to learn new design and programming skills, and to determine which part of the subject needs more attention. The homework assignments will contain questions about the mandatory readings. When answering those please be brief and to the point!

Course Policies

Digital Etiquette

During lectures no internet-enabled devices (notebooks, smartphones, tablets, etc.) are permitted, unless they are necessary for class activity. While this may sound strict and weird for a CS class, there are good reasons for banning devices in the classroom: messengers and notifications are designed to grab your attention and are de-facto irresistible. Also, note-taking by hand versus on your computer was shown to be more efficient for learning (news story).

Read more on the issue by Clay Shirky (Prof. and writer on social and economic effects of Internet technologies) and Dan Rockmore (Prof. of Computer Science at Dartmouth).

Assessment Procedure

Your final grade will be determined by the number of points you collect. You can collect various amounts of points for the different parts of the class:

• Project: 40%, assessed on meeting the project criteria and your peer assessment. The 40% are split between the two milestones. 10% are assigned to your first milestone, 30% to your final submission.
• Homework: 40%, assessed on your individual submission. The homework assignments are weighted based on difficulty and length (A two week homework counts more than a one week homework).
• Exams: 20%, 10% each. There will be no final examination in this course. The weighting of the assignments may change as the semester goes on.

We will evaluate your work holistically beyond mechanical correctness and focus on the overall quality of the work using the following scale (in 0.5 increments):

10 = Excellent / no mistakes (or really minor) 9 8 = Good / some mistakes 7 6 5 = Fair / some major conceptual errors 4 3 2 = Poor / did not finish 1 0 = Did not participate / did not hand in

A weighted overall average of 10 constitutes a perfect grade and is equivalent to an A. Here are tentative grade ranges for you reference. Note that these might be adjusted.

In addition, the staff will select the top projects through a review and voting process. These projects will be presented during our last lecture, featured on the website, and get up to 12 points for their exceptional work. A small number of projects will win the coveted Best Project prize including Swiss chocolate.

Project Group Peer Assessment

In the professional world, three important features affect your productivity and success: your own effort, the effort of people you depend on, and the way you work together. For this reason we have chosen a team-based approach that values all three of those features. After each team-based project you will provide an assessment of the contributions of the members of your team, including yourself. Your scores on the projects are adjusted up or down depending on the following factors:

• Your teammates’ view of your contributions to the team
• The accuracy of your own assessment of your contributions
• The accuracy of your assessment of each of your teammates’ contributions

Your teammates’ assessment of your contributions and the accuracy of your self-assessment will be considered as part of your overall course evaluation.

Collaboration Policy

You are welcome to discuss the course’s ideas, material, and homework with others in order to better understand it, but the work you turn in must be your own (or for the project, yours and your teammate’s). For example, you must write your own code, design your own visualizations, and critically evaluate the results in your own words. You may not submit the same or similar work to this course that you have submitted or will submit to another. Nor may you provide or make available solutions to homeworks to individuals who take or may take this course in the future.

Quoting Sources

You must acknowledge any source code that was not written by you by mentioning the original author(s) directly in your source code (comment or header). You can also acknowledge sources in a README.txt file if you used whole classes or libraries. Do not remove any original copyright notices and headers. However, you are encouraged to use libraries, unless explicitly stated otherwise!

You may use examples you find on the web as a starting point, provided its license allows you to re-use it. You must quote the source using proper citations (author, year, title, time accessed, URL) both in the source code and in any publicly visible material. You may not use existing complex combinations or large examples. For example, you may not use a ready to use multiple linked view visualization. You may use parts out of such examples.

Missed Activities and Assignment Deadlines

Projects and homework must be turned in on time, with the exception of late days for homework as stated below. Because of the emphasis on teamwork, it is important that everybody attends and proactively participates in class and online. Due to the collaborative nature of the activities, it is not possible to make up any missed team activities, such as project work or design studios. (The same, incidentally, is true in the professional world.) We understand, however, that certain factors may occasionally interfere with your ability to participate or to hand in work on time. If that factor is an extenuating circumstance, we will ask you to provide documentation directly issued by the University, and we will try to work out an agreeable solution with you (and your team).

Late Policy

You can turn in your assignment up to two days late, however, for each day that an assignment is turned in late we will deduct 10% off the total possible points. That is, one-day late is 10% off, two-days is 20% off. So if your assignment is two day late, the max number of points (out of 10) that you can receive is 8. By permission of the instructor in extenuating circumstances, you may use more that two late days, however, the 10% rule per day will still apply. If you have a verifiable medical condition or other special circumstances that interfere with your coursework please let us know as soon as possible.

Regrading Policy

It is very important to us that all assignments are properly graded. If you believe there is an error in your assignment grading, please submit an explanation via email to us (the staff mailing list) within 7 days of receiving the grade. No regrade requests will be accepted orally, and no regrade requests will be accepted more than 7 days after you receive the grade for the assignment.

Additional Information

Accessibility

If you have a documented disability (physical or cognitive) that may impair your ability to complete assignments or otherwise participate in the course and satisfy course criteria, please meet with us at your earliest convenience to identify, discuss, and document any feasible instructional modifications or accommodations.

Credits

This class is based on the classes taught by Hanspeter Pfister at Harvard and Miriah Meyer at the University of Utah and draws on the book by Tamara Munzner at the University of British Columbia. Some of the material in this course is based on the classes taught by Carlos Scheidegger at the University of Arizona, Marc Streit at JKU Linz, Pat Hanrahan at Stanford, Jeff Heer at the University of Washington, Hans-Joerg Schulz at the University of Rostock, Nils Gehlenborg at the Harvard Medical School, Torsten Möller at the University of Vienna, Hewlig Hauser at the University of Bergen, and Maneesh Agrawala and UC Berkeley. We have heavily drawn on materials and examples found online and tried our best to give credit by linking to the original source. You can find these credits mainly by direct links to the sources from the images. Please contact us if you find materials where the credit is missing or that you would rather have removed.

User Notice for Copyrighted Materials on Course Websites

This course website, and much of the text, images, graphics, audio and video clips, and other content of the site (collectively, the “Content”), are protected by copyright law. In some cases, the copyright is owned by third parties, and we are making the third-party content available to you under the fair use doctrine. Fair use permits only certain limited uses of the Content. You may use the website and its Content only for your personal, noncommercial educational and scholarly use. Some Content may be provided via streaming or other means that restrict copying; you may not circumvent those restrictions. If you wish to distribute or make any of the Content available to others, or to use any Content commercially, or to use any Content for any purpose other than your personal, noncommercial educational and scholarly use, you must obtain any required permission from the copyright holder. User notice courtesy of the Harvard University Office of General Counsel.