Data Visualization

Jump to Today

Welcome to Data Visualization CS573!

  • Start date: August 22, 2024
  • End date: December 13, 2024

Name of Course: Data Visualization CS57

Department: Computer Science

Term: 2024 Fall Semester

 

Instructor:

Curran Kelleher

Contact: ckelleher@wpi.edu

 

Textbook:

Visualization Analysis & Design by Tamara Munzner (2014) (ISBN 9781466508910)

This is a required textbook for the course.

 

Course Description:

This course is all about data visualization; the art and science of turning data into compelling interactive graphics. We’ll explore how to analyze, design and construct data visualizations based on data available and tasks to be achieved. This process includes data processing, mapping data attributes to visual marks and channels, and strategic visual encoding based on known properties of visual perception as well as the data and tasks at hand. We will also go deep on modern JavaScript development for interactive Web-based graphics. Students will create their own data visualizations using Web technologies and Open Source libraries including D3.js and related tools. This course will be JavaScript-heavy, so a willingness to learn JavaScript and related technologies is a must.

 

Prerequisites:

  • Some programming experience in any language
  • Ideally a course on computer graphics, but this is not strictly required
  • Willingness to invest in becoming proficient in JavaScript
  • Interest in interactive data visualization!

 

Learning Outcomes:

By the completion of this course, learners will be able to:

  • Analyze and critique existing visualizations based on data visualization theory
  • Design and build new data visualizations based on the data and tasks at hand
  • Craft visual presentations of data for effective communication
  • Prepare data for visualization including data transformations such as aggregation and filtering
  • Develop interactive visualizations using Web Technologies and D3.js

 

Communication:

  • Primary communication will be via Discord
  • Direct message me in the Discord for quick communication
  • If you have a question that only I can answer, and is not suitable for messaging in Discord, email me at ckelleher@wpi.edu
  • I will respond within 24 hours on weekdays
  • Office hours times TBD based on student preferences

 

Course Approach:

  • We will use Canvas for content presentation and submission of assignments
  • Course material will be asynchronous, delivered weekly as Canvas modules
  • Canvas modules will include video lectures, assigned reading, and links to external resources such videos in YouTube, articles, code examples, and tutorials
  • Weeks begin on Thursday mornings and close on Wednesdays at 11:59pm
  • Assignments submitted later than 11:59pm on Wednesdays of the given week will be considered late
  • The course will run for 15 weeks
  • The WPI academic calendar will be respected regarding holidays and breaks
  • Students will be expected to put in approximately 10-15 hours of work per week

 

Course Content:

The course will roughly be 50/50 theory and practice. The theory part will come from our textbook. The practice part will be original material developed by me, Curran Kelleher!

Reference links:

Week

Theme

Homework Assignments/Projects

1

Introduction

Reading:

  • Chapter 1: What's Vis and Why Do It

Lectures:

  • Course Overview
  • What is Data Visualization
  • Introduction to Web Technologies
  • Hello World in JavaScript
  • Drawing Circles with D3
  • D3 Data Joins
  • Drawing Lines with D3

Assignments:

  • Introduce yourself via video
  • Find and describe a data visualization relating to current events
  • Make a creative variant of circles with D3

2

Get the Data

Reading:

  • Chapter 2: What: Data Abstraction

Lectures:

  • D3 Transitions
  • Solar System with D3
  • Input for Visualization: Data and Tasks
  • Loading and Parsing Data with D3
  • The Palmer Penguins Dataset
  • The UN Population Estimates Dataset
  • Keeling Curve Dataset
  • Line Chart with Multiple Lines Data Prep

Assignments:

  • Find and describe 3 datasets
  • Define Tasks / Goals for your 3 datasets
  • Load and parse those 3 datasets using D3
3 Sketch the Vision

Reading:

  • Chapter 3: Why: Task Abstraction

Lectures:

  • Margins
  • Viz Function Concept
  • Scales and Axes
  • Axis Labels
  • Simple Scatter Plot
  • Handling Missing Data

Assignments:

  • Sketch several ideas for visualization
  • Create a pseudo-visualization that approximates the sketch

4

 

First Visualizations

 

Reading:

  • Chapter 4: Four Levels for Validation

Lectures:

  • Simple Bar Chart
  • D3 Grouped Selections
  • Simple Line Chart

Assignments:

  • Implement real visualizations for your 3 datasets

5

Marks and Channels

Reading:

  • Chapter 5: Marks and Channels

Lectures:

  • World Map
  • Points on a Map
  • Spinning Globe
  • Animation with Hot Reloading
  • Globe Panning and Zooming
  • Submarine Cables Globe
  • Using Packages in VizHub (exotic map projections)

Assignments:

  • Make a map

6

Networks and Trees

Reading:

  • Chapter 6: Rules of Thumb

Lectures:

  • Circle Pack Tree Visualization
  • Tidy Tree
  • Zooming on Trees
  • Force Directed Graph Layout
  • Sugiyama Graph Layout with Dagre.js

Assignments:

  • Create a tree visualization

7

Color

Reading:

  • Chapter 7: Arrange Tables

Lectures:

  • Scatter Plot with Color Legend
  • Migration for Hot Reloading
  • Choropleth Map

Assignment:

  • Use color to visualize some aspect of your data

 

8

Interaction

Reading:

  • Chapter 8: Arrange Spatial Data

Lectures:

  • Mouse Follower
  • Interactive Color Legend
  • Responsive Viz Container
  • Responsive Axes
  • Axes with Hover
  • Responsive Visualizations
  • Bar Chart with Hover
  • Brushing Circles with D3 Brush
  • Zoomable Circles with D3 Zoom
  • Draggable Circles with D3-Drag
  • Draggable Circles with Voronoi
  • Hovering US States on a Map with Voronoi

