Preface

The question of how I could better visualize my application server's log files has always hovered around in my mind. In this book, we'll materialize this idea. After reading the book, you'll be able to analyze the log files of your application server and display them as a time series chart on a web page—a real-time autoupdating chart. I picked my two favorite JavaScript libraries—AngularJS and D3.js—to develop such a visualization.

AngularJS is a web application framework that facilitates the development of modern web applications with concepts such as the MVC/MVVM pattern, two-way data binding, testable modules, and dependency injection. I especially like the idea that one can declare templates to extend the HTML language; this enables a whole new world of applications and the sharing of work between designers and frontend engineers.

D3.js is a visualization toolkit that facilitates the generation and manipulation of web-based vector graphics with full access to the underlying SVG standard. Moreover, animations and interactive visualizations change how users perceive web applications; D3.js offers everything you need to make a visualization interactive out of the box.

In this book, I will teach you how to create an interactive real-time visualization for the Web with AngularJS as the application framework and D3.js as the visualization toolkit. I will explain the basic concepts of D3.js, when and why we use it, and why it's so much better than other DOM-transforming libraries, with a focus on its data-driven approach. Also, I will show you best practices to manipulate datasets and preprocess data—an everyday job if you want to display data from different sources. Then, we will spend more time on seeing how a visualization library can be best integrated into an AngularJS application using modules, directives, and services to make the components testable and maintainable. Later, we will focus on developing the visualization.

First, we need to load real data in the application and parse the text data to a JavaScript array of objects. Then, we need to preprocess and group the data according to the way we want to display it. Now, we can generate a curve or shape in the chart that represents our data. Next, we want to animate this curve—to show a transition between the old and the new state—whenever we update the data of the chart. We also want to zoom and pan inside the charts and create filters in order to clamp the chart to a certain range, for example, a starting time and an ending time for the time series data. Finally, we want to put everything together on to a dashboard and feed it with real server logs of a web server.

Displaying data on the web is a common task for developers. This books walks you through an exciting project, explaining best practices and common pitfalls in this domain using the two most amazing JavaScript libraries: AngularJS and D3.js.