Syllabus
Welcome to DS-4630 / 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 HTML5, JavaScript and D3.
For details on the content and for homework deadlines, project deadlines and exams please refer to the schedule.
Course Logistics
Prerequisites
Students are expected to have programming experience, ideally for web development, at the level of a junior or senior student in the CS department. 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 to the formal prerequisites as specified in the catalog by permission of the instructor.
Course Versions
What are the cross-listed course versions?
There are two undergraduate versions for this class and one graduate version:
- DS-4630 is a required course for data science students.
- CS-5630 is an elective for computer science undergraduate students.
- CS-6630 is the graduate version that is required or an elective in various tracks and programs.
What’s the difference in practice?
There is no difference between the two undergraduate versions, you should choose based on your degree program.
For the graduate version there are several extra problems on homeworks and an extra question on the exam, compared to the undergraduate version. Generally, all grad students, no matter from which department, should take the graduate version.
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.
Author’s book website including video tutorials for each chapter.
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
Recommended Textbooks
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 small group activities. The weekly schedule of lectures is posted on the course web site.
Group Activites
The small group 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. In addition, lectures will be accompanied activity, such as a design critique and a redesign, which will include some form of submission, which constitutes 10% of your grade, so it’s important to do them.
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, 5:00 pm MT, unless otherwise noted.
For due dates see the schedule.
Homework submissions will be handled through Canvas or GitHub classroom. You should commit and push your work to your personal reposity, which we will download from.
A couple of important rules to make our lives easier:
- See the collaboration policy.
- We recommend you use all the capabilities of version control while you are working on your homework. 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! 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 several web technologies. 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.
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 colleagues in 2-3 person project teams. You can come up with your own teams and use Slack to find prospective team members. If you cannot find a partner, we will team you up randomly. We recognize that individual schedules, interests, and other constraints might limit your ability to work in a team. If this the case, ask us for permission to work alone.
Reading Assignments
The course schedule includes regular weekly readings. 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. Engaging with these materials will greatly enhance your experience in the course. Also, they might be the basis of exam questions.
Course Policies
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: 35%, assessed on meeting the project criteria and your peer assessment. The 35% is split between the two milestones and the proposal. 5% are assigned to your proposal, 10% to your first milestone, and 20% to your final submission.
- Homework: 25%, assessed on your individual submission. The homework assignments are weighted based on difficulty and length (e.g., a two week homework counts more than a one week homework).
- Group Activities: 10%, largely based on evidence of engagement.
- Midterm Exam: 10%
- Final Exam: 20%
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
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 extra credit points for their exceptional work. A small number of projects will win the coveted Best Project prize.
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. The use of LLMs, such as ChatGPT on homeworks is not allowed, unless specifically permitted.
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 use plotting libraries such as plot.ly, but realize that if you use such tools, the expectation for the product quality goes up significantly. 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. Similarly, you may use LLMs to help generate code. However, you must acknoweldge where and how they were used.
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 Alexander Lex 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, Pat Hanrahan at Stanford, and Jeff Heer at the University of Washington. 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.