Data Visualization with D3 and AngularJS

Data Visualization with D3 and AngularJS

by Christoph Körner
Released April 2015
Publisher(s): Packt Publishing
ISBN: 9781784398484

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

In Detail

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.

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

Table of contents

  1. Data Visualization with D3 and AngularJS
    1. Table of Contents
    2. Data Visualization with D3 and AngularJS
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. The Magic of SVG, D3.js, and AngularJS
      1. Building a real-time dashboard to visualize server logs
      2. Terminology and definitions
        1. Document Object Model
        2. Vector graphics and Scalable Vector Graphics
        3. Pixel graphics
      3. Understanding Data-Driven Documents
        1. Why do we use D3.js?
        2. The killer feature – data joins
        3. Finding resources
        4. D3.js meets AngularJS
        5. Testable and maintainable components
        6. Custom directives
        7. Custom filters
        8. Custom loading and parsing service
      4. A brief overview of visualization tools for the Web
        1. Java and Flash
        2. Raphaël (JavaScript – SVG/VML)
        3. Protovis (JavaScript – SVG)
        4. D3.js (JavaScript – HTML/SVG)
        5. Canvas API (JavaScript – Canvas)
        6. Three.js (JavaScript – WebGL)
      5. Summary
    9. 2. Getting Started with D3.js
      1. Building a simple scatter plot application
      2. Creating an HTML template for D3.js
      3. Selecting and modifying DOM elements
        1. A closer look at Selections
          1. selection.attr(name[, value])
          2. selection.style(name[, value[, priority]])
          3. selection.property(name[, value])
          4. selection.text([value])
          5. selection.append(name)
          6. selection.insert(name[, before])
          7. selection.remove()
        2. Finding elements in the DOM with Selectors
          1. d3.select(selector)
          2. d3.select(node)
          3. selection.each(function)
          4. selection.call(function[, arguments…])
      4. Binding data to DOM elements
        1. selection.data(values[, key])
        2. Using dynamic properties in Selections
        3. Tracking changes of data with data joins
          1. selection.enter()
          2. selection.exit()
        4. The update pattern
      5. Creating a simple scatter plot
      6. Summary
    10. 3. Manipulating Data
      1. Manipulating datasets in arrays
        1. Built-in JavaScript array methods
          1. array.filter(callback)
          2. array.map(callback)
          3. array.reduce(callback [, initialValue])
        2. More array manipulation with D3.js
          1. d3.min(array[, accessor])
          2. d3.max(array[, accessor])
          3. d3.sum(array[, accessor])
          4. d3.mean(array[, accessor])
          5. d3.median(array[, accessor])
          6. d3.shuffle(array)
          7. d3.permute(array, indexes)
          8. d3.merge(array)
          9. d3.range([start, ]stop[, step)
          10. d3.zip(array, array, ...)
          11. d3.pairs(array)
          12. d3.keys(object)
          13. d3.values(object)
          14. d3.entries(object)
        3. Grouping elements with d3.nest
      2. Formatting numbers and dates
        1. Specifying a number format
          1. Types of formatting
          2. Precision
          3. Thousands separator
          4. Width
          5. Zero padding
          6. The currency symbol
          7. Signs
          8. The align property
          9. The fill option
        2. Customizing date and time formats
      3. Working with scales
        1. Quantitative scales for continuous data (numbers)
          1. scale.domain([numbers])
          2. scale.range([numbers])
          3. scale.clamp([boolean])
          4. scale.nice([count])
          5. scale.ticks([count])
          6. scale.tickFormat(count [,specifier])
        2. Ordinal scales for discrete data (strings)
          1. scale.rangePoints(interval [, padding])
          2. scale.rangeBands(interval [, padding [, outerPadding ]])
          3. scale.rangeBand()
          4. scale.rangeExtent()
          5. Predefined ordinal color scales
        3. Time scales for time data (date and time)
      4. All about axes
        1. Drawing the axis
        2. Adding axes to the scatter chart
      5. Summary
    11. 4. Building a Chart Directive
      1. Setting up an AngularJS application
        1. Organizing the directory
        2. Installing AngularJS
        3. Bootstrapping the index file
        4. Adding a module and a controller
      2. Integrating D3.js into AngularJS
        1. Organizing the directory
        2. Wrapping D3.js
      3. A chart directive
        1. A directive for SVG
        2. Implementing a custom compile function
        3. Drawing charts
          1. Axis, scale, range, and domain
          2. Joining the data points
        4. Advantages of directives
          1. Generalizing the chart directive
      4. Testing the directive
        1. Setting up the testing environment
          1. Getting started with Karma
          2. Getting started with Protractor
        2. Unit testing the chart directive
        3. E2E testing of the chart directive
      5. Summary
    12. 5. Loading and Parsing Data
      1. Loading external data
        1. XHR – the native XMLHttpRequest
        2. d3.xhr – the XHR wrapper of D3.js
          1. Useful wrappers for common file types
          2. Creating a simple D3 data loading component
        3. Testing the simple D3 data loading component
        4. Summary of D3.js as a data loading service
      2. $http – the Angular wrapper for XHR
        1. Creating an AngularJS data loading component
        2. Testing the AngularJS data loading component
        3. Summary of AngularJS as a data loading service
      3. Parsing log files to JavaScript objects
        1. Parsing log files step by step
        2. Parsing the custom date format to a JavaScript date
        3. A reusable data parsing service
          1. Testing the data parsing service
        4. Grouping log entries
          1. Testing the classifier
      4. Displaying logs
      5. Summary
    13. 6. Drawing Curves and Shapes
      1. Common shapes and primitives
      2. Curved lines with the SVG path
        1. Drawing straight lines
        2. Bézier curves
          1. Drawing ellipses and elliptical arcs
            1. Path generators in D3.js
            2. Generating straight lines
            3. Generate paths for areas
          2. Generating arcs
            1. Different chart types
              1. Implementing line charts
              2. Designing bar charts
      3. Summary
    14. 7. Controlling Transitions and Animations
      1. Animations
        1. Timer in D3.js with d3.timer
        2. Interpolation with D3.js
      2. Easy animations with transitions
        1. Staggered transitions
        2. Chaining transitions
        3. Creating plausible transitions
      3. Interpolate anything with tweens
      4. Realistic animations with easing
      5. Transitions in charts
      6. Summary
    15. 8. Bringing the Chart to Life with Interactions
      1. Listen for events
        1. Type of Events
        2. Getting event coordinates
      2. Cursors
        1. A simple cursor
        2. Snappy cursors
        3. Labeling the cursor position
        4. Customizing events in D3.js
        5. Displaying self-updating cursor values
      3. Zooming and panning
        1. A simple zoom
        2. An x axis zoom
      4. Interactive filters
      5. Advanced filtering using brushes
        1. Creating a simple brush
        2. Building a custom date filter directive
      6. Summary
    16. 9. Building a Real-time Visualization to Monitor Server Logs
      1. Building a real-time monitoring server
        1. Setting up a Node.js application
        2. Setting up a web server that serves static files
        3. Adding server push with WebSockets
        4. Reading logs and pushing them to the client
        5. Watching files for changes
      2. Processing and visualizing logs on the client
        1. Bootstrapping a template with AngularJS and Socket.IO
        2. Using Socket.IO with AngularJS
        3. Processing log files
        4. The dashboard application
      3. Summary
    17. Index

Product information

  • Title: Data Visualization with D3 and AngularJS
  • Author(s): Christoph Körner
  • Release date: April 2015
  • Publisher(s): Packt Publishing
  • ISBN: 9781784398484