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.