This course introduces key design principles and techniques for interactively visualizing data. The major goals of this course are to understand how visual representations can help analyze and understand complex data, how to design effective visualizations, and how to create interactive visualizations using modern web-based frameworks.

After completion of the course you will be able to:

  • Create web-based interactive visualizations using Javascript and D3
  • 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
  • Work constructively as a member of a team to carry out a visualization project

Course Format

CS171 uses an active learning format with classes, small-group activities, programming labs, homework, and group projects. Here is the weekly rhythm of the course:

Monday

  • Hand in your homework assignments at noon ET on Mondays.
  • Attend the programming lab (College students: in person, DCE students: online), where you will work in small groups on self-guided lab notebooks to learn HTML, CSS, Javascript, and D3. Teaching staff will be available to help you. Submit the completed lab notebooks for your weekly homework the following Monday.

Wednesday

  • Attend the class (College students: in person, DCE students: live on Zoom or watch the Zoom recording) to participate in lectures, activities, discussions, and small-group projects. Submit the completed lecture activities as part of your weekly homework.

Thursday

  • Attend the online section (DCE students only) to participate in discussions, activities, and small breakout-group projects. Submit the completed lecture activities for your weekly homework.

Throughout the week

  • If you did not attend class, watch the recorded class video.
  • Complete the weekly homework assignment, which includes lab notebooks, programming and design exercises, readings, or milestones for your group project.
  • Attend office hours to get help with the labs and homework assignments.
  • This course has a very heavy workload. You may need 8-10 hours of out-of-class time a week to complete the assignments. Be prepared for that.

Each of the course components is discussed in more detail below.

Enrollment

College Students: There is no enrollment limit in CS171.

DCE Students: To provide the best possible online learning experience, we have an enrollment limit of 40 DCE students. Sign-up is on a first-come-first-serve basis.

Prerequisites

We require students to have taken a prior programming class, such as CS50 (Introduction to Programming) or similar. You should be comfortable picking up new programming skills. Having Javascript and web development experience is a big plus. Please be aware that learning web development and D3 is time-consuming, depending on your programming background.

Required Textbook

In preparation for the weekly programming labs you will read chapters in the following textbook:

Interactive Data Visualization for the Web, Scott Murray, O’Reilly (2017), Second edition

Harvard College students can access an online copy of the book on Hollis, or you can purchase the book from the Coop bookstore or any other online retailer.

Course Components

Class

The class meets every Wednesday (College students: in person, DCE students: live on Zoom or watch the Zoom recording). Attending classes is mandatory and a crucial component of learning the material in this course. We will spend time in each class on small-group design exercises and activities. You will submit the completed activities as part of your homework the following Monday.

DCE students: You will attend a weekly online section to participate in discussions, activities, and small breakout-group projects that are not accessible from the recorded Zoom videos.

Programming Lab

In the weekly programming lab (College students: in person, DCE students: online), you will work in small groups on self-guided lab notebooks to learn HTML, CSS, Javascript, and D3. Teaching staff will be available to help you. Submit the completed lab notebooks for your weekly homework the following Monday. Solutions to labs will be made public the week after the lab has been published.

You are encouraged to work on all labs in pairs. You can work together on the lab with your lab partner. However, each of you has to submit your own lab notebook and add the name of your lab partner.

Homework

Weekly homework assignments will provide an opportunity to improve your visualization skills. Homework will include a mix of programming, design, class activities, reading quizzes, and finishing the lab notebook. Homework will be due every Monday at noon ET. Homework solutions will not be posted publicly.

Group Projects

A big part of the course will be a group project. You will work in teams of three students to design and implement interactive visualizations to answer questions about a specific topic and dataset. We will use a design sprint process with a series of graded milestones. You can choose your team with three students each. Your team will create a web page that tells a story with interactive visualizations to answer questions about your chosen topic. A few projects will win the Best Project prize (Swiss chocolate).

Office Hours & EdStem

The teaching fellows will provide in-person and online office hours several times weekly for questions. We will also use Ed as our discussion forum and for all announcements, so you must be signed up as soon as possible. Ed should always be your first resource for seeking answers to your questions. You can also post privately so that only the course staff sees your message.

Grading

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

  • Lab Activities (15%)
  • Class Activities (15%)
  • Weekly Programming + Design Assignments (30%)
  • Lab Pre-reading Quizzes (5%)
  • Final Project (35%)

We will drop your lowest two scores for lab notebooks, class activities, and reading quizzes. You get four late days for your homework for the entire semester, but you can use no more than two late days on any single assignment.

