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

Summary


In this chapter, you extended your knowledge of using D3 to create a bar graph from a collection of integers. You learned how to position and size each element of the graph according to its data, and how to position groups of data that contain multiple visuals representing a single bar—specifically, how to add a label that represents the value of the underlying datum at the top of a bar.

We then examined the facilities in D3.js for creating axes. We introduced the concept of a scale, which is an important facet of implementing axes. We further examined the different orientations available for an axis, and how to invert the order of the labels on an axis. Finally, we combined the axis and the bar graph together into an effective visualization of the data.

As great as our bar chart looks in this example, we will still have several issues. The overall size of the graph was related to the actual values of the data. This was convenient for demonstrating the construction of a bar graph visualization...