Welcome to CS171! 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.

This course, when taken for a letter grade, meets the Harvard General Education requirement for Empirical and Mathematical Reasoning.

After completion of the 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 and prototyping
  • Use principles of human perception and cognition in visualization design
  • Apply methods for visualization of data from a variety of fields
  • Create web-based interactive visualizations using D3
  • Work constructively as a member of a team to carry out a complex project

Limited Enrollment

To provide the best possible learning experience this course is limited to 60 students. If you are interestedin joining this course please fill out a enrollment survey as soon as possible, it will be available after the first lecture on September 1st. The survey is available on our Canvas page and must be submitted until midnight, Tuesday September 6th.

Prerequisites

You are expected to have programming experience (e.g,. CS50) and you should be comfortable picking up new programming languages on your own. Having Javascript and web development experience is a plus, but not required.

In order to participate in labs, quizzes, and in-class activities, you will need to bring a laptop to all class meetings. Please restrict your laptop use to class-relevant activities. No social media, email, etc. because it distracts other students, not just you.

Required Textbooks

We will be using two textbooks for this class, one to cover perceptual principles of visualization and one to teach the necessary technical skills.

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)

Interactive Data Visualization for the Web, Scott Murray, O’Reilly (2013)
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

Course Components

Lectures

The class meets weekly for lectures and joint class activities. Attending lecture is a crucial component of learning the material presented in this course. Please arrive on time, as in-class activities will begin promptly. At the end of each lecture we will ask you to fill out and submit a one-minute paper to collect feedback.

Labs

For about half the semester, we will hold programming labs during regular class meeting times on Thursdays. Labs are interactive tutorials with downloadable code that give you an introduction to client-side web programming with HTML, CSS, Javascript, and D3. Completed labs need to be handed in together with the homework each week. At the end of each lab we will ask you to fill out and submit a one-minute paper to collect feedback.

Readings & Pre-Class Quizzes

Each lecture and lab includes required readings to ensure that you are prepared for the activities in class. You are expected to complete the assigned readings before class. Short online quizzes, due prior to each class, will test your knowledge of the readings. Quizzes will be closed once the lecture or lab has started. You have unlimited attempts to complete each question. To receive credit for pre-class quizzes, however, you must eventually submit the correct answers.

Studios

Weekly studios are where you will have a chance to present and receive feedback on your work, discuss homework assignments, and collaborate as a team. Studio attendance is mandatory. Studios are limited to 15-20 students (the numbers may vary due to enrollment) and will be lead by a TF. Your studio TF will be your main point of contact during the course. Active participation in studios is expected.

Homework

Weekly homework assignments are going to provide an opportunity to improve your design and programming skills. See the homework as an opportunity to learn, and not to “earn points”. The homework will be graded holistically to reflect this objective.

Midterm

The midterm exam will cover material from lectures, assigned readings, labs, and homework assignments. If you do not keep up with the readings, come to lecture, and complete the homework and labs you will be at a severe disadvantage during the midterm. The midterm consists of a 90 minute open-book exam, either during class time or at home, and a take-home midterm project where you will implement an interactive visualization in D3.

Project

A major part of the course is a group project. You will work in groups of 2-3 students to design, implement, and evaluate visualizations through an iterative design process with a series of graded milestones. The final result will be web page with interactive visualizations that answer questions you have about some topic of your own choosing. Projects will be presented at the SEAS Design Fair. A small number of projects will win the coveted Best Of Show prize, including Swiss chocolate.

Grading

This course can be taken for a letter grade only, there is no pass/fail option. The course grade comprises:

  • Participation (15%, includes quizzes, studios, 1-minute papers, etc.)
  • Midterm (20%)
  • Homework Assignments (30%)
  • Group Project (35%)

Course participation includes in-class activities, submitted labs, one-minute papers, and other activities designed to help you learn. If you earn 80% of the participation points you will get full credit for participation; anything less will be prorated accordingly.

To receive credit for studio attendance you must arrive on time. You are allowed two excused studio absences without penalty; thereafter you will receive zero credit for the missed studio. To receive an excused absence you must ask your studio TF in advance and receive an acknowledgment.

There are several mandatory class meetings such as the midterm, guest lectures, project discussions, project demos, design fair, etc. Please check the schedule, plan accordingly, and do not miss these classes.

Any concerns about grading errors must be noted in writing and submitted to your TF in person during studios.

Course Policies

Late Policy

All project-related due dates are final. Homework assignments will be posted on the website on Tuesdays and will be due the following Monday (listed in the course schedule). No homework assignments or project milestones will be accepted for credit after the deadline. Solutions to the homework assignments will be discussed in studios after the homework has been collected.

If you have a verifiable medical condition or other special circumstances that interfere with your coursework please let us know as soon as possible.

Collaboration Policy

We expect you to adhere to the Harvard Honor Code at all times. Failure to adhere to the honor code and our policies may result in serious penalties, up to and including automatic failure in the course and reference to the ad board.

The midterm must be completed entirely on your own, and may not be discussed with anybody else!

You may discuss your homework and labs with other people, but you are expected to be intellectually honest and give credit where credit is due. In particular:

  • you have to write your solutions entirely on your own;
  • you cannot share written materials or code with anyone else;
  • you should not view any written materials or code created by anyone else for the assignment;
  • you should list all your collaborators (everyone you discussed the assignment with) in your submission;
  • you may not submit the same or similar work to this course that you have submitted or will submit to another; and
  • you may not provide or make available solutions to individuals who take or may take this course in the future.

If the assignment allows it you may use third-party libraries and example code, so long as the material is available to all students in the class and you give proper attribution. Do not remove any original copyright notices and headers.

Accessibility

Any student receiving accommodations through the Accessible Education Office should present their AEO letter to the Head TF as soon as possible. Failure to do so may prevent us from making appropriate arrangements.

Course Resources

Online Materials

All class activity handout, slides, and required readings will be posted on Canvas.

Discussion Forum

We use Piazza as our discussion forum and for all announcements, so it is important that you are signed up as soon as possible. Piazza should always be your first resource for seeking answers to your questions. You can also post privately so that only the staff sees your message.

Office Hours

The teaching fellows will provide office hours for individual questions that you might have about the homework assignments or project progress. Office hours are usually very heavily attended. Please try to limit your visits to one office hour per week and consult Piazza first.

Credits

Some of the material in this course is based on the classes taught by Alexander Lex at the University of Utah, 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 Harvard Medical School, Torsten Möller at the University of Vienna, Tamara Munzener at the Univeristy of British Columbia, Helwig Hauser at the University of Bergen, and Maneesh Agrawala at 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. Please contact us if you find materials where the credit is missing or that you would rather have removed.