D3 Directives in Angular

Setting up a D3 Directive using Angular and Elasticsearch

Here, we create a donut-chart directive using:

1. Yeoman: for scaffolding our app (including Bower and Grunt)
2. Angular: as our MV* framework
3. D3: as our charting library
4. Elasticsearch: as our backend data store
5. Elasticsearch Javascript Client: to communicate with our Elasticsearch instance
6. NFL dataset: our test dataset

Loading data into Elasticsearch

For instructions on getting started with Elasticsearch, please visit the overview page.

Download and unzip the NFL dataset. To load the data into Elasticsearch, open the terminal, change into the NFL dataset directory, and run:

curl -XPOST localhost:9200/nfl?pretty
curl -XPUT localhost:9200/nfl/2013/_mapping?pretty -d @mappings/nfl_mapping.json
curl -XPOST localhost:9200/nfl/2013/_bulk?pretty --data-binary @datasets/nfl_2013.json

Scaffolding our app with Yeoman

To install Yeoman, you will need to have node and npm installed. If you haven't installed node or npm, this link is a great place to get started.

npm install -g yo

If you are using npm 1.2.10 or above, this will also automatically install grunt and bower for you. If you're on an older version of npm, you will need to install them manually:

npm install -g grunt-cli bower

If you have installed Grunt globally in the past, you will need to remove it first:

npm uninstall -g grunt

Finally, install the angular generator:

npm install -g generator-angular

After that, create a new directory for your application, then run:

yo angular

Here, we are first generating the file structure for a basic web application and then writing a number of boilerplate files for a new AngularJS application on top of it. This includes boilerplate directives and controllers as well as scaffolded Karma unit tests.

Installing dependencies

Let's install the dependencies for our app using bower:

bower install d3
bower install elasticsearch

You should now have d3.js and elasticsearch.js installed. You can check within the bower_components directory to verify or look for the script tag in the index.html file.

Setting up our Angular Service

Now, we are ready to create a connection to our Elasticsearch server, which will be on our localhost on port 9200.

**Note: For the sake of simplicity, we have included both d3.js and elasticsearch.js in our global namespace.

Lets create our Angular service using our angular generator:

yo angular:service ejs

Now, simply modify the file according to the ejs.js file below.

Adding an Angular Controller

Next, let's add a controller to our app:

yo angular:controller pie

Now, simply modify the file according to the pie.js file below.

We could add a controller to our directive explicitly, but I like to keep my controllers flexible and not bound to one specific directive.

Creating our D3 Directive

The last major hurdle is to create our Angular directive with our D3 code. Let's create our directive:

yo angular:directive piechart

Now, modify the file according to the piechart.js file below.

The magic here is in $watch. The scope watches for changes to the data, and then re-renders the chart.

Finishing touches

Let's wrap it up with some final changes. Open your app.js file and modify it according to the app.js file below. Finally, add a pie.hmtl file exactly like the one below.

Now, serve your app by running:

grunt server

You should now see a donut chart in your browser window, and you should be able to change the values of the chart by modifying the values in the text boxes. Give it a try!

Congrats! You've just created an Angular app with a simple D3 directive and Elasticsearch as your backend data store.