Go to Previous Chapter
Go to Previous Chapter
SECTION 3
Dashboard Design
SECTION 4
Using D3 With Angular
Fullstack D3 and Data Visualization
CHAPTER 1
Common charts
SECTION 1.1
Chart types
SECTION 1.2
Conclusion
CHAPTER 2
Radar Weather Chart
SECTION 2.1
Getting set up
SECTION 2.2
Adding gridlines
SECTION 2.3
Adding freezing
SECTION 2.4
Adding the temperature area
SECTION 2.5
Adding the UV index marks
SECTION 2.6
Adding the cloud cover bubbles
SECTION 2.7
Adding the precipitation bubbles
SECTION 2.8
Adding annotations
SECTION 2.9
Adding the tooltip
SECTION 2.10
Wrapping up
CHAPTER 3
Dashboard Design
SECTION 3.1
What is a dashboard?
SECTION 3.2
Showing a simple metric
SECTION 3.3
Dealing with dynamic data
SECTION 3.4
Designing tables
SECTION 3.5
Designing a dashboard layout
SECTION 3.6
Deciding questions
CHAPTER 4
Using D3 With Angular
SECTION 4.1
Angular
SECTION 4.2
Digging in
CHAPTER 5
Animated Sankey Diagram
SECTION 5.1
Getting set up
SECTION 5.2
Accessing our data
SECTION 5.3
Drawing the paths
SECTION 5.4
Labeling the paths
SECTION 5.5
Drawing people
SECTION 5.6
Adding color
SECTION 5.7
Showing ending numbers
SECTION 5.8
Label our ending bars
SECTION 5.9
Additional steps
SECTION 5.10
Wrapping up
CHAPTER 6
Animations and Transitions
SECTION 6.1
SVG <animate>
SECTION 6.2
CSS transitions
SECTION 6.3
d3.transition
SECTION 6.4
Lines
CHAPTER 7
Changelog
SECTION 7.1
Revision 17
SECTION 7.2
Revision 16
SECTION 7.3
Revision 15
SECTION 7.4
Revision 14
SECTION 7.5
Revision 13
SECTION 7.6
Revision 12
SECTION 7.7
Revision 11
SECTION 7.8
Revision 10
SECTION 7.9
Revision 9
SECTION 7.10
Revision 8
SECTION 7.11
Revision 7
SECTION 7.12
Revision 6
SECTION 7.13
Revision 5
SECTION 7.14
Revision 4
SECTION 7.15
Revision 3
CHAPTER 8
Using D3 With React
SECTION 8.1
React.js
SECTION 8.2
Digging in
CHAPTER 9
Making a Scatterplot
SECTION 9.1
Intro
SECTION 9.2
Deciding the chart type
SECTION 9.3
Steps in drawing any chart
SECTION 9.4
Access data
SECTION 9.5
Create chart dimensions
SECTION 9.6
Draw canvas
SECTION 9.7
Create scales
SECTION 9.8
Draw data
SECTION 9.9
Draw peripherals
SECTION 9.10
Initialize interactions
SECTION 9.11
Looking at our chart
SECTION 9.12
Extra credit: adding a color scale
CHAPTER 10
Complex Data Visualizations
CHAPTER 11
Data Visualization Basics
SECTION 11.1
Types of data
SECTION 11.2
Ways to visualize a metric
SECTION 11.3
Putting it together
SECTION 11.4
Chart design
SECTION 11.5
Example redesign
SECTION 11.6
Colors
SECTION 11.7
Color scales
SECTION 11.8
Creating our own colors
SECTION 11.9
Wrapping up
CHAPTER 12
D3.js
SECTION 12.1
Going forward
SECTION 12.2
How was your experience?
CHAPTER 13
Appendix
SECTION 13.1
A. Generating our own weather data
SECTION 13.2
Chrome's Color Contrast Tool
SECTION 13.3
B. Chart-drawing checklist
SECTION 13.4
C. SVG elements cheat sheet
CHAPTER 14
Making a map
SECTION 14.1
Digging in
SECTION 14.2
What is GeoJSON?
SECTION 14.3
Access data
SECTION 14.4
Our dataset
SECTION 14.5
Create chart dimensions
SECTION 14.6
What is a projection?
SECTION 14.7
Which projection should I use?
SECTION 14.8
Finishing creating our chart dimensions
SECTION 14.9
Draw canvas
SECTION 14.10
Create scales
SECTION 14.11
Draw data
SECTION 14.12
Draw peripherals
SECTION 14.13
Set up interactions
SECTION 14.14
Wrapping up
CHAPTER 15
Interactions
SECTION 15.1
d3 events
SECTION 15.2
An alternative, but don't use fat arrow functions
SECTION 15.3
Bar chart
SECTION 15.4
Scatter plot
SECTION 15.5
Line chart
CHAPTER 16
Making a Bar Chart
SECTION 16.1
Deciding the chart type
SECTION 16.2
Histogram
SECTION 16.3
Chart checklist
SECTION 16.4
Access data
SECTION 16.5
Create dimensions
SECTION 16.6
Draw canvas
SECTION 16.7
Create scales
SECTION 16.8
Draw data
SECTION 16.9
Adding Labels
SECTION 16.10
Draw peripherals
SECTION 16.11
Set up interactions
SECTION 16.12
Looking at our chart
SECTION 16.13
Extra credit
SECTION 16.14
Accessibility
CHAPTER 17
Making Your First Chart
SECTION 17.1
Getting started
SECTION 17.2
Loading the weather dataset
SECTION 17.3
Getting a server running
SECTION 17.4
Looking at our data
SECTION 17.5
Setting up our line chart
SECTION 17.6
Drawing our chart
SECTION 17.7
Creating our workspace
SECTION 17.8
Adding an SVG element
SECTION 17.9
Creating our bounding box
SECTION 17.10
Creating our scales
SECTION 17.11
Drawing the line
SECTION 17.12
Drawing the axes
Go to Next Chapter
Go to Next Chapter
SECTION 5
Animated Sankey Diagram
Go Pro
Log In
Using D3 With Angular
Table of Contents
Section 4.1
Angular
Section 4.2
Digging in