Back to syllabus

Readings

Readings should be completed before class, to ensure that you are prepared for in-class exercises

• How Selections Work, from Mike Bostock
• Thinking with Joins, from Mike Bostock
• Updates, Transitions, and Motion, from Interactive Data Visualizations for the Web
• Enter, Update, Exit, from Medium

Overview

In this class, we will create a dynamic scatterplot using D3's update function.

Topics

• What is an update? example 1 example 2 example 3 example 4
• Adding HTML buttons, and our first event listeners
• Restructuring code to allow for data updates
• Adding labels, tooltips, transitions, and mouse interactions (as time allows)

Final Project

Critique data viz mockups, consider additional features to highlight/emphasize data.

Assignment

Assignments should be completed after class, and submitted to the correct GitHub repository by midnight on Monday before the next class. Late or missing assignments will negatively impact your grade.

• PS01: Incorporate updates into your visualization from last week, using an HTML button, slider, or setInterval and D3's update functionality to switch between views of your data.
• Final Project: Create at least three detailed sketches of your data visualizations, based on conversations from last week. (Nothing to turn in; bring your sketches to class)

Assignment 1 submissions

Xun Chong	Stephen Costa	Felippe Rodriguez	Sophia Fox-Sowell
Kuan Lin	George Redak	Angela (Yuanhong) Shi	Abigail Skelton
Ziyi Zhao	Nicole Zizzi	Qingyue Li	Yichia Cheng

Back to syllabus