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

Animations

In data visualizations, animations are a way to visualize changes in the dataset, which makes it much easier to see, understand, and follow the data changes. An animation usually consists of timed key frames that represent these changes over time in the visualization. Now, we will go through an animation step by step and see the different things that need to be considered when creating a custom animation.

Let's look at a simple example. In the following figure, we can see an animation built by six key frames to create an illusion of a color transition from blue to red:

Animation with 6 key frames

Timer in D3.js with d3.timer

To implement this animation, D3.js provides an efficient and smart timer queue. This lets you run multiple concurrent timers. To create a timer, we can simply call the d3.timer(tickFn[, delay[, time]]) function. The delay and time arguments let you schedule the start of the timer after a certain delay of milliseconds or at a specific point in time.

The first argument...

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