Back to syllabus

Readings

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

• Intro to SVG for the web, from Internetrix
• (optional) Examples of SVG shapes, from Arcbees
• Overview of data types and SVG elements, from Interactive Data Visualization from the Web

Overview

In this class, we will experiment with the <svg> tag to draw shapes in a web browser, and set up the d3 library to help us draw shapes using Javascript.

Topics

• What is SVG?
• Coordinate systems, drawing simple shapes in HTML
• Styling shapes using CSS
• Setting up D3 library
• Using D3 to draw shapes
• Mouse events and transitions (if time allows)

Final Project

Checkin on topics and locating data. Discuss cleaning and formatting data for .csv import

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: Draw a composition of squares and/or circles on the SVG element (in HTML, without D3). Each element should have an id or class and be styled using CSS. Adjust size, placement, and color of squares to make an aesthetically pleasing arrangement.
• PS02: In a separate file, draw the same composition of squares and/or circles using D3.
• Final project: Continue searching for data. Look for related data visualizations that inspire you.

Assignment 1 submissions

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

Assignment 2 submissions

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

Back to syllabus