Index

A

• accessor
  • array.concat(value[, value[, …]]) function / Built-in JavaScript array methods
  • array.join([separator]) function / Built-in JavaScript array methods
  • array.slice([begin[, end]]) function / Built-in JavaScript array methods
  • array.indexOf(value[, fromIndex]) function / Built-in JavaScript array methods
  • array.lastIndexOf(value[, fromIndex]) function / Built-in JavaScript array methods
• advanced filtering
  • implementing, with brushes / Advanced filtering using brushes
• AJAX
  • about / XHR – the native XMLHttpRequest
• AngularJS
  • about / D3.js meets AngularJS
  • as data loading service / Summary of AngularJS as a data loading service
  • used, for bootstrapping template / Bootstrapping a template with AngularJS and Socket.IO
  • Socket.IO, using with / Using Socket.IO with AngularJS
• AngularJS application
  • setting up / Setting up an AngularJS application
  • directory, organizing / Organizing the directory
  • AngularJS, installing / Installing AngularJS
  • index file, bootstrapping / Bootstrapping the index file
  • module, adding / Adding a module and a controller
  • controller, adding / Adding a module and a controller
• Angular wrapper, XHR
  • about / $http – the Angular wrapper for XHR
  • data loading component, creating / Creating an AngularJS data loading component
  • data loading component, testing / Testing the AngularJS data loading component
• animations
  • about / Animations
  • timer in D3.js with d3.timer / Timer in D3.js with d3.timer
  • interpolation, with D3.js / Interpolation with D3.js
  • with transitions / Easy animations with transitions
  • realistic animations / Realistic animations with easing
  • creating, for bar chart / Transitions in charts
• arcs, generating
  • about / Generating arcs
  • different chart types / Different chart types
  • line charts, implementing / Implementing line charts
  • bar charts, designing / Designing bar charts
• array.filter(callback) function
  • about / array.filter(callback)
• array.map(callback) function
  • about / array.map(callback)
• array.reduce(callback [, initialValue]) function
  • about / array.reduce(callback [, initialValue])
• array manipulation, with D3.js
  • about / More array manipulation with D3.js
  • statistics / More array manipulation with D3.js
  • operators / More array manipulation with D3.js
  • associatives / More array manipulation with D3.js
• attributes
  • about / Document Object Model
• axes
  • about / All about axes
  • drawing / Drawing the axis
  • adding, to scatter chart / Adding axes to the scatter chart
• axis.orient([orientation]) method / All about axes
• axis.scale([scale]) method / All about axes
• axis.tickFormat([format]) method / All about axes
• axis.ticks([arguments…]) method / All about axes
• axis.tickValues([values]) method / All about axes
• axis function / All about axes

B

• bar chart
  • animation, creating for / Transitions in charts
• brush
  • about / Advanced filtering using brushes
  • simple brush, creating / Creating a simple brush
  • custom date filter directive, building / Building a custom date filter directive
• built-in SVG shapes
  • URL / Common shapes and primitives
• Bézier curves
  • about / Bézier curves
  • using / Bézier curves
  • ellipses, drawing / Drawing ellipses and elliptical arcs
  • elliptical arcs, drawing / Drawing ellipses and elliptical arcs
  • arcs, generating / Generating arcs

C

• Canvas API / Pixel graphics
• chart, drawing
  • about / Drawing charts
  • axis / Axis, scale, range, and domain
  • range / Axis, scale, range, and domain
  • scale / Axis, scale, range, and domain
  • domain / Axis, scale, range, and domain
  • data points, joining / Joining the data points
• chart directive
  • about / A chart directive
  • for SVG / A directive for SVG
  • custom compile function, implementing / Implementing a custom compile function
  • chart, drawing / Drawing charts
  • advantages / Advantages of directives
  • generalizing / Generalizing the chart directive
  • testing / Testing the directive
  • testing environment, setting up / Setting up the testing environment
  • unit testing / Unit testing the chart directive
  • e2e-testing / E2E testing of the chart directive
