Data Visualization with D3.js Cookbook电子书

Data Visualization with D3.js Cookbook

Table of Contents

Data Visualization with D3.js Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

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

1. Getting Started with D3.js

Introduction

Setting up a simple D3 development environment

Getting Ready

How to do it...

How it works...

There's more...

How to get source code

Setting up an NPM-based development environment

Getting Ready

How to do it...

How it works...

There's more...

Setup a local HTTP server

Python Simple HTTP Server

Node.js HTTP Server

Understanding D3-style JavaScript

Getting ready

How to do it...

How it works...

Functions are objects

Static variable scoping

Variable-parameter function

Function chaining

There's more...

Finding and sharing code

How to get help

2. Be Selective

Introduction

Selecting a single element

Getting ready

How to do it...

How it works...

Selecting multiple elements

Getting ready

How to do it...

How it works...

Iterating through a selection

Getting ready

How to do it...

How it works...

Performing subselection

Getting ready

How to do it...

How it works...

Function chaining

Getting ready

How to do it...

How it works...

Manipulating the raw selection

Getting ready

How to do it...

How it works...

3. Dealing with Data

Introduction

The enter-update-exit pattern

Binding an array as data

Getting Ready

How to do it...

How it works...

Binding object literals as data

Getting Ready

How to do it...

How it works...

Binding functions as data

Getting Ready

How to do it...

How it works...

Working with arrays

Getting Ready

How to do it...

How it works...

Filtering with data

Getting Ready

How to do it...

How it works...

Sorting with data

Getting Ready

How to do it...

How it works...

Loading data from a server

Getting Ready

How to do it...

How it works...

4. Tipping the Scales

Introduction

What are scales?

Using quantitative scales

Getting Ready

How to do it...

How it works...

There's more...

Using the time scale

Getting Ready

How to do it...

How it works...

There's more...

See also

Using the ordinal scale

Getting Ready

How to do it...

How it works...

Interpolating a string

Interpolator

Getting Ready

How to do it...

How it works...

There's more...

Interpolating colors

Getting Ready

How to do it...

How it works...

See also

Interpolating compound objects

Getting Ready

How to do it...

How it works...

Implementing a custom interpolator

Getting Ready

How to do it...

How it works...

See also

5. Playing with Axes

Introduction

Working with basic axes

Getting Ready

How to do it...

How it works...

Customizing ticks

Getting Ready

How to do it...

How it works...

Drawing grid lines

Getting Ready

How to do it...

How it works...

Dynamic rescaling of axes

Getting Ready

How to do it...

How it works...

6. Transition with Style

Introduction

What is Transition?

Animating a single element

Getting Ready

How to do it...

How it works...

Animating multiple elements

Getting Ready

How to do it...

How it works...

Using ease

Getting Ready

How to do it...

How it works...

Using tweening

Getting Ready

How to do it...

How it works...

There's more...

Using transition chaining

Getting Ready

How to do it...

How it works...

Using transition filter

Getting Ready

How to do it...

How it works...

See also

Listening to transitional events

Getting Ready

How to do it...

How it works...

Implementing a custom interpolator

Getting Ready

How to do it...

How it works...

Working with timer

Getting Ready

How to do it...

How it works...

See also

7. Getting into Shape

Introduction

What is SVG?

Vector

Scalability

Creating simple shapes

Getting Ready

How to do it...

How it works...

There's more...

D3 SVG shape generators

See also

Using a line generator

Getting Ready

How to do it...

How it works...

See also

Using line interpolation

Getting Ready

How to do it...

How it works...

Changing line tension

Getting Ready

How to do it...

How it works...

Using an area generator

Getting Ready

How to do it...

How it works...

Using area interpolation

Getting Ready

How to do it...

How it works...

There's more...

See also

Using an arc generator

Getting Ready

How to do it...

How it works...

Implementing arc transition

Getting Ready

How to do it...

How it works...

There's more...

See also

8. Chart Them Up

Introduction

Creating a line chart

Getting ready

How to do it...

How it works...

Creating an area chart

Getting ready

How to do it...

How it works...

Creating a scatter plot chart

Getting ready

How to do it...

How it works...

Creating a bubble chart

Getting ready

How to do it...

How it works...

Creating a bar chart

Getting ready

How to do it...

How it works...

See also

9. Lay Them Out

Introduction

Building a pie chart

Getting ready

How to do it...

How it works...

There's more...

See also

Building a stacked area chart

Getting ready

How to do it...

How it works...

There's more...

Expanded area chart

Streamgraph

See also

Building a treemap

Getting ready

How to do it...

How it works...

See also

Building a tree

Getting ready

How to do it...

How it works...

See also

Building an enclosure diagram

Getting ready

How to do it...

How it works...

See also

10. Interacting with your Visualization

Introduction

Interacting with mouse events

Getting ready

How to do it...

How it works...

There's more...

See also

Interacting with a multi-touch device

Getting ready

How to do it...

How it works...

There's more...

See also

Implementing zoom and pan behavior

Getting ready

How to do it...

How it works...

There's more...

See also

Implementing drag behavior

Getting ready

How to do it...

How it works...

There's more...

See also

11. Using Force

Introduction

Using gravity and charge

Getting ready

How to do it...

How it works...

Charge

Gravity

Friction

Setting up zero force layout

Setting up mutual repulsion

Setting up mutual attraction

Setting up gravity

Using gravity with repulsion

See also

Generating momentum

Getting ready

How to do it...

How it works...

See also

Setting the link constraint

Getting ready

How to do it...

How it works...

See also

Using force to assist visualization

Getting ready

How to do it...

How it works...

See also

Manipulating force

Getting ready

How to do it...

How it works...

See also

Building a force-directed graph

Getting ready

How to do it...

How it works...

See also

12. Know your Map

Introduction

Projecting the US map

GeoJSON

TopoJSON

Getting ready

How to do it...

How it works...

See also

Projecting the world map

Getting ready

How to do it...

How it works...

See also

Building a choropleth map

Getting ready

How to do it...

How it works...

See also

13. Test Drive your Visualization

Introduction

Introduction to unit testing

Getting Jasmine and setting up the test environment

Getting ready

How to do it...

How it works...

See also

Test driving your visualization – chart creation

How to do it...

How it works...

Test driving your visualization – SVG rendering

How to do it...

How it works...

Test driving your visualization – pixel-perfect bar rendering

How to do it...

How it works...

See also

A. Building Interactive Analytics in Minutes

Introduction

The crossfilter.js library

How to do it...

How it works...

There's more...

See also

Dimensional charting – dc.js

Getting ready

How to do it...

How it works...

There's more...

See also

Index