Fullstack Data Visualization with D3 Build Beautiful Data Visualizations and Dashboards with D3

Table of Contents
Book Revision
Bug Reports
Be notified of updates via Twitter
We'd love to hear from you!
Making Your First Chart
	Getting started
	Loading the weather dataset
	Getting a server running
	Looking at our data
	Setting up our line chart
	Drawing our chart
	Creating our workspace
	Adding an SVG element
	Creating our bounding box
	Creating our scales
	Drawing the line
	Drawing the axes
Making a Scatterplot
	Intro
	Deciding the chart type
	Steps in drawing any chart
	Access data
	Create chart dimensions
	Draw canvas
	Create scales
		The concept behind scales
		Finding the extents
	Draw data
		Data joins
		Data join exercise
		.join()
	Draw peripherals
	Initialize interactions
	Looking at our chart
	Extra credit: adding a color scale
Making a Bar Chart
	Deciding the chart type
	Histogram
	Chart checklist
	Access data
	Create dimensions
	Draw canvas
	Create scales
		Creating Bins
		Creating the y scale
	Draw data
	Adding Labels
		Extra credit
	Draw peripherals
	Set up interactions
	Looking at our chart
	Extra credit
	Accessibility
Animations and Transitions
	SVG 
	CSS transitions
		Using CSS transition with a chart
	d3.transition
	Lines
Interactions
	d3 events
	Don't use fat arrow functions
		Destroying d3 event listeners
	Bar chart
	Scatter plot
		Voronoi
		Changing the hovered dot's color
	Line chart
		d3.scan()
Making a map
	Digging in
	What is GeoJSON?
	Access data
	Our dataset
	Create chart dimensions
	What is a projection?
	Which projection should I use?
	Finishing creating our chart dimensions
	Draw canvas
	Create scales
	Draw data
	Draw peripherals
		Drawing a legend
		Marking my location
	Set up interactions
	Wrapping up
Data Visualization Basics
	Types of data
		Qualitative Data
		Quantitative Data
	Ways to visualize a metric
		Size
		Position
		Color
	Putting it together
	Chart design
		Simplify, simplify, simplify
		Annotate in-place
		Add enhancements, but not too many
	Example redesign
	Colors
	Color scales
		1. Representing a category
		Custom color scales
	Creating our own colors
		keywords
		rgb
		hsl
		hcl
		d3-color
		Color tips
	Wrapping up
Common charts
	Chart types
		Timeline
		Heatmap
		Radar
		Scatter
		Pie charts & Donut charts
		Histogram
		Box plot
	Conclusion
Dashboard Design
	What is a dashboard?
	Showing a simple metric
	Dealing with dynamic data
		Data states
		Dancing numbers
	Designing tables
	Designing a dashboard layout
		Have a main focus
		Keep the number of visible metrics small
		Let the user dig in
	Deciding questions
		How familiar are users with the data?
		How much time do users have to spend?
Complex Data Visualizations
Marginal Histogram
	Chart bounds background
	Equal domains
	Color those dots
	Mini histograms
	Static polish
	Adding a tooltip
	Histogram hover effects
	Adding a legend
	Highlight dots when we hover the legend
	Mini hover histograms
Radar Weather Chart
	Getting set up
		Accessing the data
		Creating our scales
	Adding gridlines
		Draw month grid lines
		Draw month labels
		Adding temperature grid lines
	Adding freezing
	Adding the temperature area
	Adding the UV index marks
	Adding the cloud cover bubbles
	Adding the precipitation bubbles
	Adding annotations
	Adding the tooltip
	Wrapping up
Animated Sankey Diagram
	Getting set up
	Accessing our data
		Accessing sex variables
		Accessing education variables
		Accessing socioeconomic status variables
		Stacking probabilities
		Generating a person
	Drawing the paths
		X scale
		Y scales
		Drawing the paths
	Labeling the paths
		Start labels
		End labels
		Drawing the ending markers
	Drawing people
		Positioning our people
		Updating our peoples' y-positions
		Adding jitter
		Hiding people off-screen
	Adding color
		Creating a color scale
		Adding a color key
		Coloring our markers
		Adding a filter to our markers
		Giving our people ids
	Showing ending numbers
		Updating the ending values
	Label our ending bars
	Additional steps
	Wrapping up
Using D3 With React
	React.js
	Digging in
		Access data
		Create dimensions
		Draw canvas
		Create scales
		Draw data
		Draw peripherals
		Axes, take two
		Set up interactions
		Finishing up
Using D3 With Angular
	Angular
	Digging in
		Access data
		Create dimensions
		Updating dimensions on window resize
		Draw canvas
		Using our chart component
		Create scales
		When to update our scales?
		Draw data
		Using our line component
		Draw peripherals
		Axes, take two
		Re-creating our axis component
		Set up interactions
		Finishing up
D3.js
	What did we cover?
	What did we not cover?
	Going forward
	How was your experience?
Appendix
	A. Generating our own weather data
	Chrome's Color Contrast Tool
	B. Chart-drawing checklist
	C. SVG elements cheat sheet
Changelog
	Revision 15
		04-01-2020
	Revision 14
		03-11-2020
	Revision 13
		01-08-2020
	Revision 12
		12-09-2019
	Revision 11
		10-11-2019
	Revision 10
		09-29-2019
	Revision 9
		08-28-2019
	Revision 8
		07-04-2019
	Revision 7
		06-14-2019
	Revision 6
		06-06-2019
	Revision 5
		06-03-2019
	Revision 4
		05-24-2019
	Revision 3
		05-17-2019