Data Visualization with D3 and AngularJS
Description
Book DescriptionIf you are a web developer with experience in AngularJS and want to implement interactive visualizations using D3.js, this book is for you. Knowledge of SVG or D3.js will give you an edge to get the most out of this book.What you will learn
Design, implement, and integrate an interactive dashboard to visualize server logs in real time using D3 graphics
Learn crossplatform vector graphics to implement a dashboard visualization
Perform datadriven transformations on selected HTML and SVG nodes
Map, group, and filter datasets and create scales and axes
Modularize data visualization information into reusable components to seamlessly integrate them into an AngularJS application
Load, parse, and preprocess external data and autoupdate the visualization
Design various chart types such as scatter, line, bar, or area and extend builtin shapes
Create custom animations and transitions for the visualization
Implement interactions and controls for the visualization preserving twoway binding between D3 and AngularJS components
Who this book is forIf you are a web developer with experience in AngularJS and want to implement interactive visualizations using D3.js, this book is for you. Knowledge of SVG or D3.js will give you an edge to get the most out of this book.
All prices
More details
Other editions
Additional editions
Person
Erik Hanchett is a software developer, blogger, and perpetual student who has been writing code for over 10 years. He currently resides in Reno Nevada, with his wife and two kids. He blogs about software development at ProgramWithErik.com. I would like to thank my wife Susan for helping me stay motivated. My friend F.B. Woods for all his help on the English language and Dr. Bret Simmons for teaching me the value of a personal brand. I would also like to thank all my friends and family that encouraged me along the way.Koerner Christoph :
Christoph Koerner previously worked as a cloud solution architect for Microsoft, specializing in Azure-based big data and machine learning solutions, where he was responsible for designing end-to-end machine learning and data science platforms. He currently works for a large cloud provider on highly scalable distributed in-memory database services. Christoph has authored four books: Deep Learning in the Browser for Bleeding Edge Press, as well as Mastering Azure Machine Learning (first edition), Learning Responsive Data Visualization, and Data Visualization with D3 and AngularJS for Packt Publishing.
Content
Introduction
Getting started with D3.js
Manipulating Data in D3.js
Building a Chart Directive
Loading and Parsing Data in a Service
Drawing Curves and Shapes
Controlling Transitions and Animations
Bring the chart to life with Interactions
Build a real-time visualization to monitor server logs
Terminology and definitions
Let's start from the beginning. In the following chapters, we will discuss computer graphics and visualizations for the Web. Therefore, it's important to understand the basic terminology of this domain. In this section, I will refresh your knowledge of the two most common image representations (vector and pixel graphics). I will also discuss the web standards that are relevant for graphical applications (DOM, SVG, and so on). If these definitions are not new for you, then nothing can stop you from jumping directly to the next section.
Document Object Model
The Document Object Model (DOM) is the tree representation of the hierarchical elements of an HTML document and it was specified by the World Wide Web Consortium (W3C). These elements in the DOM are called nodes (for example, html, head, body, and so on), which can have attributes (for example, class="header") and content (for example, "My Application" is the content of the h1 node). The DOM provides a public JavaScript interface with which we can access nodes and manipulate them.
Let's look at the source code of a simple HTML page to see an example of the DOM tree:
<html> <head> <title>My App</title> </head> <body> <h1 class="header>My Application</h1> <p class="content"> Lorem ipsum dolor sit amet, ... </body> </html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Developers often visualize the DOM tree and its hierarchical elements by indenting the HTML code properly. The DOM tree of the previous example can also be displayed and modified with the developer tools of a modern browser. See the following screenshot:
DOM tree in Chrome developer tools
Vector graphics and Scalable Vector Graphics
A vector graphic is an image represented solely by the geometric primitives (shape) and attributes (size, margins, appearance, and so on) of its containing elements. These elements can be primitive shapes (such as lines, circles, triangles, and so on) or complex shapes that are composed by these primitives. All elements are included in the graphic; therefore, the whole graphic can be described by implicit mathematical expressions. Thus, the size of a vector graphic is only dependent on the number and complexity of the elements in the image and not on the resolution in which it will be displayed.
Note
Rule of thumb for vector graphics
The more the elements in the image, the higher the cost to draw or update the graphic, but in general, the costs do not depend on the resolution of the generated image (lossless rescaling).
Let's look at a simple example. An image of a circle can be fully described by the shape of a circle with the coordinates of its center point and radius. In all modern browsers, we can generate a vector graphic by embedding Scalable Vector Graphics (SVG), a web standard for vector graphics specified by the W3C directly in the DOM, as follows:
<html> ... <body> <svg id="vis" width="640" height="480"> <circle cx="25" cy="25" r="20" style="fill:red;"> </svg> </body> </html>All containing elements of a vector graphic are usually stored in a scene graph, a tree representation of the hierarchical elements of the graphic. This concept is very similar to the DOM tree, and in the case of SVG, the scene graph is directly embedded in the DOM tree. We can see this in the previous example (by looking at the svg node) that contains the circle element.
As we mentioned previously, we can also use JavaScript to generate or modify SVGs. Let's use the partially complete helper function that generates and draws SVG nodes. Don't worry about the details of this function; just imagine that it will create a vector graphic element (you can look it up in the source code of this chapter if you are brave enough):
<script type="text/javascript"> function VectorGraphic(parent, tag, attrs) { var el = document.createElementNS('http://www.w3.org/2000/svg', tag); ... return { on: function(event, handler){...}, fill: function(color){...}, stroke: function(color){...}, draw: function() { parent.appendChild(el); } } } </script>The preceding function creates a new SVG node and returns a .draw() method. It appends this new element to the parent container. Additionally, it provides methods to style the layout of the new element. Let's use this function to create the same circle from the previous example from within JavaScript:
The preceding code will generate the same circle as before with the center point at the coordinates 25, 25 and a radius of 20. The following figure shows the result of the graphic in the browser, where the left-hand side shows the original image and the right-hand side shows the image after zooming in:
A vector graphic generated in the SVG node (left: normal, right: zoom)
We observe that the circle will always appear in the best resolution no matter how far we zoom into the image. The reason for this is that the vector graphics are recomputed (by the mathematical expressions), redrawn, and rasterized according to the relevant display and zoom factor.
We silently skipped another very important fact of SVGs such that all the elements of the graphic appear in the DOM tree of the SVG node. In our case, we can see in the previous example of the HTML page that the SVG node contains a circle element. This means that the browser also knows about all the elements in the image. Therefore, we can use all built-in capabilities to style and observe these elements. For example, it's possible to attach an event listener with JavaScript to the circle and call event handlers when the user interacts with this element of the graphic. This event handler could look like this:
<script type="text/javascript"> var ctx = document.getElementById('vis'); var circle = VectorGraphic(ctx, 'circle', {cx:25, cy:25, r:20}); circle.fill('red'); circle.on('mouseover', function() { this.stroke('blue'); }); circle.draw(); </script>Vector graphics (particularly generated with SVG) are used in the Web, in general, to draw graphics that contain a moderate number of elements and when interactions and controls (such as zooming, panning, selecting elements, and so on) are desired. Graphics for high performance with a big number of elements would rather use pixel graphics.
Pixel graphics
A pixel graphic (often called as a raster graphic) is an image that is represented solely by the pixels in the graphic. Thus, its size is only dependent on the resolution of the image.
Note
Rule of thumb for pixel graphics
The more the pixels in the image (the higher the resolution of the image), the higher the cost to draw or update the graphic, but in general, the cost does not depend on the number of elements in the generated image.
In general, pixel graphics are rasterized images of a geometric representation. Therefore, an image of a circle can be just as well defined by the shape of a circle with coordinates of its center point and a radius. The description of the circle is exactly the same as for vector graphics, only the ways of storing and displaying the image are different.
Let's write a partially complete JavaScript helper function to generate pixel graphics with the Canvas API. Don't worry about the details of this function; just imagine that it will create a pixel graphic element (you can look it up in the source code of this chapter if you are brave enough):
<script type="text/javascript"> function PixelGraphic(parent, tag, attrs) { var el = parent.getContext('2d'); el.beginPath(); ... return { stroke: function (color){... }, fill: function (color){ ... }, draw: function () { el.arc(attrs.cx, attrs.cy, attrs.r, 0, 2*Math.PI); ... } } } </script>If we generate such a circle with JavaScript, the resulting code looks very similar to the previous vector graphic example:
<script type="text/javascript"> var ctx =...
