Data Visualization with D3 and AngularJS

Build dynamic and interactive visualizations from real-world data with D3 on AngularJS

Data Visualization with D3 and AngularJS

This ebook is included in a Mapt subscription
Christoph Körner

1 customer reviews
Build dynamic and interactive visualizations from real-world data with D3 on AngularJS
$10.00
$44.99
RRP $35.99
RRP $44.99
eBook
Print + eBook
Access every Packt eBook & Video for just $100
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Find Out More
 
Preview in Mapt

Book Details

ISBN 139781784398484
Paperback278 pages

Book Description

Using D3.js, the powerful JavaScript toolkit for creating cross-platform vector graphics, you can now combine performance with maximum compatibility to build a web-based visualization and present data in an interactive and convenient way. We'll reach top-notch reusability and testability by combining D3 graphics with our favorite web application framework, AngularJS.

This book teaches the basics of vector graphics, D3, and AngularJS integration, and then dives into controlling, manipulating, and filtering data. You will learn about the testability of components and how to implement custom interactions, filters, and controllers; discover how to parse and map data in D3.js; and get a grasp on drawing D3.js built-in shapes and curves. After reading the last few chapters, you'll be able to bring life to your visualizations with more features of D3.js such as interactions, animations, and transitions. You will finish your journey by implementing a parser for different server application logs and display them on a Google Analytics style interactive dashboard.

Table of Contents

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

What You Will Learn

  • Design, implement, and integrate an interactive dashboard to visualize server logs in real time using D3 graphics
  • Learn cross-platform vector graphics to implement a dashboard visualization
  • Perform data-driven transformations on selected HTML and SVG nodes
  • Map, group, and filter datasets and create scales and axes
  • Modularize data visualization information into reusable components to seamlessly integrate them into an AngularJS application
  • Load, parse, and preprocess external data and autoupdate the visualization
  • Design various chart types such as scatter, line, bar, or area and extend built-in shapes
  • Create custom animations and transitions for the visualization
  • Implement interactions and controls for the visualization preserving two-way binding between D3 and AngularJS components

Authors

Table of Contents

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

Book Details

ISBN 139781784398484
Paperback278 pages
Read More
From 1 reviews

Read More Reviews