• classifier
  • testing / Testing the classifier
• common SVG shapes
  • about / Common shapes and primitives
  • using / Common shapes and primitives
• content
  • about / Document Object Model
• Content Delivery Network (CDN)
  • URL / Creating an HTML template for D3.js
• CSS selectors
  • URL / Finding elements in the DOM with Selectors
• cursors
  • about / Cursors
  • simple cursor / A simple cursor
  • snappy cursors / Snappy cursors
  • cursor position, labeling / Labeling the cursor position
  • custom events / Customizing events in D3.js
  • self-updating cursor values, displaying / Displaying self-updating cursor values
• curved lines
  • drawing, with SVG path / Curved lines with the SVG path
• curveto command / Bézier curves
• custom date format
  • parsing, to JavaScript date / Parsing the custom date format to a JavaScript date
• custom events
  • implementing / Customizing events in D3.js
  • d3.dispatch(event) / Customizing events in D3.js
  • dispatch.on(event, listener) / Customizing events in D3.js
  • dispatch.event(args) / Customizing events in D3.js
• custom Google Analytics-like visualization dashboard / Building a real-time dashboard to visualize server logs

D

• d3.entries(object) function
  • about / d3.entries(object)
• D3.js
  • about / Understanding Data-Driven Documents
  • reference link / Understanding Data-Driven Documents
  • Wiki pages / Understanding Data-Driven Documents
  • API reference / Understanding Data-Driven Documents
  • features / Why do we use D3.js?
  • advantages / Why do we use D3.js?
  • compatibility / Why do we use D3.js?
  • debugging / Why do we use D3.js?
  • performance / Why do we use D3.js?
  • data joins / The killer feature – data joins
  • resources, finding / Finding resources
  • AngularJS, working with / D3.js meets AngularJS
  • maintainable component / Testable and maintainable components
  • testable component / Testable and maintainable components
  • custom directives / Custom directives
  • custom filters / Custom filters
  • custom loading / Custom loading and parsing service
  • parsing service / Custom loading and parsing service
  • as data loading service / Summary of D3.js as a data loading service
• D3.js and AngularJS integration
  • about / Integrating D3.js into AngularJS
  • directory, organizing / Organizing the directory
  • D3.js, wrapping / Wrapping D3.js
• D3.js API
  • URL / A closer look at Selections
• D3.js Loader scenario
  • test, adding to / Testing the simple D3 data loading component
• D3.js wiki link / More array manipulation with D3.js
• d3.keys(object) function
  • about / d3.keys(object)
• d3.max(array[, accessor]) function
  • about / d3.max(array[, accessor])
• d3.mean(array[, accessor]) function
  • about / d3.mean(array[, accessor])
• d3.median(array[, accessor]) function
  • about / d3.median(array[, accessor])
• d3.merge(array) function
  • about / d3.merge(array)
• d3.min(array[, accessor]) function
  • about / d3.min(array[, accessor])
• d3.nest
  • elements, grouping with / Grouping elements with d3.nest
• d3.pairs(array) function
  • about / d3.pairs(array)
• d3.permute(array, indexes) function
  • about / d3.permute(array, indexes)
