D3.js 4.x Data Visualization - Third Edition

D3.js 4.x Data Visualization - Third Edition

by Ændrew Rininsland, Swizec Teller
Released April 2017
Publisher(s): Packt Publishing
ISBN: 9781787120358

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

Create and publish your own interactive and compelling data visualizations with D3.js 4.x

About This Book

  • Build interactive and rich graphics and visualization using JavaScript`s powerful library D3.js

  • Learn D3 from the ground up, using the all-new version 4 of the library

  • Gain insight into producing high-quality, extensible charts and visualizations using best practices such as writing testable, extensible code and strong typing

    • Who This Book Is For

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

    What You Will Learn

  • Map data to visual elements using D3's scales

  • Draw SVG elements using D3's shape generators

  • Transform data using D3's collection methods

  • Use D3's various layout patterns to quickly generate various common types of chart

  • Write modern JavaScript using ES2017 and Babel

  • Explore the basics of unit testing D3 visualizations using Mocha and Chai

  • Write and deploy a simple Node.js web service to render charts via HTML Canvas

  • Understand what makes a good data visualization and how to use the tools at your disposal to create accurate charts

    • In Detail

    Want to get started with impressive interactive visualizations and implement them in your daily tasks? This book offers the perfect solution-D3.js. It has emerged as the most popular tool for data visualization.

    This book will teach you how to implement the features of the latest version of D3 while writing JavaScript using the newest tools and technique

    You will start by setting up the D3 environment and making your first basic bar chart. You will then build stunning SVG and Canvas-based data visualizations while writing testable, extensible code,as accurate and informative as it is visually stimulating. Step-by-step examples walk you through creating, integrating, and debugging different types of visualization and will have you building basic visualizations (such as bar, line, and scatter graphs) in no time.

    By the end of this book, you will have mastered the techniques necessary to successfully visualize data and will be ready to use D3 to transform any data into an engaging and sophisticated visualization.

    Style and approach

    This book follows a tutorial-based approach in teaching the world's most powerful data visualization library, D3.

    Table of contents

    1. 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
    2. Getting Started with D3, ES2017, and Node.js
      1. What is D3.js?
        1. What happened to all the classes?
      2. What's new in D3 v4?
      3. What's ES2017?
      4. Getting started with Node and Git on the command line
      5. A quick Chrome Developer Tools primer
      6. The obligatory bar chart example
        1. Loading in data
        2. Twelve (give or take a few) bar blues
      7. Summary
    3. A Primer on DOM, SVG, and CSS
      1. DOM
        1. Manipulating the DOM with d3-selection
        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
      4. CSS
      5. Summary
    4. Shape Primitives of D3
      1. Using paths
        1. Line
        2. Area
        3. Arc
        4. Symbol
        5. Chord/Ribbon
      2. Axes
      3. Summary
    5. Making Data Useful
      1. Thinking about data functionally
        1. Built-in array functions
        2. Data functions of D3
        3. Managing objects with d3-collection
          1. What about ES6 Maps and Sets?
      2. Scales
        1. Ordinal scales
        2. Quantitative scales
        3. Continuous range scales
        4. Discrete range scales
        5. Time
          1. Formatting
          2. Time arithmetic
      3. Loading data
        1. The core
      4. Flow control
        1. Promises
        2. Generators
        3. Observables
      5. Geography
        1. Getting geodata
        2. Drawing geographically
        3. Using geography as a base
      6. Summary
    6. Defining the User Experience - Animation and Interaction
      1. Animation
        1. Animation with transitions
          1. Interpolators
          2. Easing
          3. Timers
        2. Putting it all together - sequencing animations
      2. Interacting with the user
        1. Basic interaction
      3. Behaviors
        1. Drag
        2. Brushes
        3. Zoom
        4. Do you even need interaction?
      4. Summary
    7. Hierarchical Layouts of D3
      1. What are layouts and why should you care?
        1. Built-in layouts
      2. Hierarchical layouts
      3. Tree the whales!
      4. Muster the cluster!
      5. Money for nothing, treemaps for free (maps)
      6. Smitten with partition
      7. Pack it up, pack it in, let me begin...
      8. Bonus chart! Sunburst radial partition joy!
      9. Summary
    8. The Other Layouts
      1. Hoorah for modular code
      2. When the moon hits your eye (chart), like a big pizza pie (chart)
      3. Histograms, Herstograms, Yourstograms, and Mystograms
      4. Striking a chord
      5. May the force (simulation) be with you
      6. Got mad stacks
      7. Bonus chart - Streamalicious!
      8. Summary
    9. D3 on the Server with Canvas, Koa 2, and Node.js
      1. Readying the environment
      2. All aboard the Koa train to servertown!
      3. Proximity detection and the Voronoi geom
      4. Rendering in Canvas on the server
      5. Deploying to Heroku
      6. Summary
    10. Having Confidence in Your Visualizations
      1. Linting everything!
      2. Static type checking: TypeScript versus Tern.js
        1. Code analysis with Tern.js
        2. TypeScript - D3 powertools
      3. Behavior-driven development with Mocha and Chai
        1. Setting up your project with Mocha
        2. Testing behaviors - BDD with Mocha
      4. Summary
    11. Designing Good Data Visualizations
      1. Choosing the right dimensions, choosing the right chart
      2. Clarity, honesty, and a sense of purpose
      3. Helping your audience understand scale
      4. Using color effectively
      5. Understanding your audience
        1. Some principles for designing for mobile and desktop
          1. Columns are for desktops, rows are for mobiles
          2. Be sparing with animations on mobiles
          3. Realizing similar UI elements react differently between platforms
          4. Avoiding mystery meat navigation
          5. Be wary of the scroll
      6. Summary

    Product information

    • Title: D3.js 4.x Data Visualization - Third Edition
    • Author(s): Ændrew Rininsland, Swizec Teller
    • Release date: April 2017
    • Publisher(s): Packt Publishing
    • ISBN: 9781787120358