Contents

About the Author

About the Technical Reviewers

Acknowledgments

Introduction

 Chapter 1: Charting Technology Overview

Elements in a Chart

Most Common Charts

How to Realize Charts on the Web

HTML5

Charting with SVG and CANVAS

Canvas vs SVG

The DOM

Developing in JavaScript

Running and Debugging JavaScript

Data Types in JavaScript

Firebug and DevTools

JSON

Summary

 Chapter 2: Working with D3

Introducing D3

Starting with a Blank HTML Page

Using Selections and Operators

Selections and Selectors

Operators

Creating New Elements

The html( ) Method

The append( ) Method

The insert( ) Method

Inserting Data into Elements

Applying Dynamic Properties

Adding SVG Elements

Creating an SVG Element

Transformations

Transitions

Summary

 Chapter 3: Line Charts with D3

Developing a Line Chart with D3

Starting with the First Bricks

Scales, Domains, and Ranges

Inside the Code

Using Data with (x,y) Values

Controlling the Axes’ Range

Adding the Axis Arrows

Adding a Title and Axis Labels

Drawing a Line Chart from Data in a CSV File

Reading and Parsing Data

Implementing Axes and the Grid

Drawing Data with the csv( ) Function

Adding Marks to the Line

Line Charts with Filled Areas

Multiseries Line Charts

Working with Multiple Series of Data

Legend

Interpolating Lines

Difference Line Chart

Summary

 Chapter 4: Bar Charts with D3

Drawing a Bar Chart

Drawing a Stacked Bar Chart

A Normalized Stacked Bar Chart

Drawing a Grouped Bar Chart

Horizontal Bar Chart with Negative Values

Summary

 Chapter 5: Pie Charts with D3

The Basic Pie Charts

Drawing a Basic Pie Chart

Some Variations on Pie Charts

Donut Charts

Polar Area Diagrams

Summary

 Chapter 6: Candlestick Charts with D3

Creating an OHLC Chart

Date Format

Box Representation in Candlestick Charts

Summary

 Chapter 7: Scatterplot and Bubble Charts with D3

Scatterplot

Markers and Symbols

Using Symbols as Markers

Using Customized Markers

Adding More Functionalities

Trendlines

Clusters

Highlighting Data Points

Bubble Chart

Summary

 Chapter 8: Radar Charts with D3

Radar Chart

Building Auto Scaling Axes

Adding Data to the Radar Chart

Improving Your Radar Chart

Summary

 Chapter 9: Handling Live Data with D3

Real-Time Charts

Using PHP to Extract Data from a MySQL Table

Starting with a TSV File

Moving On to the Real Case

Summary

 Chapter 10: Adding Controls to Charts

Adding Controls

Using Radio Buttons

Adding Radio Button Controls

Using Sliders

Using Check Boxes

Summary

 Chapter 11: Embedding D3 Charts in jQuery Widgets

jQuery UI: Widgets

Accordion

Tab

D3 Charts on Tabs

D3 Charts on Accordions

Resizable and Draggable Charts

A Resizable Line Chart

Three Draggable Line Charts

Summary

 Chapter 12: JSON and Layouts—Handling Structured Data

The JSON Format

The D3 Layouts

Starting with a Simple Tree

Analysis of the Tree Layout

Circular Tree Representation

The Partition Layout

Endless Possibilities with JSON and Layouts

Summary

Conclusion

 Appendix A: Guidelines for the Examples in the Book

Installing a Web Server

Installing Aptana Studio IDE

Setting the Aptana Studio Workspace

Creating a Project

Completing the Workspace

Filling the src Directory with the Libraries

Running the Examples

Summary

Index