CPSC 447: Intro. to Visualization, Jan 2025

Remember to reload the page, changes are frequent.

Instructor: Tamara Munzner (she)
First Class: Tue Jan 7 2025
Classes: Tue 2-5pm
Location: IBLC 261
Async Video Lectures: watch pre-recorded video lectures asychronously early in week, before sync class
TAs: Francis Nguyen (he), Ryan Smith (he), Mara Solen (she)
Portals: Piazza (Piazza signup), Canvas, Gradescope, Github, Queue, iClicker
Page Index: Schedule Summary | Detailed Syllabus | Office Hours | Assignments | Exams | Videos | D3 Tutorials | D3 Case Studies | D3 Examples | Delivery Mechanisms | Description & Prereqs | Structure | Learning Outcomes | Resources | Grading Scheme | Policies | Land Acknowledgement | Previous Versions
Jump To Today

Hall of Fame

Spring 2025 447 Hall of Fame page has pictures, blurb from instructors, reports, and demos. Congratulations to the winners for the best final projects of spring 2025!

Schedule Summary

Detailed Syllabus

Office Hours

Schedule Summary

Assignments

Exams

Videos

D3 Tutorials

D3 Case Studies

The case studies feature similar problems to what you're asked to do in programming assignment P1 (Drought and Vaccines studies). They are designed to help you think through how to handle these problems. They provide detailed walkthroughs of code, with more complex examples than the tutorials.

D3 Examples

Full set of D3 examples on Github

These examples are featured in the tutorials above. For reference, the full listing of individual examples is:

Every example in the public Github repo can be opened in the codesandbox interactive web IDE by replacing github.com with githubbox.com in the URL, for example:

Delivery Mechanisms

Piazza: All course communication will be handled through Piazza. Please ask all questions there, rather than sending private email to any of the instructional staff. Top contributors can earn up to 1% extra credit towards their overall course mark.
Do not post lengthly snippets of your own code publicly, that should be a private post to instructors. Do not simply send a block of code and say "help, it doesn't work, can you tell me what is wrong with my code". If you are going to send code, you need to include three crucial pieces of information. Explain:
  1. Find: What unexpected behavior did you discover, how is the code breaking?
  2. Identify: What theories you have about the cause of the problem?
  3. Fix: What things you have already tried to fix the bug that didn't work.
Sometimes the process of writing this down will even lead you to figure out the answer yourself.

Description & Prerequisites

Design and implement static and interactive visualizations. Select appropriate visualization methods for a given combination of data type and intended analysis task. Assess visual representations according to design and perceptual principles.

The prerequisite for this course is CPSC 310, which provides an introduction to the JavaScript programming language used in this course (and also experience on software projects). The inherited prerequisites are thus CPSC 210 and one of CPSC 107, CPSC 110, CPSC 260.

Structure

This course will provide an undergraduate-level introduction to visualization, with D3.js tooling that provides practice with modern web-based development environments. It will train CS majors in visualization for data exploration and presentation. These foundational skills are a crucial cornerstone of data science and are increasingly required in many other areas ranging from business to data journalism.

The course will be a hybrid partially-flipped approach. The D3 tooling will be taught in the first seven weeks through a combination of written tutorials you work through at your own pace (checked by online quizzes), case studies that will walk you through more advanced visualizations, and post-class work (checked by programming exercises). The fundamentals will be taught throughout the term with a combination of pre-class lecture videos, in-class active learning, and post-class work (checked by foundations exercises).

The final project, in the final six weeks, will require integration and synthesis of the material initially covered in both the programming exercises and the foundational exercises. Students will work in self-chosen teams of four. The completed project will result in portfolio materials that showcase both technical achievements through interactive visualizations that can be demonstrated in any modern web browser, and the ability to communicate clearly in writing through the written process log.

There will be TA office hours via Zoom where you can book a time slot for further in-person individual help, particularly with D3.

The workload is designed to be 12 hours per week in total. The breakdown is 3 in class (sync lecture) and 9 outside of class (asynchronous).

The final exam will focus on assessing the foundations material in a solo setting, rather than the assessment of programming skills which will occur through the final project.

Learning Outcomes

By the end of this course, students will be able to:

Resources

Grading Scheme

Students will be graded on a numerical basis. The grading scheme is:

