The Full List In One Page

of Data Visualization and D3 Resources

Resource Type Resource List
D3 And Angular
A List Of D3 And Angular Resources
Books


Blog Posts

  • Using the D3.js Visualization Library with AngularJS
    By creating AngularJS directives that wrap D3.js, you can use the power of AngularJS's data binding to create apps with beautiful visualizations.

  • Proper use of D3.js with Angular directives
    What would be “the Angular way” of integrating D3? I propose the following:
    1) All your D3 logic and presentation must be contained within a directive
    2) Use HTML-declarative syntax to feed of data to your directive instances
    3) By doing that, you can store the data in your controller, passing it to your D3 directive via two-way data binding of parameters
    Let’s illustrate that with an example...

  • D3 on AngularJS
    Combining the power of D3 and Angular can be challenging and confusing. We constantly get asked how to integrate the two in our classes. In this post, we aim to clear the confusion and bring you the best documentation on how to integrate AngularJS and D3.

Videos

  • Using D3 with Rickshaw and Angular
    D3 is awesome for visualisations, but it's a bit too low level at times, especially when you want to do stuff like build a bunch of graphs. Rickshaw is a wrapper project by the people at shutterstock that makes graphing with d3 much easier. There are also some challenges using d3 and rickshaw with angularjs, this screencast will show you how to surmount those.

  • Integrating Components with D3 and AngularJS
    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and frameworks. This includes AngularJS and D3.

JavaScript Libraries

  • beefsack / angular-d3 - D3.js directives for AngularJS
    angular-d3 provides a number of directives to assist in integrating D3.js into an AngularJS application, providing live scope updates to D3.js automating re-rendering.

  • WealthBar / angular-d3 - AngularJS directives for declaratively using D3
    A set of AngularJS directives that provides a declarative syntax for building common charts using D3. The first goal of this project is to create a simple reusable set of D3 directives that are sufficiently complete to be able to put together flexible charts of nearly any type. It is also intended to be extensible by providing a d3ChartController similar to ngModelController so it is easy to create additional custom chart elements.

  • openbrainsrc / Radian - Plotting with AngularJS
    AngularJS + D3.js = Radian. Radian is a JavaScript library for producing interactive SVG plots in HTML using Angular JS and D3.js. Using Angular directives leads to a clear and declarative API for representing plots that can respond to UI elements via Angular data binding.

  • chinmaymk / angular-charts - Angular directives for creating common charts using D3
    Angular directives for commonly used D3 charts. Charts make data easy, coding them should not be hard

  • robinboehm / angular-d3-directives - Angular.js directives for D3.js
    Create directives to enable even more easy usage of d3 by Mike Bostock!...With d3 directives you are able to create wonderful html extensions that enable people with basic javascript experience to create d3 visualisations.

  • cmaurer / angularjs-nvd3-directives - Angular.js Directives for NVD3.js & D3.js charts
    Angular.js Directives for NVD3.js & D3.js charts. Angular.js Directives “are a way to teach HTML new tricks”. Directives are Angular’s way of extending HTML to create new elements and functionality. Directives hide the complexity and code that is necessary to create d3.js, and nvd3.js charts, which makes adding charts to an Angular.js application quicker, and simpler than typical methods. The following charts can be created with just a few lines of JavaScript and HTML code.

  • dangle.js
    A set of AngularJS directives that provide common visualizations based on D3. Dangle provides directives that allow you to create visualizations of your data. You can easily bind the result of queries to HTML elements. When the results update, your visualizations will also update. You can build powerful, interactive applications with just a few lines of HTML.

  • n3-charts / line-chart - Awesome charts for AngularJS.
    n3-charts - Versatile charts for AngularJS. n3-charts is built on top of D3.js and AngularJS, n3-charts.line-chart directive creates beautiful charts in AngularJS applications. It is simple and interactive.

  • Angular-NVD3
    An AngularJS directive for NVD3 re-usable charting library (based on D3). Easily customize your charts via JSON API. This thing is designed to make it easier to work with nvd3.js re-usable charting library. This directive allows you to easily customize your charts via JSON API. The key feature is that the original hierarchical structure of nvd3 models is completely preserved in directive JSON structure. This means that while you creating a complex chart that containing multiple elementary chart models (such as line, bar, axis, ...), you can in turn customize the properties of each internal elementary models as well as the global charting properties the way you want. This can be done as usual, but it becomes quite easily to customize while applying JSON approach to.

Examples

  • D3.js Reusable Bar Chart with Angularjs
    Christophe Viau (biovisualize / @d3visualization) example of a D3.js Reusable Bar Chart with Angularjs

  • D3.js Angular Directives
    Some of the Graphs and Charts with d3.js and Angular Directives - Integrated at Phloxblog.in. Examples include: Area chart, line chart, bivariate area chart, multi-series line chart, stacked area chart, bar chart, stacked bar chart, normalized stacked bar chart, grouped bar chart, scatterplot, donut chart, pie chart, donut multiples and bar chart with negative values.
D3.js Meetups
A List Of D3.js Meetups Around The World
Brazil Canada New Zealand United States
D3 Books
A List Of D3 Books



Data Visualization with D3.js Cookbook



Interactive Data Visualization for the Web



Getting Started with D3



D3 Tips and Tricks: Interactive Data Visualization in a Web Browser



Developing a D3.js Edge



Data Visualization with d3.js
Data Visualization Books
A List Of Data Visualization Books



Visualizing Data: Exploring and Explaining Data with the Processing Environment



The Visual Display of Quantitative Information



Designing Data Visualizations: Representing Informational Relationships



Information Visualization, Third Edition: Perception for Design (Interactive Technologies)



Beautiful Visualization: Looking at Data through the Eyes of Experts (Theory in Practice)
Data Mining Books
A List Of Data Mining Books



Mining of Massive Datasets



Data-Intensive Text Processing with MapReduce



Data Mining with R: Learning with Case Studies