Expert Data Visualization

nvd3

C3

MetricsGraphics.js

Dimple.js

External charting libraries

Creating classes is easy

Handling complex type signatures

Preventing errors with compile-time checking of types

Using types in your editor

D3 and TypeScript

String interpolation

Block-scoped binding constructs (let + const)

Arrow functions and method shorthand

Importing modules

D3 and ES6

Using D3 with ES6 and TypeScript

ES6 TypeScript and External D3.js Libraries

Summary

Using brushes to select elements

Importing SVG from Inkscape and use in D3

Exporting visualizations as SVG and importing them in an external program

Saving the image

Using the canvas to get a PNG file

Converting the SVG element to a string

Custom export styles

Exporting visualizations as PNG

Exporting visualizations

Animating along a line

Drawing using the path API

Using d3.path to draw paths

Symbols supported in D3

Custom Shapes and Paths and Using a Brush Selection

Summary

Provide the legend

Add the minutes information

Create the heatmap

Rendering the heatmap

Preparing the data

Heatmap showing swearword usage in movies

Recursively creating Voronoi diagrams

Render the first layer

Set up the Voronoi

Generative art with nested Voronoi diagrams

Create the geo Voronoi

Show the points on the map

Prepare the data

Voronoi based on a list of airports

Simple Voronoi diagram

Voronoi Diagrams and Heatmaps

Summary

Showing the information on the map

Connecting to the Meetup WebSocket

Drawing the map

Visualizing Meetup.com RSVP data on a map

Defining the data and the transition

Setting up the scales and the generators

Creating a streamgraph

Random data WebSocket server

Random data-driven streamgraph

Handling the update from the server

Loading the images and setting up the WebSocket connection

Scales lines and array initialization

Creating the visualization

Setting up the WebSocket server

Getting the sample data

Heart rate and respiratory monitoring

Clip path and extra information

Setting up the animations and the graphs

Collecting mouse data

Setting up scales

Simple streaming line

Visualizing Streaming Data

Summary

Render the legend

Handle the drag event

Loading the data and drawing the map

Setting up the HTML page and the output elements

Render the globe on a HTML canvas

Render the visualization

Getting and sanitize the data

Rotating the world globe

Fix clipping

Connect the html elements

Rendering the earthquake circles

Rendering the map

Loading the data

Create the visualization

Getting the data

Earthquake data on a flat map

Drawing the visualization

Getting the results per county

Converting the data to TopoJSON

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

Preparing data

Elections 2016 choropleth

Working with Geo Data

Summary

Add mouse handlers

Drawing the visualization

Filling the matrix with data

Setting up the data and the standard D3 components

Matrix diagram

Adding a mouseover effect

Create a chord diagram from the data

Loading and converting the data in D3

Preparing the data

Chord diagram

Adding interactivity

Adding the legend

Adding the nodes and running the simulation

Setting up the simulation

Loading and preparing the data

Create the bubble chart

Getting the data

Bubble chart

Adding a mouseover effect for selecting and dragging.

Adding images to the circles for the characters

Running the simulation

Loading the data and drawing the circles and the lines

Setting up the force simulation

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

Creating the force layout

Converting the data from the database

Getting the relevant information from the database

Getting the raw Simpsons data

Force layout

Visualizing Graphs

Summary

Data visualized using a pack layout

Data visualized using a partition layout

Alternative visualizations using partition and pack layouts

Adding the click event listener to switch the value shown

Setting up the popup

Add the text elements

Drawing and animating the rectangles

Setting up coloring and draw a legend

Loading the country data

Treemap and partition

Animating hiding a node

Animating the treemap on initial load

Adding the animations

Rendering the lines nodes and text elements

Setting up a color scale

Loading the data

Radial tree

Adding panning and zooming to the visualization

Drawing the tree elements

Using D3 build-in functionality to create a tree

Converting data into a hierarchical data structure

Normal tree

Getting and sanitizing the data

Tree-based visualizations

Working with Hierarchical Data

Summary

Creating the stacked bar chart

Creating the stacked area chart

Getting and sanitizing the data

Population growth estimates using a stacked graph

Tracking the mouse

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

Adding a y-axis with absolute income

Adding an x-axis with years

Adding the axes

Adding the income line

Adding the index line and area gradients

Loading the data and setting up D3 scales

Line charts that show income growth

Making the donut respond to mouse events

Add the lines from the donut to the text

Adding text legends

Individual donut segments

Create the background donut

Color interpolation and color schemes

Standard setup helper objects and a gray donut

Adding the dropdown

Loading the data

Creating the donut

Get and cleanup the data

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

Basic Charts and Shapes

Summary

Adding the axis on the top and bottom

Adding some CSS classes to style the bars and text elements

Adding the bar chart and baby name

Adding group elements

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

Loading CSV data with D3

Creating the visualization

Sanitizing and getting the data

Visualizing our first data

Removing elements which aren't needed anymore

Adding new rectangles if needed

Binding the data and updating existing rectangles

Creating dummy data

Adding rectangles to the group element

Creating a group element

How does D3 work?

Basic HTML template

Setting up the local web server

Getting the sources and setting up a web server

Installing an editor

Setup of this book

What is D3?

Getting Started with D3

Questions

Piracy

Errata

Downloading the color images of this book

Downloading the example code

Customer support

Reader feedback

Conventions

Who this book is for

What you need for this book

What this book covers

Preface

Customer Feedback

www.PacktPub.com

About the Reviewer

About the Author

Credits

Copyright

版权信息

封面

封面

版权信息

Copyright

Credits

About the Author

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

Downloading the color images of this book

Errata

Piracy

Questions

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

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

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

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

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

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

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

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

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