Data Visualization with D3 4.x Cookbook - Second Edition

Data Visualization with D3 4.x Cookbook - Second Edition

by Nick Zhu
Released February 2017
Publisher(s): Packt Publishing
ISBN: 9781786468253

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

Discover over 65 recipes to help you create breathtaking data visualizations using the latest features of D3

About This Book

  • Learn about D3 4.0 from the inside out and master its new features

  • Utilize D3 packages to generate graphs, manipulate data, and create beautiful presentations

  • Solve real-world visualization problems with the help of practical recipes

    • Who This Book Is For

    If you are a developer familiar with HTML, CSS, and JavaScript, and you wish to get the most out of D3, then this book is for you. This book can serve as a desktop quick-reference guide for experienced data visualization developers. You'll also find this book useful if you're a D3 user who wants to take advantage of the new features introduced in D3 4.0. You should have previous experience with D3.

    What You Will Learn

  • Get a solid understanding of the D3 fundamentals and idioms

  • Use D3 to load, manipulate, and map data to any kind of visual representation on the web

  • Create data-driven dynamic visualizations that update as the data does

  • Leverage the various modules provided by D3 to create sophisticated, dynamic, and interactive charts and graphics

  • Create data-driven transitions and animations within your visualizations

  • Understand and leverage more advanced concepts such as force, touch, and Geo data visualizations

    • In Detail

    This book gives you all the guidance you need to start creating modern data visualizations with D3 4.x that take advantage of the latest capabilities of JavaScript.

    The book starts with the basic D3 structure and building blocks and quickly moves on to writing idiomatic D3-style JavaScript code. You will learn how to work with selection to target certain visual elements on the page, then you will see techniques to represent data both in programming constructs and its visual metaphor. You will learn how map values in your data domain to the visual domain using scales, and use the various shape functions supported by D3 to create SVG shapes in visualizations.

    Moving on, you'll see how to use and customize various D3 axes and master transition to add bells and whistles to otherwise dry visualizations. You'll also learn to work with charts, hierarchy, graphs, and build interactive visualizations. Next you'll work with Force, which is one of the most awe-inspiring techniques you can add to your visualizations, and you'll implement a fully functional Choropleth map (a special purpose colored map) in D3.

    Finally, you'll learn to unit test data visualization code and test-driven development in a visualization project so you know how to produce high-quality D3 code.

    Style and approach

    This step-by-step guide to mastering data visualizations with D3 will help you create amazing data visualizations with professional efficiency and precision. It is a solution-based guide in which you learn through practical recipes, illustrations, and code samples.

    Publisher resources

    Download Example Code

    Table of contents

    1. Data Visualization with D3 4.x Cookbook - Second Edition
      1. Data Visualization with D3 4.x Cookbook - Second Edition
      2. Credits
      3. About the Author
      4. About the Reviewer
      5. www.PacktPub.com
        1. Why subscribe?
      6. Customer Feedback
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Sections
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Conventions
        6. Reader feedback
        7. 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. Setting up 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. Getter-setter function
            4. Function chaining
          4. There's more...
            1. Finding and sharing code
              1. How to get help
      9. 2. Be Selective
        1. Introduction
          1. Introducing selection
          2. CSS3 selector basics
        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...
        9. Asynchronous data loading using queue
          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 continuous scales
          1. Getting ready
          2. How to do it...
          3. How it works...
            1. Linear scale
            2. Power scale
            3. Log scale
        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...
      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. 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 curve
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See Also
        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 curve
          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...
          4. See also
        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
          1. D3 chart convention
        2. Creating a line chart
          1. Getting ready
          2. How to do it...
          3. How it works...
            1. Chart object and attributes
            2. Chart body frame rendering
            3. Render axes
            4. Render data series
        3. Creating an area chart
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Creating a scatterplot 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. Alpha decay
            2. Velocity decay
            3. Charge
            4. Positioning
            5. Collision
            6. Setting up zero force layout
            7. Setting up mutual repulsion
            8. Setting up gravity
            9. Setting up positioning with gravity
            10. Setting up positioning with repulsion
          4. See also
        3. Customizing velocity
          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. Knowing 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. Getting ready
          2. How to do it...
          3. How it works...
        4. Test driving your visualization - SVG rendering
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Test driving your visualization - pixel-perfect bar rendering
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      21. Appendix. 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

    Product information

    • Title: Data Visualization with D3 4.x Cookbook - Second Edition
    • Author(s): Nick Zhu
    • Release date: February 2017
    • Publisher(s): Packt Publishing
    • ISBN: 9781786468253