Learn D3.js电子书

About Packt

Why subscribe?

Packt.com

Contributors

About the author

About the reviewers

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Reviews

Introduction

D3 data-driven documents

What is D3?

How does it work?

Using D3

Environment setup

Hello, world

Debugging D3

Modules (microlibraries)

Data manipulation

Document manipulation

Interactivity and animation

Colors

Asynchronous operations and packaging

2D geometry

Spherical geometry and geographic maps

Layouts

Summary

References

Technical Fundamentals

Scalable Vector Graphics (SVG)

SVG graphics context (viewport)

Shapes

Fills and strokes

SVG styling with CSS

Transparency

Ellipses

Polygons and polylines

Paths

Text

Group containers

Reusing objects: use and defs

Matrix transforms

Configuring the SVG viewport

Gradients

Clipping

Filters

An SVG example

Essential Javascript data structures

Arrays

Strings

Functions

Objects

Maps and sets

HTML5 Canvas

A Canvas example

Data formats

CSV

XML

JSON

Summary

References

Quick Start

Selecting and binding data

Selecting and appending

Binding data

Creating a bar chart with D3 and HTML

Binding data to HTML

Scales

Array utilities

Adding labels

More labels, formatting, and colors

Changing colors

Loading external files

Creating a bar chart with D3 and SVG

Updating data visualizations

Handling events

Data updates

Smooth transitions

Displaying a map using D3 and SVG

Summary

References

Data Binding

Selections

W3C selectors

Selecting and filtering elements

Joining data

Getting and setting attributes, styles, and content

Modifying the structure of the node tree

Node ordering

Calling functions from a selection

Event handling

Multiple selections

D3 general update pattern

Creating elements

Updating selections

Entering new elements

Merging selections

Exiting unused elements

Data joining

Loading and parsing data

Using delimiter-separated values

Loading files

A complete step-by-step example

What are we going to create?

Setting up the page and view port

Loading data

Configuring scales and filtering data

Drawing the planet

Calculating the position of each moon

Entering the moons

Adding text labels

Changing views

Updating views

Adding new elements and merging selections

Removing extra elements

Using join() for updates

Other improvements

Summary

References

Manipulating Data and Formatting

Manipulating arrays, collections, and objects

Searching and statistics

Sorting

Transforming data

Generating data

Grouping operations

ES2015 replacements for d3-collection

Grouping data with d3.nest()

Nesting configuration

Sorting

Rollup

A step-by-step grouping example

Histograms

Random numbers

Interpolation

Other interpolators

Text formatting and internationalization

Number formatting

Date and time parsing and formatting

Summary

References

Scales, Axes, and Colors

Axes

Configuring ticks

Styling

Cartesian axes

Cartesian grids

Radial axes

Scales

Continuous scales

Linear scale

Exponential scale

Logarithmic scale

Symlog scale

Identity scale

Time scale

Interpolated scales

Sequential scale

Diverging scale

Discrete scales

Quantize scale

Quantile scale

Threshold scale

Ordinal scale

Band scale

Point scale

Color palettes, schemes, and spaces

Color palettes

Categorical color schemes

Color spaces

RGB color space

HSL color space

CIELAB color space

HCL color space

Cubehelix

Other color spaces

Color interpolation

Interpolated color schemes

Creating a scatterplot

Drawing dots on a Cartesian grid

Adding axes and labels

Configuring axis styles

Using a logarithmic scale

Grouping dots by category

Adding interactivity

Creating a bubble chart

Summary

References

Shape and Layout Generators

Shapes and layouts

Lines

Symbols

Curve functions

Areas

Stacked layouts

Radial charts

Radial line

Radial area

Arcs

Pie layout

Canvas rendering

SVG to Canvas and back

Summary

References

Animation and Interactivity

Events

Native DOM events

Mouse events in D3

Custom events and dispatching

Transitions

Transition dynamics

Tweening and text transitions

Easing algorithms

Multiple transitions

Life cycle of a transition and events

Timers

Dragging behavior

Configuration methods

Brushing behavior

Configuration methods

One-dimensional brush

Two-dimensional brush

Zooming behavior

Configuration methods

Interactive zoom

Programmatic zoom

Zoom transforms

Canvas zooming

Semantic zoom

Summary

References

Visualizing Hierarchical Data

Hierarchical data

A standard hierarchical layout

Creating hierarchical structures

Layout generators

Unidirectional node-link diagrams

Trees and dendograms

Path links

Horizontal trees

Using Canvas

Radial trees

Partitions

Icicle charts

Sunburst diagrams

Enclosure diagrams

Circle packing

Treemap

Interactive visualizations

Highlighting a path

Changing the root

Navigating a subtree

Summary

References

Visualizing Flows and Networks

Network visualization

Graphs and data structures

Adjacency matrices

Node-link structures

Adjacency diagrams

Creating a simple adjacency diagram

Chord diagrams

Creating a chord/ribbon diagram

Sankey diagrams

Creating a Sankey diagram

Arc diagrams

Node-link diagrams with force-directed simulations

Creating a force-directed network diagram

Forces

Simulation dynamics

Interactive highlighting

Dragging nodes

Fixing nodes to a position

Adding and removing nodes

Canvas rendering

Zooming in and out

Summary

References

Visualizing Geographical Data

Geographical information systems

GIS data formats

Thematic maps

How to make a thematic map

GeoJSON

Drawing a map with D3

Making a choropleth

Adding tooltips

Adding graticules to a map

Simple SVG zooming and panning

GeoJSON geometries

Primitive geometries

Multipart geometries

Drawing geometries as paths

Drawing points and text

TopoJSON

Obtaining GeoJSON features

Merging geometries

Creating a mesh

Discovering neighbors

Converting GeoJSON to TopoJSON

Graticules, circles and lines

Lines and outlines

Drawing circles

Projections

Types of projections

Choosing a projection

Conformal, equal-area and equidistant projections

Using a projection

Moving, rotating and scaling a projected map

Fitting a projection in a viewport

Rotating the sphere inside a projection

Clipping

Clipping to the sphere

Spherical geometry

Measuring distances

Calculating areas

Centroids and bounds

Interpolation, rotation and containment

Zooming, brushing and rotating

Brushing, or zoom to bounding box

Zoom to object

Rotate and zoom to object

Zooming with drag and rotate

Quaternion dragging and zooming

Inertia

Using Canvas

Summary

References

Other Books You May Enjoy

Leave a review - let other readers know what you think