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 analyze and understand 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:

  • 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 a mix of lectures, activities, self-guided labs, homework, and group projects.

Here is the weekly rhythm of the course:

Monday

  • Hand in your homework assignments at noon ET on Mondays.
  • Complete the assigned pre-reading and the Canvas pre-reading quiz before each week’s programming lab. College Students: Attend a mandatory programming lab (75 min) where you will work in pairs on self-guided lab notebooks to learn HMTL, CSS, Javascript, and D3. You will be assigned into pairs at the beginning of each lab. TFs will be available to help you. Attendance is mandatory, but if you cannot attend the lab in person and have been excused by the teaching staff, you can attend the virtual lab on Monday evening to get a pair partner assigned. DCE Students: Attend a virtual programming lab (75 min) where you will work in pairs on self-guided lab notebooks to learn HMTL, CSS, Javascript, and D3. TFs will be available to help you. Virtual lab attendance is strongly encouraged, but you might be excused on an individual basis.

Wednesday

College Students: Attend a mandatory live class (75 min) to participate in lectures, activities, discussions, and projects in breakout groups. In-person class attendance is mandatory except for DCE and exempt students.

Thursday

DCE Students: Attend a virtual section (45 min) to participate in group discussions and group projects. Attendance to the online section is strongly encouraged, but you might be excused on an individual basis.

Throughout the week

  • Work through reading materials that will be posted on Canvas.
  • Complete weekly homework assignments, which include finishing your lab notebooks, programming exercises, and work for your group project.
  • Attend office hours (or virtual office hours) with the TFs to get help with the labs and homework assignments. DCE students can attend weekly sections with the TFs.
  • Overall, expect to spend about 8-10 hours on asynchronous materials, homework, and project work outside of classes and labs. Students with less programming experience typically will spend more time. Each of the course components is discussed in more detail below.

Limited Enrollment

To provide the best possible online learning experience during live classes we have limited enrollment in the course.

College Students: If you are interested in joining this course please fill out the enrollment survey on Canvas before the posted deadline.

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 but not strictly required. Please be aware that learning web development and D3 can be 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

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

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

Live Classes

College students: The class meets every Wednesday. Attending these in-person classes is mandatory and a crucial component of learning the material in this course. Please arrive on time, as we will start promptly. At the end of each class, we will ask you to fill out and submit a brief reflection to collect feedback.

DCE students: Instead of attending class in person, DCE and exempt college students can participate in a live zoom stream of the class or watch edited video recordings that will be posted no more than 24 hours after class. In either case, we strongly encourage you to complete the in-class activities independently. Additionally, we will hold a weekly virtual section for the activities and group-work covered in the lecture for DCE students. Groups will be assigned by the teaching staff.

Programming Labs

College students: You will attend a mandatory programming lab every Monday. If you cannot attend a lab in person and are excused, you can attend the virtual lab with the DCE students Monday evening.

DCE students: Instead of attending labs in person, DCE students will have a weekly online lab on Monday evenings to work on the lab alone or in pairs. Attending the online lab is strongly encouraged but not mandatory.

You will work through self-guided notebooks to learn client-side web programming with HTML, CSS, Javascript, and D3. You will work in pairs, and TFs will be available to help you. Completed lab notebooks need to be handed in with the homework each week. Solutions to labs will be made public the week after the lab has been published.

Lab pairs: You will work on all labs in pairs. We will assign your lab partner at the beginning of each lab. You will work together on the lab with your pair partner and are also allowed to discuss the homework with your lab partner. However, each one of you has to submit their own lab and homework and let us know who you worked with.

Asynchronous Materials & Quizzes

In preparation for class each week, you will work on your own through asynchronous materials (mainly book chapters) to ensure that you are prepared for the programming labs and the activities in class. For the lab readings, you will be asked to complete brief online quizzes that test your understanding of the material for that week.

Homework

Weekly homework assignments are going to provide an opportunity to improve your design and programming skills. Homeworks will be due every Monday at noon ET. See the homework as an opportunity to learn and not to “earn points”. You can discuss solutions to homework assignments with your TFs during office hours. Homework solutions will not be posted publicly.

Group Projects

A big part of the course will be a group projects. 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 own team with three students each. Your team will create a web page that tells a story with interactive visualizations to answer questions about a topic of your own choosing. A small number of projects will win the coveted Best Project prize (Swiss chocolate).

Office Hours & EdStem

The teaching fellows will provide in-person and online office hours at several different times each week for questions you may have. We will also use Ed as our discussion forum and for all announcements, so it is important that you are 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. During classes and labs, we will use Slack for you to ask for help from TFs, both online and in person. That way, we can keep track of who needs help and which TFs are currently busy helping others.

Grading

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

  • Class Activities (10%)
  • Lab Pre-reading Quizzes (10%)
  • Homework:
    • Visualization Design Quizzes (15%)
    • Programming Assignments (30%)
  • Final Project (35%)

Note that this grade breakdown is likely to be updated by the start of the semester to reflect our updated course material. Your participation grade includes participating in class and on EdStem, and being helpful to other students. We will drop your lowest quiz score. 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

Class Norms

For each class and lab, please take care to work through and complete the week’s asynchronous materials and quizzes,

Attendance

College students: Except for DCE and exempt students, it is important that you attend and proactively participate during the labs and live class each week. We understand, however, that certain factors may occasionally interfere with your ability to attend these in-person sessions. You can miss class or labs up to four times during the semester without any negative consequences. After that, it will affect your participation grade. Please let us know as soon as possible if you have reoccurring extenuating circumstances that affect 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 both the virtual class section and the virtual lab are strongly encouraged but not mandatory. You might be excused from the virtual class or lab on an individual basis. DCE students participate completely online, there is no in-person participation for DCE students.

Late Policy

You can use 4 late days for your homework throughout the semester (not on the final project). However, you can use no more than 2 late days on any single homework. We post assignments ahead of time and give you plenty of time to complete them. So please plan ahead, we do not make any exceptions. 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 let the head TF know as soon as possible. You will need to provide a written note or email from a medical professional or your resident dean 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.

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

You may submit the same lab notebook as your lab pair partner, but you must add their name to your notebook submission; You have to complete your homework and weekly quizzes entirely on your own; You may discuss your homework with your lab partner for that week. You can discuss your code structure and help each other debugging. However, you may not share homework code. You cannot share your homework code with anyone else, including on EdStem; 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 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.)

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

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.