Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Data Visualization with D3 and AngularJS
  • Table Of Contents Toc
Data Visualization with D3 and AngularJS

Data Visualization with D3 and AngularJS

By : Erik Hanchett, Christoph Körner
4.6 (7)
Buy this Book
close
close
Data Visualization with D3 and AngularJS

Data Visualization with D3 and AngularJS

4.6 (7)
By: Erik Hanchett, Christoph Körner
Buy this Book

Overview of this book

If 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.
Table of Contents (11 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. The Magic of SVG, D3.js, and AngularJS
Icon
1. The Magic of SVG, D3.js, and AngularJS
Icon
Building a real-time dashboard to visualize server logs
Icon
Terminology and definitions
Icon
Understanding Data-Driven Documents
Icon
A brief overview of visualization tools for the Web
Icon
Summary
2
2. Getting Started with D3.js
Icon
2. Getting Started with D3.js
Icon
Building a simple scatter plot application
Icon
Creating an HTML template for D3.js
Icon
Selecting and modifying DOM elements
Icon
Binding data to DOM elements
Icon
Creating a simple scatter plot
Icon
Summary
3
3. Manipulating Data
Icon
3. Manipulating Data
Icon
Manipulating datasets in arrays
Icon
Formatting numbers and dates
Icon
Working with scales
Icon
All about axes
Icon
Summary
4
4. Building a Chart Directive
Icon
4. Building a Chart Directive
Icon
Setting up an AngularJS application
Icon
Integrating D3.js into AngularJS
Icon
A chart directive
Icon
Testing the directive
Icon
Summary
5
5. Loading and Parsing Data
chevron up
Icon
5. Loading and Parsing Data
Icon
Loading external data
Icon
$http – the Angular wrapper for XHR
Icon
Parsing log files to JavaScript objects
Icon
Displaying logs
Icon
Summary
6
6. Drawing Curves and Shapes
Icon
6. Drawing Curves and Shapes
Icon
Common shapes and primitives
Icon
Curved lines with the SVG path
Icon
Summary
7
7. Controlling Transitions and Animations
Icon
7. Controlling Transitions and Animations
Icon
Animations
Icon
Easy animations with transitions
Icon
Interpolate anything with tweens
Icon
Realistic animations with easing
Icon
Transitions in charts
Icon
Summary
8
8. Bringing the Chart to Life with Interactions
Icon
8. Bringing the Chart to Life with Interactions
Icon
Listen for events
Icon
Cursors
Icon
Zooming and panning
Icon
Interactive filters
Icon
Advanced filtering using brushes
Icon
Summary
9
9. Building a Real-time Visualization to Monitor Server Logs
Icon
9. Building a Real-time Visualization to Monitor Server Logs
Icon
Building a real-time monitoring server
Icon
Processing and visualizing logs on the client
Icon
Summary
10
Index
Icon
Index

Parsing log files to JavaScript objects

Once we load the string of log entries, we need to parse these entries to an array of data points in order to display them. We want to parse the plain text log file to an array of JavaScript objects.

In this section, I will show you a convenient way to mix all techniques and to retrieve the best of both worlds. We will implement a preprocessing service component. This uses regular expressions to split the text into an array and D3.js to parse time strings to dates.

Parsing log files step by step

Let's look at the structure of the log files again:

66.249.64.121 - - [22/Nov/2014:01:56:00 +0100] "GET /robots.txt HTTP/1.1" 302
507 "-" "Mozilla/5.0 (compatible; Googlebot/2.1;
+http://www.google.com/bot.html)"
66.249.64.129 - - [22/Nov/2014:01:56:01 +0100] "GET / HTTP/1.1" 302 487 "-"
"Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"

From this string, we ultimately want to generate an array of JavaScript objects in the shape of [{ip:...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Data Visualization with D3 and AngularJS
End of Chapter 5
Next Chapter
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon