Chapter 4. Building a Chart Directive

In the last two chapters, we saw a basic introduction to D3.js and learned about data preprocessing and array manipulation. In this chapter, we will apply the acquired knowledge to integrate a D3.js visualization into a simple AngularJS application.

First, we will set up an AngularJS template that serves as a boilerplate for the examples and the application. We will see a typical directory structure for an AngularJS project and initialize a controller. Similar to the previous example, the controller will generate random data that we want to display in an autoupdating chart.

Next, we will wrap D3.js in a factory and create a directive for the visualization. You will learn how to isolate the components from each other. We will create a simple AngularJS directive and write a custom compile function to create and update the chart.

In the end, you will learn about unit tests, integration tests, set them up, and implement them for the visualization...