Summary

In this chapter, we discovered the benefits of the powerful combination of SVG, D3.js, and AngularJS. SVG are lossless and rescalable vector graphics that are supported in all modern browsers. All the elements of an image are directly appended to the DOM tree of the HTML page, which makes debugging with the browser's developer tools very comfortable. D3.js is a versatile low-level library for generating interactive graphical content based on the underlying standards (HTML, CSS, and SVG).

In the first section of this chapter, we outlined the sample application that we will develop during this book: a dashboard for interactive real-time visualizations of web server logs and system status.

You learned about the concept of data joins, which differentiates D3.js from other DOM-transformation libraries like jQuery. Developers can not only bind data to a Selection, but also retrieve the enter, update, and exit sets (the intersection of the dataset with a current Selection of DOM elements).

D3.js and AngularJS can live side by side in an application, but we want to integrate the D3.js visualization into the AngularJS application the Angular way. This enhances maintainability, testability, and reusability of all components of an application.

In the next chapter, we will start to develop our first visualization with D3.js. In the first step, you will learn about Selections and transformations and use them to draw circles in SVG. Then, we will apply the concepts of data binding and data joins to draw a simple scatter chart based on an array of data samples.