D3.js 4.x Data Visualization - Third Edition电子书

Title Page

Copyright

Credits

About the Authors

About the Author2

About the Reviewer

www.PacktPub.com

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

Getting Started with D3, ES2017, and Node.js

What is D3.js?

What happened to all the classes?

What's new in D3 v4?

What's ES2017?

Getting started with Node and Git on the command line

A quick Chrome Developer Tools primer

The obligatory bar chart example

Loading in data

Twelve (give or take a few) bar blues

Summary

A Primer on DOM, SVG, and CSS

DOM

Manipulating the DOM with d3-selection

Selections

Let's make a table

What exactly did we do here?

Selections example

Manipulating content

Joining data to selections

An HTML visualization example

Scalable Vector Graphics

Drawing with SVG

Manually adding elements and shapes

Text

Shapes

Transformations

CSS

Summary

Shape Primitives of D3

Using paths

Line

Area

Arc

Symbol

Chord/Ribbon

Axes

Summary

Making Data Useful

Thinking about data functionally

Built-in array functions

Data functions of D3

Managing objects with d3-collection

What about ES6 Maps and Sets?

Scales

Ordinal scales

Quantitative scales

Continuous range scales

Discrete range scales

Time

Formatting

Time arithmetic

Loading data

The core

Flow control

Promises

Generators

Observables

Geography

Getting geodata

Drawing geographically

Using geography as a base

Summary

Defining the User Experience - Animation and Interaction

Animation

Animation with transitions

Interpolators

Easing

Timers

Putting it all together - sequencing animations

Interacting with the user

Basic interaction

Behaviors

Drag

Brushes

Zoom

Do you even need interaction?

Summary

Hierarchical Layouts of D3

What are layouts and why should you care?

Built-in layouts

Hierarchical layouts

Tree the whales!

Muster the cluster!

Money for nothing, treemaps for free (maps)

Smitten with partition

Pack it up, pack it in, let me begin...

Bonus chart! Sunburst radial partition joy!

Summary

The Other Layouts

Hoorah for modular code

When the moon hits your eye (chart), like a big pizza pie (chart)

Histograms, Herstograms, Yourstograms, and Mystograms

Striking a chord

May the force (simulation) be with you

Got mad stacks

Bonus chart - Streamalicious!

Summary

D3 on the Server with Canvas, Koa 2, and Node.js

Readying the environment

All aboard the Koa train to servertown!

Proximity detection and the Voronoi geom

Rendering in Canvas on the server

Deploying to Heroku

Summary

Having Confidence in Your Visualizations

Linting everything!

Static type checking: TypeScript versus Tern.js

Code analysis with Tern.js

TypeScript - D3 powertools

Behavior-driven development with Mocha and Chai

Setting up your project with Mocha

Testing behaviors - BDD with Mocha

Summary

Designing Good Data Visualizations

Choosing the right dimensions, choosing the right chart

Clarity, honesty, and a sense of purpose

Helping your audience understand scale

Using color effectively

Understanding your audience

Some principles for designing for mobile and desktop

Columns are for desktops, rows are for mobiles

Be sparing with animations on mobiles

Realizing similar UI elements react differently between platforms

Avoiding mystery meat navigation

Be wary of the scroll

Summary