• d3.range([start, ]stop[, step) function
  • about / d3.range([start, ]stop[, step)
• d3.select(node) / d3.select(node)
• d3.select(selector) / d3.select(selector)
• d3.shuffle(array) function
  • about / d3.shuffle(array)
• d3.sum(array[, accessor]) function
  • about / d3.sum(array[, accessor])
• d3.values(object) function
  • about / d3.values(object)
• d3.xhr
  • about / d3.xhr – the XHR wrapper of D3.js
  • wrappers, for common file types / Useful wrappers for common file types
  • data loading component, creating / Creating a simple D3 data loading component
• d3.zip(array, array, ...) function
  • about / d3.zip(array, array, ...)
• Data / The killer feature – data joins
• data-driven approach
  • about / Why do we use D3.js?
• Data-Driven Documents
  • D3.js / Understanding Data-Driven Documents
• data binding / The killer feature – data joins
• data binding, to DOM elements
  • about / Binding data to DOM elements
  • selection.data(values[, key]) / selection.data(values[, key])
  • dynamic properties, using in Selections / Using dynamic properties in Selections
  • track changes, with data joins / Tracking changes of data with data joins
  • update pattern / The update pattern
• data joins
  • about / The killer feature – data joins
  • old dataset / The killer feature – data joins
  • new dataset / The killer feature – data joins
  • enter set / The killer feature – data joins
  • update set / The killer feature – data joins
  • exit set / The killer feature – data joins
• data loading component
  • testing / Testing the simple D3 data loading component, A reusable data parsing service
• data manipulation
  • datasets, manipulating in arrays / Manipulating datasets in arrays
  • numbers and dates, formatting / Formatting numbers and dates
  • scales, working with / Working with scales
  • axes / All about axes
• data parsing service
  • testing / Testing the data parsing service
• datasets, manipulating in arrays
  • about / Manipulating datasets in arrays
  • built-in JavaScript array methods / Built-in JavaScript array methods
  • array manipulation, with D3.js / More array manipulation with D3.js
  • elements, grouping with d3.nest / Grouping elements with d3.nest
• date and time formats
  • customizing / Customizing date and time formats
• Date object
  • reference / Customizing date and time formats
• De Casteljau algorithm / Bézier curves
• Document Object Model (DOM)
  • about / Document Object Model
• DOM elements
  • selecting / Selecting and modifying DOM elements
  • modifying / Selecting and modifying DOM elements
  • finding, selectors used / Finding elements in the DOM with Selectors
  • data binding / Binding data to DOM elements
• DOM events
  • URL / Type of Events

E

• .exit() function
  • about / The killer feature – data joins
• easing functions
  • URL / Realistic animations with easing
• elements
  • grouping, with d3.nest / Grouping elements with d3.nest
• ellipses
  • drawing / Drawing ellipses and elliptical arcs
  • path generators, in D3.js / Path generators in D3.js
  • straight lines, generating / Generating straight lines
  • paths, generating for areas / Generate paths for areas
• elliptical arc command / Drawing ellipses and elliptical arcs
• elliptical arcs
  • drawing / Drawing ellipses and elliptical arcs
• end-to-end (e2e) test / Testing the directive
• enter set / The killer feature – data joins
  • about / Tracking changes of data with data joins
• enter transitions / Creating plausible transitions
• event listeners
  • about / Listen for events
• Event object
  • URL / Getting event coordinates
• events
  • about / Listen for events
  • types / Type of Events
  • mouseenter / Type of Events
  • mouseover / Type of Events
  • mousemove / Type of Events
  • mousedown / Type of Events
  • mouseup / Type of Events
  • click / Type of Events
  • dblclick / Type of Events
  • mouseleave / Type of Events
  • event coordinates / Getting event coordinates
• events, for brush interactions
  • brushstart / Creating a simple brush
  • brush / Creating a simple brush
  • brushend / Creating a simple brush
• exit set / The killer feature – data joins
  • about / Tracking changes of data with data joins
• exit transitions / Creating plausible transitions
• Express / Building a real-time dashboard to visualize server logs
• external data
  • loading / Loading external data, Creating a simple D3 data loading component
  • log file, viewing in browserXHR / XHR – the native XMLHttpRequest

F

• functions, for Selection
  • about / A closer look at Selections
  • content modification / A closer look at Selections
  • data binding / A closer look at Selections
  • animation and interaction / A closer look at Selections
  • flow control / A closer look at Selections

H

• $http module
  • about / $http – the Angular wrapper for XHR
• HTML template, for D3.js
  • creating / Creating an HTML template for D3.js

I

• interactive filters
  • about / Interactive filters
  • implementing / Interactive filters
• interpolation
  • implementing, with tweens / Interpolate anything with tweens
• iterator
  • about / Built-in JavaScript array methods
  • array.filter(callback) function / Built-in JavaScript array methods
  • array.forEach(callback) function / Built-in JavaScript array methods
  • array.every(callback) function / Built-in JavaScript array methods
  • array.map(callback) function / Built-in JavaScript array methods
  • array.some(callback) function / Built-in JavaScript array methods
  • array.reduce(callback [, initialValue]) function / Built-in JavaScript array methods

J

• Jasmine
  • URL / Unit testing the chart directive
• JavaScript
  • array mutator / Built-in JavaScript array methods
  • accessor / Built-in JavaScript array methods
  • iterator / Built-in JavaScript array methods
• JavaScript date
  • custom date format, parsing to / Parsing the custom date format to a JavaScript date
• JavaScript objects
  • log files, parsing to / Parsing log files to JavaScript objects
• join_p() function / The killer feature – data joins

K

• Karma / Building a real-time dashboard to visualize server logs
  • about / Getting started with Karma
  • installing / Getting started with Karma
  • URL / Unit testing the chart directive

L

• libs directory
  • reference link / Creating an HTML template for D3.js
• log entries
  • grouping / Grouping log entries
• log files
  • parsing, to JavaScript objects / Parsing log files to JavaScript objects
  • parsing, step by step / Parsing log files step by step
• logs, on client
  • processing / Processing and visualizing logs on the client, Processing log files
  • visualizing / Processing and visualizing logs on the client
  • template, bootstrapping with AngularJS / Bootstrapping a template with AngularJS and Socket.IO
  • template, bootstrapping with Socket.IO / Bootstrapping a template with AngularJS and Socket.IO
  • Socket.IO, using with AngularJS / Using Socket.IO with AngularJS
• logs displaying example, Karma test runner
  • about / Displaying logs

M

• MouseEvent
  • URL / Getting event coordinates
• moveto command / Bézier curves
• mutator
  • about / Built-in JavaScript array methods
  • array.pop() function / Built-in JavaScript array methods
  • array.push(value[, value[, …]]) function / Built-in JavaScript array methods
  • array.reverse() function / Built-in JavaScript array methods
  • array.shift() function / Built-in JavaScript array methods
  • array.sort([comparator]) function / Built-in JavaScript array methods
  • array.splice(array[, accessor]) function / Built-in JavaScript array methods
  • array.unshift(value[, value[, …]]) function / Built-in JavaScript array methods

N

• .nice() method
  • about / scale.nice([count])
• Node.js / Building a real-time dashboard to visualize server logs
• Node.js application
  • setting up / Setting up a Node.js application
  • URL / Setting up a Node.js application
• nodes
  • about / Document Object Model
• number format
  • specifying / Specifying a number format
  • types / Types of formatting
  • precision / Precision
  • thousands separator / Thousands separator
  • width / Width
  • zero padding / Zero padding
  • currency symbol / The currency symbol
  • signs / Signs
  • align property / The align property
  • fill option / The fill option

O

• ordinal scales, for discrete data
  • about / Ordinal scales for discrete data (strings)
  • scale.rangePoints(interval [, padding]) / scale.rangePoints(interval [, padding])
  • scale.rangeBands(interval [, padding [, outerPadding ]]) / scale.rangeBands(interval [, padding [, outerPadding ]])
  • scale.rangeBand() / scale.rangeBand()
  • scale.rangeExtent() / scale.rangeExtent()
  • predefined ordinal color scales / Predefined ordinal color scales

P

• path element, SVG
  • used, for drawing curved lines / Curved lines with the SVG path
• pixel graphic
  • about / Pixel graphics
  • rule of thumb / Pixel graphics
• plausible transitions
  • creating / Creating plausible transitions
• Protractor / Building a real-time dashboard to visualize server logs
  • about / Getting started with Protractor
  • installing / Getting started with Protractor
  • URL / E2E testing of the chart directive

Q

• quadratic curveto command / Bézier curves
• quadratic smooth curveto command / Bézier curves
• quantitative scales, for continuous data
  • about / Quantitative scales for continuous data (numbers)
  • scale.domain([numbers]) / scale.domain([numbers])
  • scale.range([numbers]) / scale.range([numbers])
  • scale.clamp([boolean]) / scale.clamp([boolean])
  • scale.nice([count]) / scale.nice([count])
  • scale.ticks([count]) / scale.ticks([count])
  • scale.tickFormat(count [,specifier]) / scale.tickFormat(count [,specifier])

R

• .remove() function
  • about / The killer feature – data joins
• real-time dashboard, for visualizing server logs
  • building / Building a real-time dashboard to visualize server logs
• real-time monitoring server
  • building / Building a real-time monitoring server
  • Node.js application, setting up / Setting up a Node.js application
  • server push, adding with WebSockets / Adding server push with WebSockets
  • logs, reading / Reading logs and pushing them to the client
  • logs, pushing to client / Reading logs and pushing them to the client
  • file watcher, adding / Watching files for changes
  • final application / The dashboard application
• realistic animations
  • about / Realistic animations with easing
  • creating, with easing function / Realistic animations with easing
• regular expression
  • URL / Testing the simple D3 data loading component
• resources
  • finding / Finding resources
• reusable data parsing service / A reusable data parsing service

S

• Scalable Vector Graphics (SVG)
  • about / Vector graphics and Scalable Vector Graphics
  / Selecting and modifying DOM elements
• scale.rangeBands() method
  • about / scale.rangeBands(interval [, padding [, outerPadding ]])
• scale.rangePoints() method
  • about / scale.rangePoints(interval [, padding])
• scales
  • working with / Working with scales
  • quantitative scales, for continuous data / Quantitative scales for continuous data (numbers)
  • ordinal scales, for discrete data / Ordinal scales for discrete data (strings)
  • time scales, for time data / Time scales for time data (date and time)
• Selection / The killer feature – data joins
  • about / Selecting and modifying DOM elements, A closer look at Selections
  • functions, applying / A closer look at Selections
• selection.append(name) function / selection.append(name)
• selection.attr(name[, value]) function / selection.attr(name[, value])
• selection.call(function[, arguments…]) / selection.call(function[, arguments…])
• selection.data(dataSet) / The killer feature – data joins
• selection.data(dataSet).enter() / The killer feature – data joins
• selection.data(dataSet).exit() / The killer feature – data joins
• selection.each(function) / selection.each(function)
• selection.enter()
  • about / selection.enter()
• selection.exit()
  • about / selection.exit()
• selection.insert(name[, before]) function / selection.insert(name[, before])
• selection.property(name[, value]) function / selection.property(name[, value])
• selection.remove() function / selection.remove()
• selection.style(name[, value[, priority]]) function / selection.style(name[, value[, priority]])
• selection.text([value]) function / selection.text([value])
• selectors
  • used, for finding DOM elements / Finding elements in the DOM with Selectors
  • d3.select(selector) / d3.select(selector)
  • d3.select(node) / d3.select(node)
  • selection.each(function) / selection.each(function)
  • selection.call(function[, arguments…]) / selection.call(function[, arguments…])
• server push
  • adding, with WebSockets / Adding server push with WebSockets
• simple cursor
  • about / A simple cursor
• simple scatter plot application
  • building / Building a simple scatter plot application
  • simple scatter plot, creating / Creating a simple scatter plot
• simple zoom
  • about / A simple zoom
  • implementing / A simple zoom
• Sizzle
  • URL / Finding elements in the DOM with Selectors
• smooth curveto command / Bézier curves
• snappy cursors
  • about / Snappy cursors
• Socket.IO
  • used, for bootstrapping template / Bootstrapping a template with AngularJS and Socket.IO
  • using, with AngularJS / Using Socket.IO with AngularJS
• Socket.IO library / Building a real-time dashboard to visualize server logs
• software tests
  • unit tests / Testing the directive
  • integration tests / Testing the directive
  • system tests / Testing the directive
• specifiers / Customizing date and time formats
• staggered transitions
  • about / Staggered transitions
• straight lines
  • drawing, with SVG commands / Drawing straight lines
• SVG commands
  • straight lines, drawing with / Drawing straight lines
• SVG commands, for drawing
  • M (moveto) / Curved lines with the SVG path
  • L (lineto) / Curved lines with the SVG path
  • H (horizontal lineto) / Curved lines with the SVG path
  • V (vertical lineto) / Curved lines with the SVG path
  • C (curveto) / Curved lines with the SVG path
  • S (smooth curveto) / Curved lines with the SVG path
  • Q (quadratic curveto) / Curved lines with the SVG path
  • T (smooth quadratic curveto) / Curved lines with the SVG path
  • A (elliptical arc) / Curved lines with the SVG path
  • Z (closepath) / Curved lines with the SVG path

T

• .text()method / The killer feature – data joins
• .tickFormat() method
  • about / scale.tickFormat(count [,specifier])
• .ticks() method
  • about / scale.ticks([count])
• terminology
  • about / Terminology and definitions
  • Document Object Model (DOM) / Document Object Model
  • vector graphic / Vector graphics and Scalable Vector Graphics
  • Scalable Vector Graphics (SVG) / Vector graphics and Scalable Vector Graphics
  • pixel graphic / Pixel graphics
• test
  • adding, to D3.js Loader scenario / Testing the simple D3 data loading component
• testing environment, setting up
  • about / Setting up the testing environment
  • Karma / Getting started with Karma
  • Protractor / Getting started with Protractor
• time scales, for time data
  • about / Time scales for time data (date and time)
• transitions
  • about / Easy animations with transitions
  • staggered transitions / Staggered transitions
  • chaining / Chaining transitions
  • plausible transitions, creating / Creating plausible transitions
  • in charts / Transitions in charts
  • in bar chart / Transitions in charts
• tween
  • about / Interpolate anything with tweens

U

• update set / The killer feature – data joins
  • about / Tracking changes of data with data joins
• update transitions / Creating plausible transitions

V

• vector graphic
  • about / Vector graphics and Scalable Vector Graphics
  • rule of thumb / Vector graphics and Scalable Vector Graphics
• Vector Markup Language (VML) / Raphaël (JavaScript – SVG/VML)
• visualization tools, for Web
  • overview / A brief overview of visualization tools for the Web
  • Java / Java and Flash
  • Flash / Java and Flash
  • Raphaël (JavaScript - SVG/VML) / Raphaël (JavaScript – SVG/VML)
  • Protovis (JavaScript - SVG) / Protovis (JavaScript – SVG)
  • D3.js (JavaScript - HTML/SVG) / D3.js (JavaScript – HTML/SVG)
  • Canvas API (JavaScript - Canvas) / Canvas API (JavaScript – Canvas)
  • Three.js (JavaScript - WebGL) / Three.js (JavaScript – WebGL)

W

• WebSockets
  • web server for static files, setting up / Setting up a web server that serves static files
  • used, for adding server push / Adding server push with WebSockets
• World Wide Web Consortium (W3C)
  • about / Document Object Model

X

• x axis zoom
  • about / An x axis zoom
  • implementing / An x axis zoom
• XMLHttpRequest (XHR)
  • about / XHR – the native XMLHttpRequest
• XMLHttpRequest object
  • URL / XHR – the native XMLHttpRequest

Z

• zoom
  • about / Zooming and panning
  • simple zoom / A simple zoom
  • x axis zoom / An x axis zoom