Index

Symbols

3D drawing
alternative tools for, Three-Dimensional
projections, Projections

A

accessor functions, d3.min() and d3.max(), Updating all references
Adobe Flash Player, Origins and Context
Alaska, map of, Projections
Albers USA, Projections
alternative tools, AlternativesTools Built with D3
ancestor elements, DOM
anonymous functions, High-Functioning, Interaction via Event Listeners
Apache server software, The Web
append() method, Drawing SVGs
arbitrary order, overriding, Ordinal Scales, Explained
arguments (input values), Functions, Data Wants to Be Held
arrays, Arrays, What arrays are made for(), Data
arrays of objects, Objects and Arrays
ascending order sort, Click to Sort
assignment operators, Variables
attr() method, Beyond Text, Drawing SVGs
attributes
assigning to HTML elements, Attributes
in SVG elements, Drawing SVGs
setting, Setting Attributes
axes, AxesFormatting Tick Labels
creating a generic axis, Setting Up an Axis
dynamic quality of, Final Touches
graduated scales for (tick marks), Check for Ticks
labelling, Y Not?, Formatting Tick Labels
styling with CSS, Cleaning It Up
updating, Updating Axes
vs. scales, Scales
axis function, Introducing Axes

B

bar charts
adding color to, Color
adding labels to, Labels
creating scalable flexible, Modernizing the Bar Chart
creating simple, Drawing divs, Making a Bar ChartLabels
creating stacked bar charts, Stack Layout
updating color of, Updating the Visuals
updating labels for, Updating the Visuals
barPadding, Referencing the Ordinal Scale
behaviors, Introducing BehaviorsClick to Sort
binding to multiple elements with, Introducing Behaviors
click to sort, Click to Sort
grouping SVG elements, Grouping SVG Elements
hover to highlight, Hover to Highlight
overlapping elements and, Hover to Highlight
bitmap map tiles, What It Doesn’t Do
Bloch, Matt, Simplify the Shapes
block-level elements, Rendering and the Box Model
block-level scope, Function-level scope
Bostock, Michael, Introducing D3, Origins and Context
box model, Rendering and the Box Model
browsers
development of interactivity, Origins and Context
fundamentals of, The Web
rendering, Rendering and the Box Model
support for, What It Doesn’t Do
SVG compatibility, A Note on Compatibility

C

callback function, Loading CSV data, Loading CSV data
Card, Stuart, Origins and Context
cartographic detail, Choose a Resolution
cascading styles, Inheritance, Cascading, and Specificity
categorical colors, Pie Layout
centroids, Pie Layout
chain syntax, Chaining Methods
chaining methods
alternatives to, The Hand-off
chain syntax, Chaining Methods
examining the links, Chaining Methods
input/output matching, The Hand-off
charts
alternative tools for, Easy Charts
column charts, Drawing divs
(see also bar charts)
pie charts, Pie Layout
ring charts, Pie Layout
child elements, DOM
choropleth maps, Choropleth
Chrome, development tools, Developer Tools
cities, adding to map, Adding Points
class selectors, Selectors
classed() method, A Note on Classes
classes
adding to elements, Drawing divs
identifying elements with, Classes and IDs
vs. styles, A Note on Classes
click events, Interaction via Event Listeners, Binding Event Listeners, Consideration for Touch Devices
click to sort, Click to Sort
clipping paths, Containing visual elements with clipping paths
Cloudmade, What It Doesn’t Do
coding tips
chaining methods, The Hand-off
deconstructing code, Chaining Methods
increasing legibility, Chaining Methods
limit to active transitions, Warning: Start carefully
styling SVG elements, Cleaning It Up
using functions to hold data, Data Wants to Be Held
color property, Cleaning It Up
colors, Pretty Colors, Oooh!, Pie Layout
column charts, Drawing divs
comments, Comments, Properties and Values, Functions
communication protocol, The Web
comparison operators, Comparison Operators
containers, Classes and IDs, Hello, Console
continuous ranges, Round Bands Are All the Range These Days
control structures, Control Structures
coordinate values, locating, JSON, Meet GeoJSON, Adding Points
CSS (Cascading Style Sheets), CSSInheritance, Cascading, and Specificity
applying to axes, Cleaning It Up
cascading, Inheritance, Cascading, and Specificity
comments, Properties and Values
CSS rule, CSS
hover effect, Hover to Highlight
inheritance, Inheritance, Cascading, and Specificity
methods of applying, Referencing Styles
properties and values, Properties and Values, Beyond Text
selectors and properties, CSS
specificity, Inheritance, Cascading, and Specificity
CSV (comma-separated value files), Data, Data

D

