D3 on AngularJS: Create Dynamic Visualizations with AngularJS

D3 on AngularJS: Create Dynamic Visualizations with AngularJS

Ari Lerner, Victor Powell

Language: English

Pages: 144

ISBN: 2:00241765

Format: PDF / Kindle (mobi) / ePub


https://leanpub.com/d3angularjs

D3 is a powerful library for creating data visualizations for the web. With it, you can create compelling visual presentations of your data while writing relatively little code.

In combination with AngularJS, the two can be used to create highly sophiticated, dynamic and interactive data visualizations.

The book covers an introdution to D3, addressing its major concepts and features, as well as how to integrate D3 with AngularJS to make resuable, configurable, and dynamic visualizations. An emphasis is placed on screenshots and live code examples linked to from within the text.

But don't just take our word for it. Have a look at some of the examples the authors have created utilizing the combination of D3 and AngularJS.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

when we integrate with using directives) to not place this directly on the page. We can use d3 to make our svg, like so: 1 2 var svg = d3.select("body") .append("svg"); With the svg variable, we can now reference the element and interact with our D3 stage at any time. It’s possible to use the same methods on the element that we’ll use on the D3 elements to set attributes on it. For instance, let’s set a height and a width: 1 2 3 d3.select('body').append('svg') .attr('width', 300)

segments make up one arc connection. The first arc segment is called the source, the second, the target. Each arc segment is described by a radius, a startAngle and an endAngle. Conveniently, d3.layout.chord() can be used to take relational information in the form of a matrix and produce the necessary default chord layout that d3.svg.chord expects. For example, here’s an arbitrary relational data set. Every cell describes the relationship among of two items (in our example, the items A B C and

array of key-value based objects with two keys of key and value. This is useful for picking out certain objects inside of a map. 1 2 3 4 var m = d3.map({x: 1}) m.set("y", 2); m.entries(); // [{key:"x", value:1}, {key:"y",value:2}] map.forEach() Finally, we can iterate over every entry in the map by using the map.forEach() function. This takes a single argument of a function that will be called for every single entry in the map. This function will be called with two arguments, the key and the

about the change. The scope is checked for changes when call $scope.$apply(). Lastly, we need to wire up the directive to our MainCtrl’s scope and change back our directive to have a data scope property that watches for changes and updates the visualization accordingly. 1 Getting data into and out of directives 1 2 3 128 scope.$watch('data', function(data){ // (update/add/remove the `` elements for each of the pie arcs) }, true); And just like

Panda eyes Live version: http://jsbin.com/ahOZAtEj/1/edit²⁸ In order to actually place any SVG elements in our DOM, we’ll need to put them inside a parent element. A new SVG element is easy to make, like so: 1 The element above is simply a DOM element, just like a

element. Just like any other HTML element, it will take as much room as it possibly can take unless we specify the dimensions. ²⁸http://jsbin.com/ahOZAtEj/1/edit 25 SVG

Download sample

Download