Creating Custom D3 Directives in AngularJS by Steven Hall.
From the post:
Among the most popular frameworks for making interactive data visualizations with D3 is AngularJS. Along with some great tools for code organization, Angular’s use of directives can be a powerful way to implement interactive charts and keep your code clean and organized. Here we are going to look at a simple example that creates a service that pulls data from last.fm using their public API. The returned data will be used to update two interactive charts created using Angular directives.
As usual in these tutorials the code is kept to a minimum to keep things clear and to the point. The code written for this example weighs in at about 250 lines of JavaScript and the results are pretty cool. The example uses D3’s enter, update, and exit selections to illustrate how thinking about object constancy when transitioning from one state to another can be really powerful for communicating relationships in the data that may be hard to spot otherwise.
I think the example presented here is a good one because it brings up a lot of the common concerns when developing using AngularJS (and in JavaScript in general really) with just a short amount of code.
We’ll touch on all the following concerns:
- Avoiding global variables
- Creating data services
- Dependency injection
- Broadcasting events
- Scoping directives
- Making responsive charts
In addition to making a basic service to retrieve data from an API that can be injected into your controllers and directives, this article will cover different ways to scope your directives and using the AngularJS eventing tools. As we’ll see, one chart in the example shares the entire root scope while the other creates an isolated scope that only has access to certain properties. Your ability to manage scopes for directives is one of the most powerful concepts to understand in working with Angular. Finally, we’ll look at broadcasting and listening for events in making the charts responsive.
…
Data delivery. Despite the complexity of data structures, formalisms used to develop algorithms for data analysis, network architectures, and the other topics that fill technical discussions, data delivery drives user judgments about your application/service.
This tutorial, along with others you will find here, will move you towards effective data delivery.