Learn D3.js: Create interactive data-driven visualizations for the web with the D3.js library

✍ Scribed by Helder da Rocha

• Tongue: English
• Leaves: 640
• Category: Library

✦ Synopsis

Explore the power of D3.js 5 and its integration with web technologies for building rich and interactive data visualization solutions.

This book is a practical hands-on introduction to D3 (Data-driven Documents): the most popular open-source JavaScript library for creating interactive web-based data visualizations. Based entirely on open web standards, D3 provides an integrated collection of tools for efficiently binding data to graphical elements. If you have basic knowledge of HTML, CSS and JavaScript you can use D3.js to create beautiful interactive web-based data visualizations. D3 is not a charting library. It doesn't contain any pre-defined chart types, but can be used to create whatever visual representations of data you can imagine. The goal of this book is to introduce D3 and provide a learning path so that you obtain a solid understanding of its fundamental concepts, learn to use most of its modules and functions, and gain enough experience to create your own D3 visualizations. You will learn how to create bar, line, pie and scatter charts, trees, dendograms, treemaps, circle packs, chord/ribbon diagrams, sankey diagrams, animated network diagrams, and maps using different geographical projections. Fundamental concepts are explained in each chapter and then applied to a larger example in step-by-step tutorials, complete with full code, from hundreds of examples you can download and run. This book covers D3 version 5 and is based on ES2015 JavaScript.

✦ Table of Contents

Cover
Title Page
Copyright and Credits
About Packt
Contributors
Table of Contents
Preface
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
Index