DATA VISUALIZATION

DATA VISUALIZATION

Welcome to Data Visualization CS573! This course is 100% online, and runs from August 22 - October 30.

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. Students will also learn to analyze and think critically about existing visualizations regarding the design choices made. Students will create their own data visualizations using Web technologies and Open Source libraries including D3.js and React. Students will also read papers from the current and past visualization literature and create video presentations of their work.

 

Required Textbook:

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

 

Reference Material (optional):

  • Semiology of Graphics by Jacques Bertin (2010)
  • Info We Trust by RJ Andrews (2019)
  • Interactive Data Visualization for the Web by Scott Murray 2nd Edition (2017)
  • D3.js in Action by Elijah Meeks 2nd Edition (2017)
  • The Grammar of Graphics by Leland Wilkinson
  • ggplot2 Elegant Graphics for Data Analysis by Hadley Wickham
  • Last year's course material

 

Prerequisites:

Some programming experience in any language. Ideally you have taken a course on computer graphics, but this is not strictly required.

 

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.
  • Conduct exploratory data analysis using visualization.
  • Craft visual presentations of data for effective communication.
  • Use knowledge of perception and cognition to evaluate visualization design alternatives.
  • Design and evaluate color palettes for visualization based on principles of perception.
  • Clean and prepare data for visualization.
  • Apply data transformations such as aggregation and filtering.
  • Identify opportunities for application of data visualization in various domains.
  • Use JavaScript with D3.js and React to develop interactive visualizations for the Web.

Communication:

  • Primary communication will be via Slack.
      • See Introduce Yourself assignment for details on how to join.
      • You’ll be expected to check this Slack for updates at least once every 24 hours.
      • Using Slack on desktop is recommended.
      • The mobile version is limited in some respects, which can make it frustrating.
  • I (Curran) will be present in Slack most weekdays roughly 8AM to 11AM.
    • If another student may be able to answer your question, please post it in Slack.
    • Direct message me in the Slack for quick communication.
  • If you have a question that only I can answer, and is not suitable for messaging in Slack, email me at ckelleher@wpi.edu. I will respond within 24 hours, weekdays.

 

Course Approach:

  • We will use the Canvas system for content organization and submission of assignments.
  • Course material will be delivered weekly as video, assigned reading, and links to external resources such as lectures on YouTube, articles, examples, and tutorials.
  • Weeks begin on a Thursday at 7am and close on Wednesday at 11:59pm.
  • Student work turned in later than 11:59pm on Wednesday of the given week will be considered late.
  • The course will run for 10 weeks.
  • Students will be expected to put in approximately 10-15 hours of work per week, between absorbing course material, completing assignments, and working on projects.

Course Content:

The course will roughly be 50/50 theory and practice. The theory part will come from our textbook. For the practice part I'm going to teach you how to use the tools that I would use in a professional setting, namely modern web development tools such as HTML, CSS, JavaScript, D3.js, and React. We're going to go through this book cover-to-cover, and as we do I'll introduce the tools that you need to know in order to reproduce some of the things that are discussed in the book

(Details subject to change)

Week

Theme

Homework Assignments/Projects

1

Overview of Data Visualization, Introduction to Web Technologies

Reading:

  • Chapter. 1 "What’s Vis, and Why Do It?"

Lectures:

  • Course Overview
  • What is Data Visualization
  • Introduction to Web Technologies
  • Let's Make a Face Part I - HTML, CSS & SVG
  • Let's Make a Face Part II

Assignments:

  • Introduce yourself via video.
  • Find and describe a data visualization relating to current events.
  • Tweak a face.

2

Inputs for Data Visualization: Data and Tasks

Reading:

  • Chapter 2 "What: Data Abstraction"
  • Chapter 3 "Why: Task Abstraction"

Lectures:

  • Input for Visualization: Data and Tasks
  • Loading and Parsing Data with D3.js
  • Basics of Interaction with Unidirectional Data Flow
  • React Components and ES6 Modules

Assignments:

  • Find and describe 3 datasets that you’d like to potentially visualize for your project.
  • Load and parse those 3 datasets using D3.js.

3

Validation, Marks and Channels

Reading:

  • Chapter 4 "Analysis: Four Levels for Validation"
  • Chapter 5 "Marks and Channels"

