Chapter 1. The Magic of SVG, D3.js, and AngularJS

In this book, we will develop an application that combines both frameworks D3.js and AngularJS into a stunning interactive visualization, an interactive dashboard to visualize server logs in real time. First, I will discuss the outline and the purpose of this application. Then, I will explain how to modularize the visualization so that all components can be seamlessly embedded into one single application.

In the second section, we will talk about the terminology and definitions that are used in this book to introduce you to this topic or to refresh your knowledge of some basics in computer graphics. It will help you to understand why we are using vector graphics—especially SVG for the Web—for the visualization that we will develop in this book (and not, for example, Canvas or WebGL).

The next part of the chapter will give an introduction to D3.js and its data-driven approach. It will help you to understand the similarities and fundamental differences of D3.js and other DOM transforming libraries such as jQuery. Then, we will see an introduction to AngularJS and discuss its strengths for modern application development as well as the integration of D3.js into an AngularJS application.

The last section of this chapter will help you to understand why we prefer D3.js over other visualization libraries. It will give a brief outline and comparison of web visualization tools emphasizing on libraries to create and manipulate vector graphics and the evolution of web standards. We will discuss the main ideas and advantages of using D3.js in web applications and the differences between it and other tools for web visualizations (such as Raphaël or Three.js).

In this chapter, you will learn:

• How to distinguish vector and pixel graphics and to know their application areas
• When and why to use vector graphics, especially SVG
• Why D3.js is superior to other common graphical toolkits
• When and why to use D3.js for creating graphical content
• The advantages of integrating D3.js into an AngularJS application
• How to structure and encapsulate a visualization library written in D3.js to use with an AngularJS application