D3
alternative tools, AlternativesTools Built with D3
browser support, What It Doesn’t Do
core concepts of, Next Steps
creating a project template, Referencing D3
data sharing in, What It Doesn’t Do
development of, Origins and Context
downloading, Introducing D3, Setup
explanatory visualizations with, What It Doesn’t Do
geomapping in, What It Doesn’t Do
meaning of name, Introducing D3
prerequisites to learning, What This Book Is, Who You Are
referencing for setup, Referencing D3
resources for, Appendix: Further Study
setting up a web server for, Setting Up a Web Server
underlying processes, What It Does
d3.csv () method, Data
d3.json() method, Loading JSON data
d3.range() method, Ordinal Scales, Explained
data, DataBeyond Text
acceptable file types, Data, Data
binding to elements, Binding DataBound and Determined, Data Joins with Keys
creating page elements for, DataGoing Chainless
holding with functions, Data Wants to Be Held
storage of, Data
updating of (see updates)
using bound data, Using Your DataBeyond Text
verifying, Loading CSV data
data arrays, Loading CSV data
data joins, Data Joins with KeysExit transition
controlling order of, Data Joins with Keys
defining key functions, Key functions
exit ranstitions, Exit transition
preparing data for, Preparing the data
updating references, Updating all references
data loading, error handling, Loading CSV data
data mapping
benefits of computation, Why Write Code?
binding data for, Binding Data
design application in, What It Does
data sharing, What It Doesn’t Do
data strings, Loading CSV data
data values
encoding as color, Color
multi-value maps, Color
data visualization
benefits of, Why Write Code?
benefits of interactivity, Why Interactive?
benefits of web-standard technologies, Why on the Web?
early applications for, Origins and Context
exporting to other file types, ExportingSVG
data() method, Using Your Data, Setting Styles
Data-Driven Documents (see D3)
data-driven shapes, Data-Driven Shapes
Davies, Jason, Projections
degrees vs. radians, Pie Layout
descendant elements, DOM
descendant selectors, Selectors
descending order sort, Click to Sort
design systems, Why Write Code?
developer tools, Developer ToolsDeveloper Tools
discrete ranges, Round Bands Are All the Range These Days
div attribute, Drawing divs
div element, Classes and IDs
DOM (Document Object Model)
appending SVG elements with axis function, Setting Up an Axis
examining current state of, Developer Tools
hierarchial structure, DOM
interacting with event listeners, Interaction via Event Listeners
styling with CSS, CSS
domain name, The Web
drawing
alternative tools for, Almost from Scratch
irregular forms, Pie Layout
drawing order, Layering and Drawing Order
dual encoding, Color
dynamic axes, Final Touches
dynamic paragraphs, Please Make Your Selection, Beyond Text
dynamic scaling, Creating a Scale, Setting Up Dynamic Scales

E

each() statements, each() Transition Starts and Ends
easing, ease()-y Does It
edges, Force Layout
elements
adding, Adding Values (and Elements)
adding a class to, Drawing divs
adding structure with, Adding Structure with Elements
applying styles to, Styling SVG Elements
description of, DOM
group elements, Setting Up an Axis
encoding values, Color
enter() method, Please Make Your Selection
event listeners, Interaction via Event Listeners, Binding Event Listeners, Introducing Behaviors
event model, Binding Event Listeners
exit selection, Removing Values (and Elements)
exiting elements, Exit
exploratory vs. explanatory visualizations, What It Doesn’t Do
exporting, ExportingSVG
bitmaps, Bitmaps
PDFs, PDF
SVG format, SVG
external style sheets, Reference an external stylesheet from the HTML.

F

Firefox, development tools, Developer Tools
Flare, Origins and Context
for loops, for() now, The Power of data()
force layout, Force LayoutForce Layout
formatting functions, testing, Formatting Tick Labels
function-level scope, Function-level scope
functions
accessor function, d3.min() and d3.max(), Updating all references
anonymous functions, High-Functioning, Interaction via Event Listeners
axis function, Introducing Axes
basic code structure of, High-Functioning
callback function, Loading CSV data, Loading CSV data
D3 scales as, Scales
event listeners, Interaction via Event Listeners
named functions, High-Functioning, Interaction via Event Listeners
passing arguments to, Functions
used as arguments, Data Wants to Be Held
vs. methods, Chaining Methods

G

geocoding services, Adding Points
Geographic Information Systems (GIS) software, Find Shapefiles
GeoJSON, GeoJSON, JSON, Meet GeoJSON, Convert to GeoJSON
geomapping, JSON, Meet GeoJSONConvert to GeoJSON
acquiring/parsing geodata, Acquiring and Parsing GeodataConvert to GeoJSON
alternative tools for, Geomapping
choropleth, Choropleth
D3 support for, What It Doesn’t Do
GeoJSON, JSON, Meet GeoJSON
map points, Adding Points
paths, Paths
projections, Projections
geometry simplification, Simplify the Shapes
global namespace, Global namespace
Google Maps, What It Doesn’t Do
graduated scale, Check for Ticks
granularity, Choose a Resolution
graphs
alternative tools for, Graph Visualizations
creating with force layouts, Force Layout
(see also charts)
group elements, Setting Up an Axis

