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 bar graph using AngularJS


The first example will create a reusable bar chart component to demonstrate creating an AngularJS directive with an underlying controller. This is implemented within an HTML file, 01_just_bars.html, which consists of the following components:

  • The AngularJS application object: This functions as an entry point for AngularJS code in the page (that is, in app.js)

  • An AngularJS controller (in controllers/basic_dashboard.js): This creates the data and sends it to the directive that renders the HTML code for the graph

  • The directive: This renders the D3.js bar chart in directives/bars.js.

The web page and application

The AngularJS application is presented to the user via a web page, which begins by loading the AngularJS and D3.js libraries (this is common in all the examples in this chapter). Take a look at the following code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://d3js.org/d3...