The instructor reserves the right to modify the grading scheme. Exam marks may be scaled. Students must pass both the final exam and the final project to pass the course; students who fail either will receive a mark of at most 45.

Policies

Wait List: I'm not in charge of the class waitlist; the standard CS Department academic advising and waitlist handling process is in play. I do note that so far, the waitlist has always cleared: all students who want to take this course have gotten in. If you are on the waitlist and want to take the course, you should show up and participate from the beginning. Students who have attended all class sessions will be given waitlist priority if the full waitlist does not clear; I'll share attendance information with the main office. Students who register for the course late must still complete all quizzes and assignments. You can join Piazza even if you're still on the waitlist, even though you cannot join Canvas yet. I will use Piazza to announce mechanisms for waitlisted students to either submit work before being formally registered or submit work late without penalty.

Attendance: Attendance in all synchronous lectures is expected, in person, unless you are ill. Your participation mark is based on in-class attendance, and will be captured through iClicker responses. Some material for the synchronous class sessions will be made available online. However, these materials definitely will not fully capture what occurs in the in-class exercises.

Illness: To prevent further spread of illness to other students, staff, or faculty you should stay at home if you have a communicable illness (such as respiratory symptoms). (UBC no longer requires a doctor's note, it is your responsibility to report your own absence due to illness and injury.)

If you have missed assignment deadlines due to illness, when you have recovered you should submit the following self-declaration form, through a private message on Piazza (whether or not you discussed it with any instructional staff in person or by email): Student Absence Due to Illness or Injury Form

It's your responsibility to inform me in a timely manner, at latest within three days of recovering and returning. I will decide on a course of action after I hear from you. I may allow you to turn in work late without penalty, or I may excuse you from completing the missed work and grade you only on your completed work, or I may determine that the work cannot be made up. If you have not missed any deadlines, you do not need to submit the form. Late demos will be subject to the availability of the grader. No late work will be accepted after solutions have been handed out.

Academic Honesty You are required to read about my expectations for academic honesty and state that you fully understand them before any work in the course will be marked. Ask Tamara or the TAs right away if you have any questions, on Piazza as either a private or a public message, about these three writeups:

Regrading: If you would like to request an assignment or exam regrade from the course staff, you must submit a detailed written explanation of why you think the grader was incorrect for the particular problem that you are disputing, after consulting the solutions (if applicable). The staff may regrade the entire assignment or exam, not just the particular problem in question, so your total grade may end up higher or lower. Submit the request through Gradescope.

Generative AI: Students are permitted to use artificial intelligence tools, including generative AI, to gather information, review concepts or to help produce assignments. However, students are ultimately accountable for the work they submit, and any content generated or supported by an artificial intelligence tool must be attributed appropriately with citation. Although the use of generative AI tools such as ChatGPT is not prohibited, you should be careful to use them appropriately. If you simply ask ChatGPT for D3 code, it will likely give you a monolithic block of code that does not align with the D3 design patterns and code structure that we teach in this course. We do not recommend starting with ChatGPT because you will quickly hit a brick wall with no good path forward. You may find value in asking GenAI tools very specific questions during debugging, just as you might use StackOverflow or other Internet sites. Use of AI tools is not permitted during the final exam in this course.

Equity, Inclusion and Wellness: Please see the CS Department's resources on equity, inclusion, and wellness. UBC provides resources to support student learning and to maintain healthy lifestyles but recognizes that sometimes crises arise and so there are additional resources to access including those for survivors of sexual violence. UBC values respect for the person and ideas of all members of the academic community. Harassment and discrimination are not tolerated nor is suppression of academic freedom. UBC provides appropriate accommodation for students with disabilities and for religious and cultural observances. UBC values academic honesty and students are expected to acknowledge the ideas generated by others and to uphold the highest academic standards in all of their actions. Details of the policies and how to access support are available at https://senate.ubc.ca/policies-resources-support-student-success.

Land Acknowledgement

The UBC Vancouver Point Grey Campus is located on the traditional, ancestral, and unceded land of the Musqueam people.

Previous Versions

Permanent URL for the page is https://www.students.cs.ubc.ca/~cs-447/25Jan.

Tamara Munzner

Last modified: Tue Apr 8 13:20:05 PDT 2025