You are previewing Learning d3.js Data Visualization - Second Edition.
O'Reilly logo
Learning d3.js Data Visualization - Second Edition

Book Description

Inject new life into your data by creating compelling visualizations with d3.js

About This Book

  • Understand how to best represent your data by developing the right kind of visualization

  • Harness the power of D3 by building interactive and real-time data-driven web visualizations

  • This book will provide a strong foundation in designing compelling web visualizations with D3.js

  • Who This Book Is For

    This book is for web developers, data scientists, and anyone interested in representing data through interactive visualizations on the web with D3. Some basic JavaScript knowledge is expected, but no prior experience with data visualization or D3 is required to follow this book.

    What You Will Learn

  • Gain a solid understanding of the common D3 development idioms

  • Be able to input data, transform it, and output it as a visualization

  • Add simple effects and user interactions to a visualization

  • Find out how to write basic D3 code for server using Node.js

  • Automate testing visualizations using Mocha

  • Achieve fluency in ES2015, the most modern version of JavaScript

  • In Detail

    D3 has emerged as one of the leading platforms to develop beautiful, interactive visualizations over the web. We begin by setting up a strong foundation, then build on this foundation book will take you through the entire world of reimagining data using interactive, animated visualizations created in D3.js.

    In addition to covering the various features of D3.js to build a wide range of visualizations, we also focus on the entire process of representing data through visualizations so that developers and those interested in data visualization will get the entire process right.

    We also include chapters that explore a wide range of visualizations through practical use cases. By the end of this book, you will have unlocked the mystery behind successful data visualizations and will be ready to use D3 to transform any data into a more engaging and sophisticated visualization.

    Style and approach

    This book has comprehensive explanation on how to leverage the power of D3.js to create powerful and creative visualizations through step by step instruction

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the code file.

    Table of Contents

    1. Learning d3.js Data Visualization Second Edition
      1. Table of Contents
      2. Learning d3.js Data Visualization Second Edition
      3. Credits
      4. About the Authors
      5. About the Reviewer
        1. eBooks, discount offers, and more
          1. Why subscribe?
      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. Getting Started with D3, ES2016, and Node.js
        1. What is D3.js?
        2. What's ES2016?
          1. Getting started with Node and Git on the command line
          2. A quick Chrome Developer Tools primer
          3. The obligatory bar chart example
        3. Summary
      9. 2. A Primer on DOM, SVG, and CSS
        1. DOM
          1. Manipulating the DOM with D3
          2. Selections
          3. Let's make a table!
        2. What exactly did we do here?
          1. Selections example
          2. Manipulating content
          3. Joining data to selections
          4. An HTML visualization example
        3. Scalable Vector Graphics
          1. Drawing with SVG
          2. Manually adding elements and shapes
            1. Text
            2. Shapes
            3. Transformations
          3. Using paths
            1. Line
            2. Area
            3. Arc
            4. Symbol
            5. Chord
            6. Diagonal
          4. Axes
          5. CSS
          6. Colors
        4. Summary
      10. 3. Making Data Useful
        1. Thinking about data functionally
          1. Built-in array functions
          2. Data functions of D3
        2. Loading data
          1. The core
          2. Convenience functions
        3. Scales
          1. Ordinal scales
          2. Quantitative scales
          3. Continuous range scales
          4. Discrete range scales
          5. Time
            1. Formatting
            2. Time arithmetic
        4. Geography
          1. Getting geodata
          2. Drawing geographically
          3. Using geography as a base
        5. Summary
      11. 4. Defining the User Experience – Animation and Interaction
        1. Animation
        2. Animation with transitions
          1. Interpolators
          2. Easing
          3. Timers
          4. Animation with CSS transitions
        3. Interacting with the user
          1. Basic interaction
        4. Behaviors
          1. Drag
          2. Zoom
          3. Brushes
        5. Summary
      12. 5. Layouts – D3's Black Magic
        1. What are layouts and why should you care?
          1. Built-in layouts
          2. The dataset
        2. Normal layouts
        3. Using the histogram layout
        4. Baking a fresh 'n' delicious pie chart
          1. Labeling your pie chart
        5. Showing popularity through time with stack
          1. Adding tooltips to our streamgraph
        6. Highlighting connections with chord
          1. Drawing with force
        7. Hierarchical layouts
        8. Drawing a tree
        9. Showing clusters
          1. Partitioning a pie
          2. Packing it in
          3. Subdividing with treemap
        10. Summary
      13. 6. D3 on the Server with Node.js
        1. Readying the environment
        2. All aboard the Express train to Server Town!
        3. Proximity detection and the Voronoi geom
        4. Rendering in Canvas on the server
        5. Deploying to Heroku
        6. Summary
      14. 7. Designing Good Data Visualizations
        1. Clarity, honesty, and sense of purpose
        2. Helping your audience understand scale
        3. Using color effectively
        4. Understanding your audience (or "trying not to forget about mobile")
          1. Some principles for designing for mobile and desktop
            1. Columns are for desktops, rows are for mobile
            2. Be sparing with animations on mobile
            3. Realize similar UI elements react differently between platforms
            4. Avoid "mystery meat" navigation
            5. Be wary of the scroll
        5. Summary
      15. 8. Having Confidence in Your Visualizations
        1. Linting all the things
        2. Static type checking with TypeScript and Flow
          1. The new kid on the block – Facebook Flow
          2. TypeScript – the current heavyweight champion
        3. Behavior-driven development with Karma and Mocha Chai
          1. Setting up your project with Mocha and Karma
          2. Testing behaviors first – BDD with Mocha
        4. Summary
      16. Index