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.

For details on the content and for homework deadlines, project deadlines and midterms please refer to the schedule.

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)
Free on-campus online version – login required.

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, 2nd Edition
Scott Murray
O’Reilly (2017)
Free on-campus 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

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.

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.

Sections

Lectures are supplemented by 60-minute sections led by the teaching assistants. Sections introduce a homework and the related technical material. Sections will typically consist of a short presentation and live coding of a teaching assistants, followed by time to complete some exercises. Sections are announced in the schedule.

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 our discussion forum 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.

Homework assignments are due on Fridays, 11:59 pm ET, unless otherwise noted. For due dates see the schedule.

The assignments are published on github.

Homework submissions will be handled through Canvas. Submit a zip file that includes all files needed to execute the homework.

A couple of important rules to make our lives easier:

  • See the collaboration policy.
  • We recommend you use version control while you are working on your homework using a private repository. You will also have to use GitHub to work on your project in a team, so it’s a good idea to get used to it! GitHub offers free private repositories for students. Every time you are done with a chunk of work, or when you are done for the day, push your changes to a repository. This will avoid data loss, even if your house burns down, and you always will be able to recover what you already pushed. Make sure that your work is NOT PUBLICLY ACCESSIBLE.
  • We will use state-of-the-art web technology. To avoid slowing us down with browser compatibility, we define a target platform, that we test against. Your code must be compatible with the latest version of Google Chrome - currently Version 75.

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, one more).

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 and the proposal. 5% are assigned to your proposal, 10% to your first milestone, and 25% 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.

A > 9.5
A- > 9 - ≤ 9.5
B+ > 8.5 - ≤ 9
B > 8 - ≤ 8.5
B- > 7,5 - ≤ 8
C+ > 7 - ≤ 7.5
C > 6.5 - ≤ 7
C- > 6 - ≤ 6.5

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, Cheating and Plagiarism 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.

In homeworks you must not use libraries or code provided on the internet except when explicitly permitted in the instructions.

In your project, you may use limited parts of code found online, provided its license allows you to re-use it. You are free to use general purpose frameworks or libraries (e.g., Node.js, Bootstrap, JQuery, etc.) You may not use plotting libraries such as plot.ly. You must acknowledge any source code that was not written by you by a proper citation (author, year, title, time accessed, URL) directly in your source code (comment or header) and provide a link to the source. You can also acknowledge sources in a README.txt file if you used whole classes or libraries. You also must include these references clearly visible on your project website.

We will use both manual and automatic methods to check your submissions for plagiarism and will also check against online sources and submissions from previous years. For details on the policy, please refer to the School of Computing Cheating Policy. Plagiarism will lead to a failing grade in this course, two such infractions will lead to a ban on all CS programs.

Missed Activities and Assignment Deadlines

All submissions related to projects must be turned in on time. Homeworks are subject to the late day policy stated below. 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 such as a medical condition, 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 homework assignments 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 days 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 than two late days, however, the 10% rule per day will still apply.

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.

General Policies and Code of Conduct

Respect for Diversity

It is our intent that students from all diverse backgrounds and perspectives be well-served by this course, that students’ learning needs be addressed both in and out of class, and that the diversity that the students bring to this class be viewed as a resource, strength and benefit. It is our intent to present materials and activities that are respectful of diversity: gender identity, sexuality, disability, age, socioeconomic status, ethnicity, race, nationality, religion, and culture. Your suggestions are encouraged and appreciated. Please let us know ways to improve the effectiveness of the course for you personally, or for other students or student groups.

The Americans with Disabilities Act.

The University of Utah seeks to provide equal access to its programs, services, and activities for people with disabilities. If you will need accommodations in this class, reasonable prior notice needs to be given to the Center for Disability Services, 162 Olpin Union Building, (801) 581-5020. CDS will work with you and the instructor to make arrangements for accommodations. All written information in this course can be made available in an alternative format with prior notification to the Center for Disability Services.

Addressing Sexual Misconduct.

Title IX makes it clear that violence and harassment based on sex and gender (which Includes sexual orientation and gender identity/expression) is a civil rights offense subject to the same kinds of accountability and the same kinds of support applied to offenses against other protected categories such as race, national origin, color, religion, age, status as a person with a disability, veteran’s status or genetic information. If you or someone you know has been harassed or assaulted, you are encouraged to report it to the Title IX Coordinator in the Office of Equal Opportunity and Affirmative Action, 135 Park Building, 801-581-8365, or the Office of the Dean of Students, 270 Union Building, 801-581-7066. For support and confidential consultation, contact the Center for Student Wellness, 426 SSB, 801-581-7776. To report to the police, contact the Department of Public Safety, 801-585-2677(COPS).

Student Name and Personal Pronoun

Class rosters are provided to the instructor with the student’s legal name as well as “Preferred first name” (if previously entered by you in the Student Profile section of your CIS account). While CIS refers to this as merely a preference, I will honor you by referring to you with the name and pronoun that feels best for you in class, on papers, exams, group projects, etc. Please advise me of any name or pronoun changes (and please update CIS) so I can help create a learning environment in which you, your name, and your pronoun will be respected.

Campus Safety

The University of Utah values the safety of all campus community members. To report suspicious activity or to request a courtesy escort, call campus police at 801-585-COPS (801-585-2677). You will receive important emergency alerts and safety messages regarding campus safety via text message. For more information regarding safety and to view available training resources, including helpful videos, visit safeu.utah.edu.

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, 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. 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 all original content provided as part of this course is licensed under the creative commons cc by license. Other content such as text, images, graphics, audio and video clips, (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 this content only for your personal, noncommercial educational and scholarly use.