August 23, 2022


  • Opening:
    • who are we?
    • important info: syllabus, office hours, grades, etc
  • Intro to Data Viz
    • Why visualization?

Welcome to CSC 444


Warm up

We will take full advantage of the in-person format, that means you will be working with your classmates during class. Take 5 minutes to get to know someone near you.

Important Information



Course Policies

You should:

  • Come to class prepared and ready to participate
  • Write clean, correct, documented (with attribution), and tested code
  • Contact me (or your advisor) if you need any accommodations
  • Discuss problems at a high level with your classmates


  • Steal code or copyrighted materials
  • Violate department/univeristy policies (academic integrity)

Ground Rules of Interaction

  • We will engage in discussions, not debates. The purpose is not to win an argument, but to hear many points of view and explore many options and solutions.
  • Everyone is encouraged to participate. You may be asked to share what you think, or I may ask for comments from those who haven’t spoken. It is always OK to “pass” when you are asked to share a comment.
  • No one or two individuals should dominate a discussion. If you have already voiced your ideas, let others have an opportunity. When you speak, be brief and to the point.

Ground Rules of Interaction

  • Refrain from side conversations when someone is sharing with the group. Pay attention to the person speaking. If you think you will forget an idea that comes to mind, write it down.
  • Test assumptions and inferences. This ensures that we make decisions with valid

Anything else we should add to the list?

Assignments and Examinations

With a partner, access the syllabus and find:

  • The breakdown of grades in this course
  • What is the expected timeline for grading? (how many days after deadline should grades be posted)
  • How many days do you have to dispute a grade?

What other questions do you have?

Class Participation

  • Attendance is not mandatory
  • You should come to class, lots of hands on time and and opportunities for you to try (and fail) at implementing things
  • Best discussion medium? Discord? D2L?


We will be using Gradescope for assignment submission in this course. Go on D2L and check the link for the first assignment.

Intro to Visualization

Why visualization?

Computer-based visualization systems provide visual representations of datasets designed to help people carry out tasks more effectively. Visualization is suitable when there is a need to augment human capabilities rather than replace people with computational decision-making methods.

– Munzner, Tamara. Visualization Analysis and Design (AK Peters Visualization Series)

Discuss with a partner:

  • Why do you think the “people” part of visualization is important?
  • What are other important aspects of visualization?

Why visualization?

Visualization has a long history of presenting data to make a point to a target audience.

Nightingale Rose Diagram: In March 1855 the Sanitary Commission visited the hospital where Nurse Florence Nightingale worked, resulting in a clean up of the hospital’s drinking water and ventilation. Nightingale collected data on deaths before and after the intervention, revealing its impact.

W. E. B. Du Bois’s Data Portraits: Created visual representation of data showing the diversity and breadth of the black presence in America.

Why visualization?

Frank Anscombe, “Graphs in Statistical Analysis”

  • Access to look at the data (presented in two formats)

  • With a partner, try to make sense of the data (using any technology you want). HINT: run descriptive stats, and then try some simple visualization

  • Share your work with the group

Web Stack

How are we building visualizations in this course?

We will be using web technologies to build visualizations in this course:

  • HTML
  • CSS
  • SVG
  • JavaScript (d3.js)

Why use web technologies?

  • All users need is a web browser (no need to install anything locally)
  • Lots of JavaScript libraries that allow custom visualizations and adding interactivity


  • Backbone of developing for the web
  • Markup language





  • Allows for interactivity
  • Libraries with pre-written functions (D3.js)