Any concerns about grading errors must be clearly articulated in writing and sent to jbeyer@g.harvard.edu within one week of receiving the grade.

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% 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, we may assign additional tasks in homeworks for graduate-credit students and we expect a more comprehensive final project.

Course Policies

Attendance

College students: You must attend and proactively participate weekly during the class and labs. Please let us know as soon as possible if you have extenuating circumstances affecting your ability to attend class or labs. We will ask you for an email confirmation from your resident dean and will try to work out an agreeable solution with you and your team.

DCE students: Attendance for the online section and the lab are strongly encouraged but optional. DCE students participate completely online, and there is no in-person participation for DCE students.

Zoom Norms

For online sections and labs, or when joining the class live Zoom stream, please make sure to participate from a quiet office or similar space (and not from a car, plane, or train). Participate with your camera turned on.

Late Policy

You can use four late days for homework throughout the semester, but not for the final project. However, you can only use up to two late days on any single homework. For unexcused late submissions, we will deduct 10% of an assignment’s points per day that it is submitted late.

Rare exceptions can be made on a case-by-case basis. If you have a verifiable medical condition or other special circumstances that interfere with your coursework, please email jbeyer@g.harvard.edu as soon as possible. You must provide a written note or email from a medical professional or your resident dean confirming your inability to participate in coursework.

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, including automatic failure in the course and reference to the ad board.

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

  • You may submit the same lab notebook as your lab partner, but you must add their name to your notebook submission;
  • You have to complete your homework entirely on your own;
  • You may discuss your homework with your lab partner. You can discuss your code structure and help each other debug. However, you may not share the homework code.
  • You cannot share your homework code with anyone else, including on Ed.
  • You may not submit the same or similar work to this course that you have submitted or will submit to another.
  • You may not provide or make available solutions to individuals who take or may take this course in the future.

If the homework allows it and for your projects, 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.

DCE Students: You are responsible for understanding Harvard Extension School policies on academic integrity (https://extension.harvard.edu/for-students/student-policies-conduct/academic-integrity/Links to an external site.) and how to use sources responsibly. Stated most broadly, academic integrity means that all course work submitted, whether a draft or a final version of a paper, project, take-home exam, online exam, computer program, oral presentation, or lab report, must be your own words and ideas, or the sources must be clearly acknowledged. The potential outcomes for violations of academic integrity are serious and ordinarily include all of the following: required withdrawal (RQ), which means a failing grade in the course (with no refund), the suspension of registration privileges, and a notation on your transcript.

Using sources responsibly (https://extension.harvard.edu/for-students/support-and-services/using-sources-effectively-and-responsibly/Links to an external site.) is an essential part of your Harvard education. We provide additional information about our expectations regarding academic integrity on our website. We invite you to review that information and to check your understanding of academic citation rules by completing two free online 15-minute tutorials that are also available on our site. (The tutorials are anonymous open-learning tools.)

AI Policy (ChatGPT and other AI tools)

AI (artificial intelligence) resources such as ChatGPT can be useful in several ways. However, because it can also be abused, you must acknowledge the use of AI in any work you submit for class. The following are some guidelines for what not to do when using AI in your assignments:

  • Do not rely solely on AI tools to complete assignments. It is important to understand the material and complete assignments on your own, using AI tools as a supplement rather than a replacement for your work.
  • Do not use AI tools to plagiarize. Using AI to generate or modify content to evade plagiarism detection is unethical and violates academic integrity.
  • Do not assume that AI responses are always correct. It has been noted that AI can generate fake results.

Accessibility

College students: Harvard University values inclusive excellence and providing equal educational opportunities for all students. Our goal is to remove barriers for disabled students related to inaccessible elements of instruction or design in this course. If reasonable accommodations are necessary to provide access, please contact the Disability Access Office (DAO). Accommodations do not alter fundamental requirements of the course and are not retroactive. Students should request accommodations as early as possible, since they may take time to implement. Students should notify DAO at any time during the semester if adjustments to their communicated accommodation plan are needed.

DCE students: Harvard Extension School is committed to providing an inclusive, accessible academic community for students with disabilities and chronic health conditions. The Accessibility Services Office (ASO) offers accommodations and supports to students with documented disabilities. If you have a need for accommodations or adjustments, contact Accessibility Services directly via email at accessibility@extension.harvard.edu or by phone at 617-998-9640.

Credits

We would like to sincerely thank Carolina Nobre, University of Toronto, who has contributed significantly to the material and activities of this course. 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 University 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.