O'Reilly logo

D3.js Quick Start Guide by Matthew Huntington

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required