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

Techniques to demonstrate the flow of information


The last two layouts and corresponding visualizations that we will examine help the viewer to understand how data changes as it flows over time or through intermediate points.

Using streamgraphs to show changes in values

A streamgraph demonstrates the change in values in a multiple series of data as a flowing stream of data. The height of each stream represents the value of that stream at that moment in time.

They are useful for demonstrating where certain categories start or stop at different points along the graph. Common examples are data such as box-office receipts or the number of listeners for various artists on streaming media as they change over time.

To demonstrate a streamgraph, we will use the data available at https://goo.gl/HTL4HG.

This data consists of four series of data:

 [
  [ 20, 49, 67, 16,  0, 19, 19, 0,  0, 1, 10,  5, 6,  1,  1 ],
  [ 4,   6,  3, 34,  0, 16,  1, 2,  1, 1,  6,  0, 1, 56,  0 ],
  [ 2,   8, 13, 15,  0, 12, 23...