Book Image

D3.js By Example

By : Michael Heydt
Book Image

D3.js By Example

By: Michael Heydt

Overview of this book

<p>This book will take you through all the concepts of D3.js starting with the most basic ones and progressively building on them in each chapter to expand your knowledge of D3.js.</p> <p>Starting with obtaining D3.js and creating simple data bindings to non-graphical HTML elements, you will then master the creation of graphical elements from data. You’ll discover how to combine those elements into simple visualizations such as bar, line, and scatter charts, as well as more elaborate visualizations such as network diagrams, Sankey diagrams, maps, and choreopleths.</p> <p>Using practical examples provided, you will quickly get to grips with the features of D3.js and use this learning to create your own spectacular data visualizations with D3.js.</p>
Table of Contents (20 chapters)
D3.js By Example
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
5
Using Data and Scales
Index

Adding a fifth dimension to a bubble plot – time


Now let's apply everything we have learned about animation to some real data. We are going to revisit our bubble plot visualization from Chapter 6, Creating Scatter and Bubble Plots, expanding the set of data from a single year (2013) to all the available years (1960 through 2013). We will modify the rendering of the visual to periodically update and animate the bubbles into new position and sizes based upon the change in the values of the data.

The expanded data set is available at https://goo.gl/rC5WS0. The fundamental difference is the inclusion of a year column, and data covering 54 years.

The code for and the demo of the example is available at the following link:

Note

bl.ock (7.7): http://goo.gl/iYCNbG

When you run this, you will see a smooth animation of the data over the years. It is obviously impossible to show this effectively in a static medium such as a book. But for demonstration, I have provided screenshots of the visualization at...