CPSC 447: Intro. to Visualization, Jan 2023

Archived material from past term.

Instructor: Tamara Munzner (she)
First Class: Tue Jan 10 2023
Classes: Tue 2-5pm
Location: MacMillan 166
Sync Video Livestream: see Piazza or Canvas for link
Async Video Lectures: watch pre-recorded video lectures asychronously early in week, before sync class.
TAs: Steve Kasica (he), Francis Nguyen (he), Mara Solen (they)
Portals: Piazza (Piazza signup), Canvas, Gradescope, Github, UBC Calendar, Queue

Page Index: Schedule Summary | Detailed Syllabus | Office Hours | Assignments | Exams | Videos | Quizzes | 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

2023 447 Hall of Fame page has pictures, reports, and demos. Congratulations to the winners for the best final projects of 2023!

Schedule Summary

Detailed Syllabus

Office Hours

TA office hours to get personalized help on D3 or foundations/theory will be held several times during the week. Instructor (Tamara) office hours are best for foundations/theory rather than D3 questions.

We have scheduled TA office hours according to due dates for assignments, with heavier coverage on weeks that programming assignments and project milestones are due and lighter coverage on other weeks:

Week Dates Type Mon Tue Wed Thu Fri
Week 1 Jan 9-13 Light none none 6-7pm (Mara) 12-1pm (Steve) 12-1pm (Mara)
Week 2 Jan 16-20 Light 2-3pm (Francis) 12-1pm (Steve) 6-7pm (Mara) 12-1pm (Steve) 12-1pm (Mara)
Week 3 Jan 23-27 Light 2-3pm (Francis) 12-1pm (Steve) 6-7pm (Mara) 12-1pm (Steve) 12-1pm (Mara)
Week 4 Jan 30-Feb 3 Heavy 2-3pm (Francis) 12-1pm (Steve) 6-7:30pm (Mara) 11am-1pm (Steve)
12-1pm (Francis)
10am-12pm (Francis)
12-2pm (Mara)
Week 5 Feb 6-10 Light 2-3pm (Francis) 12-1pm (Steve) 6-7pm (Mara) 12-1pm (Steve) 12-1pm (Mara)
Week 6 Feb 13-17 Heavy 2-3pm (Francis) 12-1pm (Steve) 6-7:00pm (Mara) 12-1pm (Steve) 12-1pm (Mara)
Week 7 Feb 20-24 Reading Week none 11a-12:00p (Francis)
4:30-5:30pm (Mara)
10-11am (Francis)
6-7pm (Mara)
1-2pm (Mara)
5-6pm (Francis)
none
Week 8 Feb 27-Mar 3 Light 2-3pm (Francis) 12-1pm (Steve) 6-7pm (Mara) 12-1pm (Steve) 12-1pm (Mara)
Week 9 Mar 6-10 Heavy 2-3pm (Francis) 12-1pm (Steve) 6-7:30pm (Mara) 11am-1pm (Steve)
12-1pm (Francis)
10am-12pm (Francis)
12-2pm (Mara)
Week 10 Mar 13-17 Light 2-3pm (Francis) 11-12pm (Steve) 6-7pm (Mara) 12-1pm (Steve) 12-1pm (Mara)
Week 11 Mar 20-24 Light 2-3pm (Francis) 12-1pm (Steve) 6-7pm (Mara) 12-1pm (Steve) 12-1pm (Mara)
Week 12 Mar 27-31 Heavy 2-3pm (Francis/Steve) 12-1pm (Steve) 6-7:30pm (Mara) 11am-1pm (Steve)
12-1pm (Francis)
10am-12pm (Francis)
12-2pm (Mara)
Week 13 Apr 3-7 Heavy 2-3pm (Francis/Steve) 12-1pm (Steve) 6-7:30pm (Mara) 11am-1pm (Steve)
11-1pm (Francis)
none
Week 14 Apr 10-14 Heavy none 12-1pm (Steve)
6-8pm (Francis)
6-7:30pm (Mara) 11am-1pm (Steve)
12-1pm (Francis)
none

Assignments

Exams

Videos

Quizzes

Quizzes are due on Mondays at 6pm (except for first week, Q1 due Fri Jan 13 6pm). They will be posted on Canvas one week before they are due, by 6pm the previous Wednesday.

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. But 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. How the code is breaking
  2. What you have tried to do to identify the bug
  3. Things you have tried 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 three. 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:

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.

The instructor reserves the right to modify the grading scheme.

Policies

Wait List Policy: 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, and will provide Zoom links on there so that all students have access to the livestreams (both registered and waitlisted).

Attendance: Attendance in all synchronous lectures is expected. You are responsible for all material presented there. The best experience will be to attend class live and in person. Synchronous class sessions will be both livestreamed and recorded on a best effort basis; however, there are no guarantees, and audio quality for student discussions may be low. Groups for in-class small group work will be assigned by modality (live or zoom), there will be no mixed groups. Some material for the synchronous class sessions will be made available online. However, there is no guarantee that everything covered will be in the posted material, and in particular any lecture slides will not fully capture what occurs in the in-class exercises. Your participation mark is based on in-class activity.

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, 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.

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/23Jan.


Tamara Munzner
Last modified: Wed Sep 20 07:53:13 PDT 2023