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

Creating a bubble plot


Bubble plots help us to visualize three or four dimensions of data. Each datum in a bubble plot consists not only of two values used to plot against the X and Y axes, but also one or two additional values which are commonly represented by different size symbols and/or colors.

To demonstrate a bubble plot, the following image shows the result of our example:

The data behind this chart is a data set that was pulled together from three different datasets from the World Bank. This data correlates life expectancy at birth relative to the fertility rate for all the countries in the World Bank data for the year 2013.

This chart plots age along the X axis and the birth rate along the Y axis. The relative population of a country is represented by the size of the circle, and the color of the circle represents the economic region of the country as categorized by the World Bank.

We won't dive deeply into this data. It is available at https://goo.gl/K3yuuy.

The first few lines of the...