In the previous chapters, you learned how to create a simple scatter chart directive with D3.js and include it in an AngularJS application. Until now, we just generated random data to plot in charts.

In this chapter, you will learn how to feed the visualization directive with real data. Therefore, we need to load raw data from an external resource, we need to parse it to JavaScript objects, and we need to group the data for the visualization. First, we need to load log files from a remote server. Therefore, we will take a look at different techniques to load data into the AngularJS application: XHR with D3.js and $http with AngularJS. The goal is to understand the advantages and disadvantages of these techniques and to know which data loading module suits the best for the visualization application.

Once we have the raw data in the format of a string on the client, we need to parse and process it in order to feed it into the JavaScript application. This means...