D3.js 4.x Data Visualization - Third Edition

图书信息

作者	Ændrew Rininsland
出版社	Packt Publishing
ISBN	9781787128156
出版时间	2017-04-28
字数	35.5万
分类	进口书,外文原版书,电脑,网络

读书简介

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.

目录

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