angular-d3

Blogpost about this project: http://angularjs.de/artikel/angularjs-d3-wordcloud

Create directives to enable even more easy usage of d3 by Mike Bostock!

##D3 AngularJS Module

D3 component to provide d3 as module for the injector. Registerd as d3.

Include component as every other component via script tag into your webapp.

<script src="components/angular/angular.js"></script>
<script src="components/d3/angular-d3.js"></script>

Add d3 module to the requires Array.

angular.module('exampleApp', ['d3']);

Now you can inject the d3 module e.g. in a directive definition and enjoy the full power of d3 in a isolated scope without usage of the d3 in a global var.

angular.module('d3')
  .directive('example', function (d3){
  // use d3 
  }
);

##Directives

With d3 directives you are able to create wonderful html extensions that enable people with basic javascript experience to create d3 visualisations.

I will publish here directives that come with my projects iam working on. Feel free to contribute extensions, fixes or own directives.

Development

To install local dependencies you need to run the install task of npm / bower.

npm install && bower install

To build the module you need to run the grunt with default task

grunt

Todo

• improve build process
  • include the current d3 release, currently just pasted
  • solve warning in the build
• finish tests for the wordcloud directive, just notes now
• Implement more directives
  • Dynamic Ajax Wordcloud (Use Blacklist for words from here https://github.com/mlarocca/Chrome-Extensions/blob/master/TagCloudChromeEx/src/js/app/common_vars.js )
• Set up a font for every word node