Back to syllabus

Readings

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

• Data and D3, from Interactive Data Visualization for the Web
• Drawing with Data, from Interactive Data Visualization for the Web

Overview

In this class, we will use d3 to build a chart using data loaded from a .csv file.

Topics

• Making an HTML button
• Functions in JS and HTML
• D3 scale functions d3 Scales
• D3 selections, Enter, exit, update paradigm. How Selections Work, Thinking with Joins
• Anonymous (accessor) functions for setting properties in d3 details here
• D3 axes d3 Axes
• Drawing a scatterplot

Final Project

Brainstorm a series of simple visualizations and ambitious visualizations for your data sources.

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: Choose one of your final project datasets that has at least two series (two year's worth of data, data for men and women, etc), and plot a scatterplot using one series of the data. If you don't have final project data yet, you can use the marathon data files uploaded on Slack after class. If you don't have actual values for your data but you already know what columns and rows you will have, you can make up data in Excel for this assignment.
• Final project: Mock up three simple visualizations of your datasets in Excel or other software. (Nothing to turn in via Git; bring your mockups to class) This site may be helpful for map data.

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