Data Visualization

Welcome to Data Visualization CS573!

• Start date: January 10, 2024
• End date: May 1, 2024

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. This course will be JavaScript-heavy, so a willingness to learn JavaScript and related technologies is a must.

 

Required Textbook:

• There is no required textbook for this course
• I will be providing reading material from my upcoming textbook "Constructing Visualizations" as PDFs accessible through Canvas each week.

Reference Material (optional):

• Visualization Analysis & Design by Tamara Munzner (2014) (ISBN 9781466508910)
• Semiology of Graphics by Jacques Bertin (2010)
• Previous versions of the course

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
• 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
• Develop interactive visualizations for the Web

Communication:

• Primary communication will be via Discord
• If another student may be able to answer your question, please post it in 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 Slack, email me at ckelleher@wpi.edu. I will respond within 24 hours on weekdays.

Course Approach

• We will use Canvas for content presentation and submission of assignments
• Course material will be delivered weekly as Canvas modules including video, assigned reading, and links to external resources such as lectures on YouTube, articles, examples, and tutorials
• Live interactive lectures will be held
• Weeks begin on Wednesday mornings and close on Tuesdays at 11:59pm
• Assignments submitted later than 11:59pm on Tuesdays of the given week will be considered late
• The course will run for 15 weeks
• The WPI 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. 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, and D3.js. The flow of the course is designed to roughly match the phases that a real world data visualization project goes through. This is why we jump around the text rather than following it linearly.

(Details subject to change)

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 Drawing a Circle Making a Smiley Face Mouse Follower Assignments: Introduce yourself via video Find and describe a data visualization relating to current events Make a creative face variant with JavaScript and SVG
2	Get the Data	Reading: Chapter 2: What: Data Abstraction Lectures: Input for Visualization: Data and Tasks Immutable Update Patterns Loading and Parsing Data with D3 Analyzing Column Types Assignments: Find and describe 3 datasets Load and parse those 3 datasets using D3 Analyze those datasets in terms of their column types
3	Data Transformation	Reading: Chapter 3: Why: Task Abstraction Lectures: Data Transformation Assignments: Sketch one or more ideas for visualization Process your Data
4	Sketch the Vision	Reading: Chapter 5: Marks and Channels Lectures: Fundamental Graphical Elements with SVG Assignment: Iterate your sketch Create a pseudo-visualization that approximates the sketch
5	Scatter Plots	Reading: Chapter 7: Arrange Tables Lectures: Scatter Plot Assignment: Create a scatter plot with your own data.
6	Axes & Labels	Reading: Chapter 4: Four Levels for Validation Note that this week only, there's not much overlap between the reading and lectures Lectures: Axes & Labels Assignment (Project): Create a bar chart with your data.
7	Line Charts, Area Charts, and Bar Charts	Reading: Chapter 10: Map Color and Other Chanels Lectures: Line Chart Multi-Line Charts Area Charts Stacked Area Charts Color Legend Size Legend Making a Bar Chart Horizontal Bar Chart Stacked Bar Chart Grouped Bar Chart Assignment (Project): Create a line or area chart with your data OR Add color to a visualization you've created
8/9 (Spring Break)	Maps	Reading: Chapter 8: Arrange Spatial Data Lectures: GeoJSON and TOPOJSON Map Projections Choropleth Maps Hierarchical Choropleth Maps Circles on Maps Color Spaces Color Schemes Color Interpotors Color Scales Quantiles Jenks Natural Breaks K-Means Clustering Assignment (Project): Use color in your project. AND/OR Create a map of your data.
10	Single View Interactions	Reading: Chapter 11: Manipulate View Lectures: Hover Highlighting Menus Tooltips Picking Assignment (Project) Add a menu
11	Trees and Graphs	Reading: Chapter 9: Arrange Networks and Trees Lectures: Tree data structure Tidy Tree Cluster Dendrogram Partition Layouts TreeMap Circle Packing Drill Down Interaction Breadcrumbs Interaction Force Directed Tree Force Directed Graph Sugiyama Graph Layout Assignment (Project): Visualize your data as a tree or graph.
12	Small Multiples	Reading: Chapter 12: Facet into Multiple Views Lectures: Brushing Small Multiples Grid Layouts Scatter Plot Matrix Small Multiples on a Map Small Multiples on a Tree Small Multiples on a Graph Assignment (Project): Create a viz that uses small multiples with your data.
13	Multiple View Interactions	Reading: Chapter 14: Embed: Focus+Context Lectures: Multiple Linked Views Architecture Focus Plus Context with Brushing Linked Highlighting Multidimensional Filtering Assignment (Project): Add multiple view interaction in your project.
14	Multidimensional Filtering and Aggregation	Reading: Chapter 14: Embed: Focus+Context Lectures: Histogram Hexbin Maps Multidimensional Filtering Parallel Coordinates with Brushing Assignment (Project): Use multidimensional filtering and aggregation in your project.
15	Finishing Touches	Reading: Chapter 6: Rules of Thumb Lectures: Interactive performance optimization Mobile optimization Production deployment Project delivery Handoff Sharing with the Dataviz Community Assignment (Project): Finish your project and make a video presentation of it.

Note: Weekly assignments may be subject to change.

Stretch goals for topics to cover:

• StreamGraph
• Labeling Area Charts
• Smoothing
• Scatter Plot Variants: Position, Size, Color
• Merimekko Chart
• Radial Bar Chart Variants

Course Requirements:

• Grade Determination Breakdown 

	Percentage
Assignments	50%
Project	30%
Participation	20%

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 (Tuesday 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.

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