D3.js Quick Start Guide

Building an Interactive Scatter Plot

Let's pretend we've started jogging and we want to visualize the data regarding our progress as a runner, with a scatter plot. We're going to have an array of objects, each with a date and distance properties. For each object in the array, we're going to create a circle in our SVG. If the distance property of an object is relatively high, its associated circle will be higher up on the graph. If the date property of an object is relatively high (a later date), its associated circle will be farther right.

By the end of this lesson, you should be able to do the following:

• Add a link to the D3 library
• Add an<svg>tag and size it with D3
• Create some fake data for our app
• Add SVG circles and style them
• Create ...