Cover

Copyright

Credits

About the Author

About the Reviewer

www.PacktPub.com

Customer Feedback

Table of Contents

Preface

Chapter 1: Getting Started with D3

What is D3?

Setup of this book

Installing an editor

Getting the sources and setting up a web server

Setting up the local web server

Basic HTML template

How does D3 work?

Creating a group element

Adding rectangles to the group element

Creating dummy data

Binding the data and updating existing rectangles

Adding new rectangles if needed

Removing elements which aren't needed anymore

Visualizing our first data

Sanitizing and getting the data

Creating the visualization

Loading CSV data with D3

Grouping the loaded data so we only have the top 10 names for both sexes

Adding group elements

Adding the bar chart and baby name

Adding some CSS classes to style the bars and text elements

Adding the axis on the top and bottom

Summary

Chapter 2: Basic Charts and Shapes

How long have American firms been in business visualized with pies and donuts

Get and cleanup the data

Creating the donut

Loading the data

Adding the dropdown

Standard setup, helper objects, and a gray donut

Color interpolation and color schemes

Create the background donut

Individual donut segments

Adding text legends

Add the lines from the donut to the text

Making the donut respond to mouse events

Line charts that show income growth

Loading the data and setting up D3 scales

Adding the index line and area gradients

Adding the income line

Adding the axes

Adding an x-axis with years

Adding a y-axis with absolute income

Adding the y-axis with the index values and the horizontal marker lines

Tracking the mouse

Population growth estimates using a stacked graph

Getting and sanitizing the data

Creating the stacked area chart

Creating the stacked bar chart

Summary

Chapter 3: Working with Hierarchical Data

Tree-based visualizations

Getting and sanitizing the data

Normal tree

Converting data into a hierarchical data structure

Using D3 build-in functionality to create a tree

Drawing the tree elements

Adding panning and zooming to the visualization

Radial tree

Loading the data

Setting up a color scale

Rendering the lines, nodes, and text elements

Adding the animations

Animating the treemap on initial load

Animating hiding a node

Treemap and partition

Loading the country data

Setting up coloring and draw a legend

Drawing and animating the rectangles

Add the text elements

Setting up the popup

Adding the click event listener to switch the value shown

Alternative visualizations using partition and pack layouts

Data visualized using a partition layout

Data visualized using a pack layout

Summary

Chapter 4: Visualizing Graphs

Force layout

Getting the raw Simpsons data

Getting the relevant information from the database

Converting the data from the database

Creating the force layout

Loading the fonts, setting up the title, and loading the Simpsons logo

Setting up the force simulation

Loading the data and drawing the circles and the lines

Running the simulation

Adding images to the circles for the characters

Adding a mouseover effect for selecting and dragging.

Bubble chart

Getting the data

Create the bubble chart

Loading and preparing the data

Setting up the simulation

Adding the nodes and running the simulation

Adding the legend

Adding interactivity

Chord diagram

Preparing the data

Loading and converting the data in D3

Create a chord diagram from the data

Adding a mouseover effect

Matrix diagram

Setting up the data and the standard D3 components

Filling the matrix with data

Drawing the visualization

Add mouse handlers

Summary

Chapter 5: Working with Geo Data

Elections 2016 choropleth

Preparing data

Getting the geometries from the US Census Bureau and exploring these in QGIS

Converting the data to TopoJSON

Getting the results per county

Drawing the visualization

Earthquake data on a flat map

Getting the data

Create the visualization

Loading the data

Rendering the map

Rendering the earthquake circles

Connect the html elements

Fix clipping

Rotating the world globe

Getting and sanitize the data

Render the visualization

Render the globe on a HTML canvas

Setting up the HTML page and the output elements

Loading the data and drawing the map

Handle the drag event

Render the legend

Summary

Chapter 6: Visualizing Streaming Data

Simple streaming line

Setting up scales

Collecting mouse data

Setting up the animations and the graphs

Clip path and extra information

Heart rate and respiratory monitoring

Getting the sample data

Setting up the WebSocket server

Creating the visualization

Scales, lines, and array initialization

Loading the images and setting up the WebSocket connection

Handling the update from the server

Random data-driven streamgraph

Random data WebSocket server

Creating a streamgraph

Setting up the scales and the generators

Defining the data and the transition

Visualizing Meetup.com RSVP data on a map

Drawing the map

Connecting to the Meetup WebSocket

Showing the information on the map

Summary

Chapter 7: Voronoi Diagrams and Heatmaps

Simple Voronoi diagram

Voronoi based on a list of airports

Prepare the data

Show the points on the map

Create the geo Voronoi

Generative art with nested Voronoi diagrams

Set up the Voronoi

Render the first layer

Recursively creating Voronoi diagrams

Heatmap showing swearword usage in movies

Preparing the data

Rendering the heatmap

Create the heatmap

Add the minutes information

Provide the legend

Summary

Chapter 8: Custom Shapes and Paths and Using a Brush Selection

Symbols supported in D3

Using d3.path to draw paths

Drawing using the path API

Animating along a line

Exporting visualizations

Exporting visualizations as PNG

Custom export styles

Converting the SVG element to a string

Using the canvas to get a PNG file

Saving the image

Exporting visualizations as SVG and importing them in an external program

Importing SVG from Inkscape and use in D3

Using brushes to select elements

Summary

Chapter 9: ES6, TypeScript, and External D3.js Libraries

Using D3 with ES6 and TypeScript

D3 and ES6

Importing modules

Arrow functions and method shorthand

Block-scoped binding constructs (let + const)

String interpolation

D3 and TypeScript

Using types in your editor

Preventing errors with compile-time checking of types

Handling complex type signatures

Creating classes is easy

External charting libraries

Dimple.js

MetricsGraphics.js

C3

nvd3

Summary

Index