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 a linear scale
- Attach data to visual elements
- Use data attached to a visual element to affect its appearance
- Create a time scale
- Parse and format times
- Set dynamic domains
- Dynamically generate SVG elements
- Create axes
- Display data in a table
The complete code for this section can be found here: https://github.com/PacktPublishing/D3.js-Quick-Start-Guide/tree/master/Chapter03.