Interactive Data Visualization for the Web
Table of Contents
Special Upgrade Offer
A Note Regarding Supplemental Files
Preface
Conventions Used in This Book
Using Code Examples
Safari® Books Online
How to Contact Us
Acknowledgments
1. Introduction
Why Data Visualization?
Why Write Code?
Why Interactive?
Why on the Web?
What This Book Is
Who You Are
What This Book Is Not
Using Sample Code
Thank You
2. Introducing D3
What It Does
What It Doesn’t Do
Origins and Context
Alternatives
Easy Charts
Graph Visualizations
Geomapping
Almost from Scratch
Three-Dimensional
Tools Built with D3
3. Technology Fundamentals
The Web
HTML
Content Plus Structure
Adding Structure with Elements
Common Elements
Attributes
Classes and IDs
Comments
DOM
Developer Tools
Rendering and the Box Model
CSS
Selectors
Properties and Values
Comments
Referencing Styles
Embed the CSS in your HTML.
Reference an external stylesheet from the HTML.
Attach inline styles.
Inheritance, Cascading, and Specificity
JavaScript
Hello, Console
Variables
Other Variable Types
Arrays
Objects
Objects and Arrays
JSON
GeoJSON
Mathematical Operators
Comparison Operators
Control Structures
if() only
for() now
What arrays are made for()
Functions
Comments
Referencing Scripts
JavaScript Gotchas
Dynamic typing
Variable hoisting
Function-level scope
Global namespace
SVG
The SVG Element
Simple Shapes
Styling SVG Elements
Layering and Drawing Order
Transparency
A Note on Compatibility
4. Setup
Downloading D3
Referencing D3
Setting Up a Web Server
Terminal with Python
MAMP, WAMP, and LAMP
Diving In
5. Data
Generating Page Elements
Chaining Methods
One Link at a Time
The Hand-off
Going Chainless
Binding Data
In a Bind
Data
Loading CSV data
Loading JSON data
Please Make Your Selection
Bound and Determined
Using Your Data
High-Functioning
Data Wants to Be Held
Beyond Text
6. Drawing with Data
Drawing divs
Setting Attributes
A Note on Classes
Back to the Bars
Setting Styles
The Power of data()
Random Data
Drawing SVGs
Create the SVG
Data-Driven Shapes
Pretty Colors, Oooh!
Making a Bar Chart
The Old Chart
The New Chart
Color
Labels
Making a Scatterplot
The Data
The Scatterplot
Size
Labels
Next Steps
7. Scales
Apples and Pixels
Domains and Ranges
Normalization
Creating a Scale
Scaling the Scatterplot
d3.min() and d3.max()
Setting Up Dynamic Scales
Incorporating Scaled Values
Refining the Plot
Other Methods
Other Scales
8. Axes
Introducing Axes
Setting Up an Axis
Cleaning It Up
Check for Ticks
Y Not?
Final Touches
Formatting Tick Labels
9. Updates, Transitions, and Motion
Modernizing the Bar Chart
Ordinal Scales, Explained
Round Bands Are All the Range These Days
Referencing the Ordinal Scale
Other Updates
Updating Data
Interaction via Event Listeners
Changing the Data
Updating the Visuals
Transitions
duration(), or How Long Is This Going to Take?
ease()-y Does It
Please Do Not delay()
Randomizing the Data
Updating Scales
Updating Axes
each() Transition Starts and Ends
Warning: Start carefully
End gracefully
Transitionless each()
Containing visual elements with clipping paths
Other Kinds of Data Updates
Adding Values (and Elements)
Select
Enter
Update
Removing Values (and Elements)
Exit
Making a smooth exit
Data Joins with Keys
Preparing the data
Updating all references
Key functions
Exit transition
Add and Remove: Combo Platter
Recap
10. Interactivity
Binding Event Listeners
Introducing Behaviors
Hover to Highlight
Grouping SVG Elements
Click to Sort
Tooltips
Default Browser Tooltips
SVG Element Tooltips
HTML div Tooltips
Consideration for Touch Devices
Moving Forward
11. Layouts
Pie Layout
Stack Layout
Force Layout
12. Geomapping
JSON, Meet GeoJSON
Paths
Projections
Choropleth
Adding Points
Acquiring and Parsing Geodata
Find Shapefiles
Choose a Resolution
Simplify the Shapes
Convert to GeoJSON
13. Exporting
Bitmaps
PDF
SVG
A. Appendix: Further Study
Books
Websites
Twitterers
Index
About the Author
Colophon
Special Upgrade Offer
Copyright