DATA VISUALIZATION

Office hours will be Mondays 12:00 PM 1:00 PM - Will post Zoom link in Slack

Required Textbook:

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

 

Reference Material (optional, but awesome):

• Interactive Data Visualization for the Web by Scott Murray 2nd Edition (2017)
• D3.js in Action by Elijah Meeks 2nd Edition (2017)
• Semiology of Graphics by Jacques Bertin (2010)
• The Grammar of Graphics by Leland Wilkinson
• ggplot2 Elegant Graphics for Data Analysis by Hadley Wickham

 

Course Description:

This course is all about data visualization, the art and science of turning data into readable graphics. We’ll explore how to design and create data visualizations based on data available and tasks to be achieved. This process includes data modeling, data processing (such as aggregation and filtering), mapping data attributes to graphical attributes, and strategic visual encoding based on known properties of visual perception as well as the task(s) at hand. Students will also learn to evaluate the effectiveness of visualization designs, and think critically about each design decision, such as choice of color and choice of visual encoding. Students will create their own data visualizations, and learn to use Open Source data visualization tools, especially D3.js. Students will also read papers from the current and past visualization literature and create video presentations of their findings.

 

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:

• Design and create 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.
• Apply data transformations such as aggregation and filtering for visualization.
• Identify opportunities for application of data visualization in various domains.
• Critique existing visualizations based on data visualization theory and principles.
• Use JavaScript with D3.js 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.
• 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.
• We will have 🎉office hours🎉 as a live video session. Time TBD.

 

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 fantastic lectures on YouTube, articles, examples and tutorials.
• Weeks begin on a Thursday at 7am and close on Wednesday at 11:59pm.
• All student work will be turned in later than Wednesday 11:59pm 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:

Class	Material to be Covered	Homework Assignments/Projects
1	Overview of Data Visualization, Introduction to Web Technologies	Reading: Chapter. 1 “What’s Vis, and Why Do It?” Lectures: Why Visualize Data? Introduction to SVG and CSS. Introduction to JavaScript. Introduction to VizHub. Making a Face with D3.js. Assignments: Introduce yourself via video. Find and describe a data visualization relating to current events. Tweak a face with D3.js.
2	The Shapes of Data	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 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	Marks and Channels	Reading: Chapter 5 “Marks and Channels” Lectures: Encoding Data with Marks and Channels Rendering Marks and Channels with D3.js and SVG Introduction to D3 Scales Creating a Scatter Plot with D3.js Assignments: Re-create one of the small graphics from Figure 5.1 (page 94) using D3.js.
4	Common Visualization Idioms	Reading:  Chapter 7 “Arrange Tables” Lectures: Reusable Dynamic Components using the General Update Pattern Reusable Scatter Plot Common Visualization Idioms with D3.js Bar Chart, Vertical & Horizontal Pie Chart and Coxcomb Plot Line Chart Area Chart 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 Maps Visualizing Trees and Networks Assignment: If your project dataset has a spatial, network, or tree aspect, visualize it.
6	Using Color and Size in Visualization	Reading: Ch. 10 “Map Color and Other Channels” Lectures: Encoding Data using Color Encoding Data using Size Stacked & Grouped Bar Chart Stacked Area Chart & Streamgraph Line Chart with Multiple Lines Assignment (Project): Add color to (or refine the palette of) your project using D3.js and one of the tools discussed.
7	Interaction Techniques	Reading: Chapter 11 “Manipulate View” Lectures: Adding interaction with Unidirectional Data Flow Using UI elements to control a scatter plot Panning and Zooming on a Globe Adding tooltips Assignment (Project): Add one of the interaction techniques discussed to your project using D3.js.
8	Multiple Linked Views	Reading: Chapter 12 “Facet into Multiple Views” Lectures: Small Multiples Linked Highlighting with Brushing Linked Navigation: Bird's Eye Map Assignment (Project): Combine your 2 visualizations from week 4 with some form of linked interaction.
9	Data Reduction	Reading: Chapter 13 “Reduce Items and Attributes” Lectures: Histograms Aggregating Data with Group-By Hexbin Mapping Crossfiltering Assignment (Project) Create a histogram or aggregated bar chart of your project dataset.
10	Focus + Context	Reading: Chapter 14 “Focus + Context” Lectures: Building a Migrant Deaths Dashboard Assignment (Project): Use Focus + Context idiom in your project.

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 usually be inside the Canvas online system.
Many assignments will involve submission of a link to your work in an external system such as GitHub or bl.ocks.org. 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), 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.