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

Setting up an AngularJS application

To get started with this chapter, I assume that you feel comfortable with the main concepts of AngularJS: the application structure, controllers, directives, services, dependency injection, and scopes. I will use these concepts without introducing them in great detail, so if you do not know about one of these topics, first try an intermediate AngularJS tutorial or read the recommended literature in Chapter 1, The Magic of SVG, D3.js, and AngularJS.

Organizing the directory

To begin with, we will create a simple AngularJS boilerplate for the examples and the visualization application. We will use this boilerplate during the development of the sample application throughout the book. Let's create a project root directory that contains the following files and folders:

  • bower_components/: This directory contains all third-party components
  • src/: This directory contains all source files
  • src/app.js: This file contains source of the application
  • src/app.css: CSS...
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