H

Hawaii, map of, Projections
Heer, Jeffrey, Origins and Context
horizontal axis, Setting Up an Axis
hover to highlight, Hover to Highlight
HTML (Hypertext Markup Language), HTMLComments
attributes, Attributes, Beyond Text
classes and IDs, Classes and IDs
comments, Comments
common elements, Common Elements
specifying structure with, Content Plus Structure
tags and elements, Adding Structure with Elements
HTML div tooltips, HTML div Tooltips
HTTP (Hypertext Transfer Protocol), The Web
HTTPS (Hypertext Transfer Protocol Secure), The Web

I

ID selectors, Selectors
IDs, Classes and IDs
if statements, Control Structures
immediate transformations, Warning: Start carefully
index order, Data Joins with Keys
InfoVis paper, Origins and Context
inheritance, Inheritance, Cascading, and Specificity
inline elements, Rendering and the Box Model
inline styles, Attach inline styles.
input domain, Domains and Ranges
interactivity, InteractivityMoving Forward
behaviors, Introducing Behaviors
benefits of, Why Interactive?
browser development and, Origins and Context
click to sort, Click to Sort
event listeners and, Binding Event Listeners
hover to highlight, Hover to Highlight
pointer events, Hover to Highlight
tooltips, Tooltips
touch devices, Consideration for Touch Devices
Internet Explorer, The SVG Element, A Note on Compatibility

J

JavaScript, JavaScriptGlobal namespace
arrays, Arrays, What arrays are made for()
arrays of objects, Objects and Arrays
as basis for D3, What This Book Is
comments, Functions
comparison operators, Comparison Operators
control structures, Control Structures
event model, Binding Event Listeners
function-level scope, Function-level scope
functions, Functions
GeoJSON, GeoJSON
global namespace, Global namespace
introduction of, Origins and Context
JSON, JSON
mathematical operators, Mathematical Operators
objects, Objects
opening the JS console, Hello, Console
scripts, Referencing Scripts
variable autotyping, JavaScript Gotchas
variable hoisting, Variable hoisting
variables, Hello, Console
jQuery, Warning: Start carefully
JSON (JavaScript Object Notation), JSON, Data, Loading CSV data

L

labels
for axes, Setting Up an Axis, Y Not?, Formatting Tick Labels
for bar charts, Updating the Visuals
Landay, James, Origins and Context
latitude, JSON, Meet GeoJSON
layering, Layering and Drawing Order
layouts, LayoutsForce Layout
force layout, Force LayoutForce Layout
list of, Layouts
pie layout, Pie Layout
stack layout, Stack Layout
linear scales, Scales
local servers, The Web
longitude, JSON, Meet GeoJSON

M

magic numbers, Updating Scales
map points, Adding Points
map tiles, What It Doesn’t Do
mapping rules, Why Write Code?
maps
choropleth maps, Choropleth
Google Maps, What It Doesn’t Do
multi-value, Color
political maps, Choropleth
population maps, Adding Points
United States map, JSON, Meet GeoJSON
(see also geomapping)
MapShaper, Simplify the Shapes
masks, Containing visual elements with clipping paths
mathematical operators, Mathematical Operators
maximum value, Updating Scales
methods, vs. functions, Chaining Methods
Migurski, Mike, Simplify the Shapes
mouseover events, Binding Event Listeners, Hover to Highlight, Hover to Highlight
multi-value maps, Color
multitouch interactions, Consideration for Touch Devices

N

named functions, High-Functioning
nodes, Force Layout
normalization, Normalization

P

padding, Refining the Plot, Cleaning It Up, Y Not?, Round Bands Are All the Range These Days, Referencing the Ordinal Scale
page elements
binding data to, Binding DataBound and Determined, Data Joins with Keys
creating, Generating Page ElementsGoing Chainless
paragraph elements, Generating Page Elements
parent elements, DOM
paths, Pie Layout, Paths
pie charts, Pie Layout
pixel-based coordinates system, Simple Shapes
pixels
lining up to, Round Bands Are All the Range These Days
smoothing, Cleaning It Up
pointer events, Hover to Highlight, Tooltips
(see also mouseover events)
(see also tooltips)
points, Adding Points
political maps, Choropleth
population maps, Adding Points
port number, The Web
prefuse application, Origins and Context
print-to-PDF functionality, PDF
projections, Projections, Adding Points
properties, CSS, Properties and Values, Objects
Protovis visualization toolkit, Origins and Context

Q

quantitative scales, Introducing Axes
quantize scales, Choropleth
queued transitions, Warning: Start carefully

R

