D3.js Quick Start Guide

Creating a linear scale

We currently have three circles in our SVG and three objects in our runs array. One of the best things D3 does is provide the ability to link SVG elements with data so that as the data changes so do the SVG elements. In this chapter, we're going to link each circle to an object in the runs array. 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 is farther right.

First, let's position the circles vertically, based on the distance property of the objects in our runs array. One of the most important things that D3 does is provide the ability to convert (or map) data ...