Interactive Data Visualization for the Web

Index

A note on the digital index

A link in an index entry is displayed as the section title in which that entry appears. Because some sections have multiple index markers, it is not unusual for an entry to have several links to the same section. Clicking on any link will take you directly to the place in the text in which the marker appears.

Symbols

3D drawing

alternative tools for, Three-Dimensional

projections, Projections

“SVG (Scalable Vector Graphics)”

SVG transforms, Cleaning It Up

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, Alternatives–Tools 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, Axes–Formatting 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 Chart–Labels

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 Behaviors–Click 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), CSS–Inheritance, 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, Alternatives–Tools 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, Data–Beyond Text

acceptable file types, Data, Data

binding to elements, Binding Data–Bound and Determined, Data Joins with Keys

creating page elements for, Data–Going Chainless

holding with functions, Data Wants to Be Held

storage of, Data

updating of (see updates)

using bound data, Using Your Data–Beyond Text

verifying, Loading CSV data

data arrays, Loading CSV data

data joins, Data Joins with Keys–Exit 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, Exporting–SVG

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 Tools–Developer 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, Exporting–SVG

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 Layout–Force 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 GeoJSON–Convert to GeoJSON

acquiring/parsing geodata, Acquiring and Parsing Geodata–Convert 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), HTML–Comments

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, Interactivity–Moving 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, JavaScript–Global 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

K

key functions, Data Joins with Keys, Key functions

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, Layouts–Force Layout

force layout, Force Layout–Force 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

O

objects, Objects

Ogievetsky, Vadim, Origins and Context

ordinal scales, Introducing Axes, Modernizing the Bar Chart, Referencing the Ordinal Scale, Pie Layout

output range, Domains and Ranges

overlapping elements, Hover to Highlight

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 Data–Bound and Determined, Data Joins with Keys

creating, Generating Page Elements–Going 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, Scales–Other 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 Scatterplot–Labels

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), SVG–Transparency

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 SVGs–Pretty 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

T

tags, Adding Structure with Elements

text-based data, Data

tick marks, Check for Ticks

ticks (time measurement), Force Layout

tooltips, Tooltips–HTML 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, Transitions–Containing 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 Motion–Recap

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 Keys–Exit 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 Chart–Other 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 Tools–Developer 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)