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 : Hanchett, 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: Hanchett, 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
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
chevron up
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

Processing and visualizing logs on the client

In the previous section, you learned how to push the server logs from the server to the client; now, we need to organize these logs on the client, and then process and display them.

Bootstrapping a template with AngularJS and Socket.IO

Let's create a HTML page for our client application; we need to load the JavaScript libraries (D3.js, AngularJS, Socket.IO, the CSS layout Bootstrap, and all application files). Due to the usage of Socket.IO on the server side, it can be referenced on the client side with the /socket.io/socket.io.js pseudo location; all other third-party libraries are loaded from the bower_components directory.

We create the index.html page in the root directory of the project, add all libraries, and set up a very simple Bootstrap layout:

<!-- index.html -->
<html ng-app="myApp">
  <head>
    <!-- Include 3rd party libraries -->
    <script src="bower_components/d3/d3.js" charset="UTF-8"></script&gt...
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 Section 9
Next Section
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