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

Enhancing a bar graph with interactivity


Now let's apply what we have learned about mouse event handling to create an interactive bar graph. Mouse events on a bar chart can provide useful contextual information to the person interacting with the graph.

The data for the examples will use a stripped-down version of the life expectancy vs fertility dataset that was used in earlier chapters. This dataset will use the data for the Latin American and Caribbean economic regions only, which contain roughly 35 countries, for the year 2013.

The bars in the examples will represent the longevity, will be annotated at the top with the country code, and have vertically oriented text representing the actual longevity value and the full country name. The examples will omit axes and margins to keep things simple.

The code and live example for this example is available at the following location:

Note

bl.ock (8.6): http://goo.gl/8jb9Rn

This interaction pattern can be used to visually accentuate a particular bar...