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. The course is also offered through the Harvard University Extension School as online course CSCI E-171.

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 80 college students and 30 DCE students, respectively.

College students: If you are interested in joining this course please fill out a enrollment survey. The enrollment survey will be available after the first lecture (Sept 5th, 5:00pm) until Sunday Sept 9th, midnight. The survey is available on our Canvas page.

Harvard Extension School (DCE) students: Course enrollment is on a first-come, first-serve basis.

Prerequisites

You are expected to have programming experience (e.g,. CS50, Introduction to Programming) 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.

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 (2017) Second edition! (The 2nd edition teaches D3 Version 4, which we will be using in this course!)

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

You can purchase both books from the Coop bookstore or any other online retailer.

Course Components

Lectures

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

Labs

For most of the semester, we will hold programming labs during regular class meeting times on Mondays. Labs are interactive tutorials with downloadable code that give you an introduction to client-side web programming with HTML, CSS, Javascript, and D3. You are allowed to work in pairs, but each student needs to hand in their own lab solution. Completed labs need to be handed in with the homework each week.

Readings & 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 given at the beginning of each class will test your knowledge of the readings. Quizzes are part of your final grade.

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

There will be two midterm exams that 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 midterms. The first midterm consists of an open-book (in-class) exam, and the second midterm will consist of an open-book part (90 minutes) as well as a take-home midterm project where you will implement an interactive visualization in D3 over the course of a couple of days.

DCE students: The midterms will be open-book, not proctored, but limited to a fixed time span from the time you start it. For the take-home midterm project you will get the same amount of time as college students.

Design Sprints

A big part of the lectures will be design sprints. You will work in groups of 3-4 students to design, implement, and evaluate visualizations for a given topic and pre-defined datasets. Design sprints will span 3-4 weeks, and there will be two design sprints over the course of the semester.

Final Project

A major part of the course is a final group project. You will work in groups of 3 students to design, implement, and evaluate visualizations through the same iterative design process as the design sprints 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. A small number of projects will win the coveted Best Project 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:

  • Quizzes (5%)
  • Labs (5%)
  • Homework Assignments (30%)
  • Midterms (20%)
  • Design Sprints (10%)
  • Group Project (30%)

We will map your points to letter grades using the following table:

  • A: 100-95%; A-: 90-95%
  • B+: 85-90%; B: 80-85%; B-: 75-80%
  • C+: 70-75%; C: 65-70%; C-: 60-65%
  • D+: 55-60%; D: 50-55%: D-: 45-50%
  • F < 45%

Your lowest 3 scores on all quizzes will be dropped.

There are several mandatory class meetings such as the midterm, guest lectures, project discussions, project demos, 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 within one week of receiving the grade.

Graduate-credit:
Students taking this course for graduate credit are expected to do more work and perform at higher standards than undergraduate-credit students. In particular, graduate-credit students are required to complete all bonus parts in assigned homeworks and we expect a more comprehensive final project.

Course Policies

Late Policy

No homework assignments or project milestones will be accepted for credit after the deadline. Homework assignments will be posted on the website on Mondays and will be due the following Sunday (listed in the course schedule). Solutions to labs will be made public the week after the lab has been published. Solutions to homework assignments can be discussed in office hours but will not be posted publicly.

If you have a verifiable medical condition or other special circumstances that interfere with your coursework please let us know as soon as possible. You will need to provide a written note from a medical professional confirming your inability to participate in course work.

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.

DCE students: You are responsible for understanding Harvard Extension School policies on academic integrity (www.extension.harvard.edu/resources-policies/student- conduct/academic-integrity) and how to use sources responsibly. Not knowing the rules, misunderstanding the rules, running out of time, submitting the wrong draft, or being overwhelmed with multiple demands are not acceptable excuses. There are no excuses for failure to uphold academic integrity. To support your learning about academic citation rules, please visit the Harvard Extension School Tips to Avoid Plagiarism (www.extension.harvard.edu/resourcespolicies/resources/tips-avoid-plagiarism), where you’ll find links to the Harvard Guide to Using Sources and two free online 15-minute tutorials to test your knowledge of academic citation policy. The tutorials are anonymous open-learning tools.

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.

Devices in Class

We will use smartphones and laptops throughout the quarter to facilitate activities and project work in-class. However, research and student feedback clearly shows that using devices on non-class related activities not only harms your own learning, but other students’ learning as well. Therefore, we only allow device usage during activities that require devices. At all other times, you should not be using your device. We will help you remember this by announcing when to bring devices out and when to put them away.

DCE students: In addition to your laptops to participate in the online lecture and lab sessions, you will also need pens, pencils, paper for sketching, and a phone or camera to upload your sketches.

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.

DCE students: The Extension School is committed to providing an accessible academic community. The Accessibility Office offers a variety of accommodations and services to students with documented disabilities. Please visit www.extension.harvard.edu/resources-policies/resources/disability-servicesaccessibility for more information.

Course Resources

Online Materials

All class activity handouts, slides, homeworks, labs, 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. As office hours are usually very heavily attended, please consult Piazza as a first option to get help.

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, Maneesh Agrawala at UC Berkeley, and Hendrik Strobelt at IBM Research. 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.