Lectures:

  • Encoding Data with Marks and Channels
  • Iterating Fast with Vega-Lite API

Assignments:

  • Sketch one or more ideas for visualization
  • Vizualize your dataset(s) with Vega-Lite API

4

Common Visualization Idioms

Reading:

  • Chapter 6 "Rules of Thumb"
  • Chapter 7 "Arrange Tables"

Lectures:

  • Creating a Scatter Plot
  • Introduction to D3 Scales
  • Common Visualization Idioms with React&D3
    • Bar Chart
    • Line Chart
    • Area Chart
    • Line Chart with Multiple Lines
    • Stacked & Grouped Bar Chart
    • Stacked Area Chart & Streamgraph

Assignment:

Create a visualization of the dataset you chose for your project using D3.js, following one of the idioms discussed, including axes and legends.

5

Visualization of Spatial Data, Networks, and Trees

Reading:

  • Chapter 8 "Arrange Spatial Data"
  • Chapter 9 "Arrange Networks and Trees"

Lectures:

  • Making a Map of the World
  • Node-Link Tree
  • Treemaps
  • Visualizing a Network

Assignment:

  • If your project dataset has a spatial, network, or tree aspect, visualize it.

6

Using Color and Size in Visualization, Ways of Interacting

Reading:

  • Chapter 10 "Map Color and Other Channels"
  • Chapter 11 "Manipulate View"

Lectures:

  • Encoding Data using Color & Size
  • Adding Menus to a Scatter Plot (X, Y, Color, Size)
  • Tooltips & Interactive Highlighting
  • Panning & Zooming on a Map

Assignment (Project):
Add color to (or refine the palette of) your project using D3.js and one of the tools discussed. Add some form of interaction to your project.

7

Interaction Techniques

Reading:

  • Chapter 12 "Facet into Multiple Views"

Lectures:

  • Implementing Small Multiples
  • Linked Highlighting with Brushing
  • Crossfiltering

Assignment (Project):
Add one of the interaction techniques discussed to your project using D3.js.

8

Data Reduction

Reading:

  • Chapter 13 "Reduce Items and Attributes"

Lectures:

  • Data Reduction
  • Histograms
  • Binned Aggregation 
  • Contour Plots
  • Box Plots
  • Violin Plots
  • Choropleth Maps
  • Hexbin Mapping

Assignment (Project)
Create a visualization of your project dataset that (directly or indirectly) leverages some type of data reduction.

9

Focus + Context

Reading:

  • Chapter 14 "Focus + Context"

Lectures:

  • Focus + Context Area Charts with Brushing
  • Building a Migrant Deaths Dashboard

Assignment (Project):
Use Focus + Context idiom in your project.

10

Case Studies

Reading:

  • Chapter 15 "Analysis Case Studies"

Lectures:

  • The World of Data Visualization Practitioners

Assignment (Project):
Final project submission.

Note: Weekly assignments may be subject to change, and will be given in detail week by week.

 

Course Requirements:

  • Grade Determination Breakdown 

 

Percentage

Assignments

50%

Project

30%

Quizzes

10%

Participation

10%


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

 

  • 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 one week after submission.

 

  • Late Work Policy

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

Resubmissions based on initial grading and feedback will be re-graded if submitted before the deadline. You may re-submit as many times as you like before the deadline. After the deadline for an assignment, it will only be graded once and the grade will not be updated after subsequent resubmissions. Please submit a few days ahead of the deadline so you can get feedback, resubmit based on feedback, and maximize your grade.

 

  • Class Participation Expectations and Criteria

Our Slack team 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.
    • When copy-pasting code (which is an accepted practice in software development), you MUST provide the URL from which the code originated AND the full name of the original author.
  • Paraphrasing, summarizing, or rephrasing from a source without providing citations.
  • Collaborating on individual assignments.

 

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.  If you have approved accommodations, please request your accommodation letters online through the Office of Disability Services student portal.  If you have not already done so, students with disabilities who need to utilize accommodations for this course are encouraged to contact the Office of Disability Services as soon as possible to ensure that such accommodations are implemented in a timely fashion.

Email – DisabilityServices@wpi.edu

Phone – (508) 831-4908

On Campus – Daniels Hall, First Floor 124

 

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
Public Domain This course content is offered under a Public Domain license. Content in this course can be considered under this license unless otherwise noted.