O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Data Visualization with D3.js Cookbook

Data Visualization with D3.js Cookbook

by Nick Qi Zhu
Publisher: Packt Publishing
Release Date: October 2013
ISBN: 9781782162162
View table of contents
Start reading

Book Description

Turn your digital data into dynamic graphics with this exciting, leading-edge cookbook. Packed with recipes and practical guidance it will quickly make you a proficient user of the D3 JavaScript library.

  • Create stunning data visualization with the power of D3
  • Bootstrap D3 quickly with the help of ready-to-go code samples
  • Solve real-world visualization problems with the help of practical recipes

In Detail

D3.js is a JavaScript library designed to display digital data in dynamic graphical form. It helps you bring data to life using HTML, SVG, and CSS. D3 allows great control over the final visual result, and it is the hottest and most powerful web-based data visualization technology on the market today.

"Data Visualization with D3.js Cookbook" is packed with practical recipes to help you learn every aspect of data visualization with D3.

"Data Visualization with D3.js Cookbook" is designed to provide you with all the guidance you need to get to grips with data visualization with D3. With this book, you will create breathtaking data visualization with professional efficiency and precision with the help of practical recipes, illustrations, and code samples.

"Data Visualization with D3.js Cookbook" starts off by touching upon data visualization and D3 basics before gradually taking you through a number of practical recipes covering a wide range of topics you need to know about D3.

You will learn the fundamental concepts of data visualization, functional JavaScript, and D3 fundamentals including element selection, data binding, animation, and SVG generation. You will also learn how to leverage more advanced techniques such as custom interpolators, custom tweening, timers, the layout manager, force manipulation, and so on. This book also provides a number of pre-built chart recipes with ready-to-go sample code to help you bootstrap quickly.