radians, Pie Layout
random data, generating, Random Data
range banding, Round Bands Are All the Range These Days
rectangles, drawing, Drawing divs
red state/blue state maps, Choropleth
referencing styles, Referencing Styles
remote servers, The Web
rendering, Rendering and the Box Model
requests, The Web
resolution, Choose a Resolution
ring charts, Pie Layout

S

Safari, development tools, Developer Tools
sample code files, obtaining, Using Sample Code, Referencing D3
scales, ScalesOther Scales
additional methods, Other Methods
creating, Creating a Scale
definition of, Scales
dynamic scales, Creating a Scale, Setting Up Dynamic Scales
incorporating scaled values, Incorporating Scaled Values
input domain/output range, Domains and Ranges
normalization, Normalization
refining the plot, Incorporating Scaled Values
vs. axes, Scales
scatterplots
adding x/y axes to, Axes
creating, Making a ScatterplotLabels
scaling, Creating a Scale
screen coordinates vs. geo-coordinates, Adding Points
scripts, Referencing Scripts
select(), Select
selectAll(), Select
selection.on() method, Interaction via Event Listeners
selectors, CSS
semantic structure, Content Plus Structure
sequential numbers, generating an array of, Ordinal Scales, Explained
servers, The Web
shape-rendering property, Cleaning It Up
shapefiles, Find Shapefiles
sibling elements, DOM
sorting, Click to Sort
source code, viewing, Developer Tools
specificity, Inheritance, Cascading, and Specificity
stack layout, Stack Layout
staggered transitions, Please Do Not delay()
static transitions, Please Do Not delay()
style() method, Beyond Text
styles
setting, Setting Styles
vs. classes, A Note on Classes
SVG (Scalable Vector Graphics), SVGTransparency
applying styles to elements, Styling SVG Elements
applying transparency, Transparency
axis functions and, Introducing Axes
browser compatibility, A Note on Compatibility
creating elements, The SVG Element
creating simple shapes, Simple Shapes, Drawing SVGsPretty Colors, Oooh!
creating tooltips with, SVG Element Tooltips
drawing overlapping shapes, Layering and Drawing Order, Hover to Highlight
exporting D3 visualizations as, SVG
grouping elements, Grouping SVG Elements
SVG transforms, Cleaning It Up

T

tags, Adding Structure with Elements
text-based data, Data
tick marks, Check for Ticks
ticks (time measurement), Force Layout
tooltips, TooltipsHTML div Tooltips
default, Default Browser Tooltips
HTML div tooltips, HTML div Tooltips
SVG elements, SVG Element Tooltips
touch-based interfaces, Consideration for Touch Devices
transformations, What It Does, Cleaning It Up
transitions, TransitionsContaining visual elements with clipping paths
adding animated, Transitions
chaining together, End gracefully
clipping paths, Containing visual elements with clipping paths
controlling duration of, duration(), or How Long Is This Going to Take?
delaying start of, Please Do Not delay()
equalizing the pace, ease()-y Does It
exit transition, Exit transition
in mouseover events, Hover to Highlight
interrupted, Click to Sort
limit to active number, Warning: Start carefully
marking beginnings/endings of, each() Transition Starts and Ends
randomizing the data, Randomizing the Data
updating axes, Updating Axes
updating the scale, Updating Scales
translation transform, Cleaning It Up
transparency, Transparency
TXT (plain text files), Data
type selectors, Selectors
typeof operator, Dynamic typing

U

ul (unordered list), Rendering and the Box Model
United States, map of, JSON, Meet GeoJSON
updates, Updates, Transitions, and MotionRecap
adding and removing data, Add and Remove: Combo Platter
adding values/elements, Adding Values (and Elements)Update
animation of, Transitions
basic steps to, Updating Data, Changing the Data
data joins, Data Joins with KeysExit transition
event listeners and, Interaction via Event Listeners
overview of, Recap
removing values/elements, Removing Values (and Elements)Making a smooth exit
to bar chart, Modernizing the Bar ChartOther Updates
URLs (Uniform Resource Locators), The Web

V

value changes, animating, Transitions
values
adding, Adding Values (and Elements)
in CSS, Properties and Values
in objects, Objects
variable hoisting, Variable hoisting
variable scope, Function-level scope
variables, Hello, Console, JavaScript Gotchas, Global namespace, Create the SVG
vector data, Choose a Resolution
vertical axis, Y Not?
visual rules, Rendering and the Box Model
visual structure, Content Plus Structure
visualization, definition of, Why Data Visualization?

W

web development tools, Developer ToolsDeveloper Tools
Web fundamentals, The Web, The Web
web inspector, Rendering and the Box Model
Web servers
operation of, The Web
setting up, Setting Up a Web Server
web-standard technologies, benefits of, Why on the Web?
whitespace, adding, Round Bands Are All the Range These Days
(see also padding)