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
chevron up
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
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

Integrating D3.js into AngularJS

We bootstrapped a simple AngularJS application in the previous section. Now, the goal is to integrate a D3.js component seamlessly into an AngularJS application—in an Angular way. This means that we have to design the AngularJS application and the visualization component such that the modules are fully encapsulated and reusable. In order to do so, we will use a separation on different levels:

  • Code of different components goes into different files
  • Code of the visualization library goes into a separate module
  • Inside a module, we divide logics into controllers, services, and directives

Using this clear separation allows you to keep files and modules organized and clean. If at anytime we want to replace the D3.js backend with a canvas pixel graphic, we can just implement it without interfering with the main application. This means that we want to use a new module of the visualization component and dependency injection.

These modules enable us to have full...

Visually different images
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 4
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