Assignment:

  • Make your visualizations responsive
  • Add some form of interaction to one of your visualizations

 

9

Multiple Views

Reading:

  • Chapter 9: Arrange Networks and Trees

Lectures:

  • Line Chart with Multiple Lines Viz
  • Interactive Stacked Bar Chart
  • Parallel Coordinates with Brushing
  • Ordinal Brushing
  • Custom Axes for Parallel Coordinates

Assignment

  • Use a New Technique

10

 

Trees and Graphs

Reading:

  • Chapter 10: Map Color and Other Channels

Lectures:

  • Histograms
  • Parallel Coordinates with Histograms and Brushing

Assignment:

  • Use a New Technique

11

Small Multiples

Reading:

  • Chapter 11: Manipulate View

Lectures:

  • Focus Plus Context with Brushing

Assignment:

  • Project Proposal First Draft

12

User Interface Integration

Reading

  • Chapter 12: Facet into Multiple Views

Lecture:

  • Common UI Elements with D3
  • Menu with D3
  • Multiple Menus with D3

Assignment:

  • Project Proposal Second Draft

 

13

Multidimensional Filtering and Aggregation

Reading

  • Chapter 13: Reduce Items and Attributes

Lecture:

  • Label Filtering Algorithm
  • Sparkline Part I: Static
  • Sparkline Part II: Interactive

Assignment:

  • Project Progress
  • Peer to Peer Feedback

 14

 Finishing Touches

Reading

  • Chapter 14: Embed: Focus+Context

Lecture:

  • The Value of Side Projects

Assignment (Project):

  • Finish your project and make a video presentation of it.

15

 

Reading

  • Chapter 15: Analysis Case Studies

Lecture:

  • The Value of Side Projects

Assignment (Project):

  • Finish your project and make a video presentation of it.

 

Note: Weekly topics and assignments may be subject to change.

 

Course Requirements:

  • Grade Determination Breakdown

 

Percentage

Assignments

50%

Project

30%

Participation

20%

 

  • Assignments

We will have weekly assignments, due by the end of the week (Wednesday 11:59PM). Submission of the assignments will be inside the Canvas online system. Many assignments will involve submission of a link to your work in an external system such as VizHub. Feedback can be expected within two weeks after submission.

  • Late Work Policy

Late work will be accepted, with a 10% grade penalty for each day that it is late.

  • Class Participation Expectations and Criteria

Our Discord channel will function as participatory space for discussion, like a classroom. Students are encouraged and expected to actively participate in discussions there. Sometimes, assignments will include a discussion participation dimension. This may involve sharing your work with the class, posting your response to a specific question, or responding to the posts of others (peer feedback). Each assignment will include specific grading criteria with regard to participation.

 

Technical Requirements:

  • Chrome Web Browser
  • GitHub account

 

Library Access: 

As a student at WPI, you have access to a variety of resources through the library.  Use the link here to access databases, e-journals, and/or e-books.  You will be required to log in with your WPI username and password to access materials.

 

POLICIES

Academic Integrity:

You are expected to be familiar with the Student Guide to Academic Integrity at WPI that is downloadable from here.  Consequences for violating the Academic Honest Policy range from earning a zero on the assignment, failing the course, or being suspended or expelled from WPI.

Common examples of violations include:

  • Copying and pasting text directly from a source without providing appropriately cited credit
  • Paraphrasing, summarizing, or rephrasing from a source without providing appropriate citations
  • Collaborating on individual assignments
  • Turning in work where a good portion of the work is someone else’s, even if properly cited

 

Academic Accommodations:

We at WPI strive to create an inclusive environment where all students are valued members of the class community.  

If you need course adaptations or accommodations because of a disability, or if you have medical information to share with us that may impact your performance or participation in this course, please make an appointment with us as soon as possible.  

Students with approved academic accommodations should plan to submit their accommodation letters through the Office of Accessibility Services Student Portal.  Should you have any questions about how accommodations can be implemented in this particular course, please contact me as soon as possible.  

Students who are not currently registered with the Office of Accessibility Services (OAS) but who would like to find out more information regarding requesting accommodations and what that entails should plan to contact them via: 

Email: AccessibilityServices@wpi.edu and/or 

Phone: (508) 831-4908.

On Campus – Unity Hall

 

Mental Health

 

WPI’s Student Development & Counseling Center (SDCC) staff are available for students in need of support: contact them directly and confidentially by phone at 508-831-5540 or email at SDCC@wpi.edu; or stop by their office at 16 Einhorn Road. 

The I’m Concerned About a Student form provides a venue to connect with WPI services if you know of a student who is struggling and needs outreach. 

The National Suicide Prevention Lifeline is a free, 24/7 service that can provide individuals with support, information, and local resources regarding suicide. Call them at 1-800-273-TALK (8255) or visit www.suicidepreventionlifeline.org. There is also Suicide Awareness & Prevention information on the WPI website. 

If there is a chance someone is in imminent danger of suicidal action, WPI Campus Police can be reached at 508-831-5555 (or call 911 if off campus).



Grading Policy:

Final course grades are based on a student’s performance as follows:

Letter Grade

Percentage

A

90 - 100

B

80 - 89

C

70 - 79

D

60 - 69

F

< 60

Course incompletes may be granted if the major part of the course is completed; however, no additional credit can be given for missed class discussions or teamwork beyond the end of the course.  In addition, in the case of an incomplete, the student is responsible for handing in the final work within the WPI required timeframe of one (1) year.  After this time, an incomplete grade changes to a failing (F) grade.

Course Summary:

Date Details Due