Table of Contents

  1. Data Visualization with D3.js Cookbook
    1. Table of Contents
    2. Data Visualization with D3.js Cookbook
    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. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started with D3.js
      1. Introduction
      2. Setting up a simple D3 development environment
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. How to get source code
      3. Setting up an NPM-based development environment
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Setup a local HTTP server
            1. Python Simple HTTP Server
            2. Node.js HTTP Server
      4. Understanding D3-style JavaScript
        1. Getting ready
        2. How to do it...
        3. How it works...
          1. Functions are objects
          2. Static variable scoping
          3. Variable-parameter function
          4. Function chaining
        4. There's more...
          1. Finding and sharing code
          2. How to get help
    9. 2. Be Selective
      1. Introduction
      2. Selecting a single element
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Selecting multiple elements
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Iterating through a selection
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Performing subselection
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Function chaining
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Manipulating the raw selection
        1. Getting ready
        2. How to do it...
        3. How it works...
    10. 3. Dealing with Data
      1. Introduction
        1. The enter-update-exit pattern
      2. Binding an array as data
        1. Getting Ready
        2. How to do it...
        3. How it works...
      3. Binding object literals as data
        1. Getting Ready
        2. How to do it...
        3. How it works...
      4. Binding functions as data
        1. Getting Ready
        2. How to do it...
        3. How it works...
      5. Working with arrays
        1. Getting Ready
        2. How to do it...
        3. How it works...
      6. Filtering with data
        1. Getting Ready
        2. How to do it...
        3. How it works...
      7. Sorting with data
        1. Getting Ready
        2. How to do it...
        3. How it works...
      8. Loading data from a server
        1. Getting Ready
        2. How to do it...
        3. How it works...
    11. 4. Tipping the Scales
      1. Introduction
        1. What are scales?
      2. Using quantitative scales
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Using the time scale
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Using the ordinal scale
        1. Getting Ready
        2. How to do it...
        3. How it works...
      5. Interpolating a string
        1. Interpolator
        2. Getting Ready
        3. How to do it...
        4. How it works...
        5. There's more...
      6. Interpolating colors
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. See also
      7. Interpolating compound objects
        1. Getting Ready
        2. How to do it...
        3. How it works...
      8. Implementing a custom interpolator
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. See also
    12. 5. Playing with Axes
      1. Introduction
      2. Working with basic axes
        1. Getting Ready
        2. How to do it...
        3. How it works...
      3. Customizing ticks
        1. Getting Ready
        2. How to do it...
        3. How it works...
      4. Drawing grid lines
        1. Getting Ready
        2. How to do it...
        3. How it works...
      5. Dynamic rescaling of axes
        1. Getting Ready
        2. How to do it...
        3. How it works...
    13. 6. Transition with Style
      1. Introduction
        1. What is Transition?
      2. Animating a single element
        1. Getting Ready
        2. How to do it...
        3. How it works...
      3. Animating multiple elements
        1. Getting Ready
        2. How to do it...
        3. How it works...
      4. Using ease
        1. Getting Ready
        2. How to do it...
        3. How it works...
      5. Using tweening
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Using transition chaining
        1. Getting Ready
        2. How to do it...
        3. How it works...
      7. Using transition filter
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. See also
      8. Listening to transitional events
        1. Getting Ready
        2. How to do it...
        3. How it works...
      9. Implementing a custom interpolator
        1. Getting Ready
        2. How to do it...
        3. How it works...
      10. Working with timer
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. See also
    14. 7. Getting into Shape
      1. Introduction
        1. What is SVG?
          1. Vector
          2. Scalability
      2. Creating simple shapes
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. D3 SVG shape generators
        5. See also
      3. Using a line generator
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. See also
      4. Using line interpolation
        1. Getting Ready
        2. How to do it...
        3. How it works...
      5. Changing line tension
        1. Getting Ready
        2. How to do it...
        3. How it works...
      6. Using an area generator
        1. Getting Ready
        2. How to do it...
        3. How it works...
      7. Using area interpolation
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      8. Using an arc generator
        1. Getting Ready
        2. How to do it...
        3. How it works...
      9. Implementing arc transition
        1. Getting Ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
    15. 8. Chart Them Up
      1. Introduction
      2. Creating a line chart
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Creating an area chart
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Creating a scatter plot chart
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Creating a bubble chart
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Creating a bar chart
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
    16. 9. Lay Them Out
      1. Introduction
      2. Building a pie chart
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Building a stacked area chart
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Expanded area chart
          2. Streamgraph
        5. See also
      4. Building a treemap
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      5. Building a tree
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      6. Building an enclosure diagram
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
    17. 10. Interacting with your Visualization
      1. Introduction
      2. Interacting with mouse events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Interacting with a multi-touch device
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Implementing zoom and pan behavior
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      5. Implementing drag behavior
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
    18. 11. Using Force
      1. Introduction
      2. Using gravity and charge
        1. Getting ready
        2. How to do it...
        3. How it works...
          1. Charge
          2. Gravity
          3. Friction
          4. Setting up zero force layout
          5. Setting up mutual repulsion
          6. Setting up mutual attraction
          7. Setting up gravity
          8. Using gravity with repulsion
        4. See also
      3. Generating momentum
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      4. Setting the link constraint
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      5. Using force to assist visualization
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      6. Manipulating force
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      7. Building a force-directed graph
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
    19. 12. Know your Map
      1. Introduction
      2. Projecting the US map
        1. GeoJSON
          1. TopoJSON
        2. Getting ready
        3. How to do it...
        4. How it works...
        5. See also
      3. Projecting the world map
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      4. Building a choropleth map
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
    20. 13. Test Drive your Visualization
      1. Introduction
        1. Introduction to unit testing
      2. Getting Jasmine and setting up the test environment
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      3. Test driving your visualization – chart creation
        1. How to do it...
        2. How it works...
      4. Test driving your visualization – SVG rendering
        1. How to do it...
        2. How it works...
      5. Test driving your visualization – pixel-perfect bar rendering
        1. How to do it...
        2. How it works...
        3. See also
    21. A. Building Interactive Analytics in Minutes
      1. Introduction
      2. The crossfilter.js library
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      3. Dimensional charting – dc.js
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
    22. Index