This document provides an overview and introduction to advanced D3 charting techniques. It begins with explaining what D3 is and its capabilities for binding data to documents using HTML, SVG, and CSS. It then outlines the topics that will be covered, including making D3 code more reusable and clean, understanding the patterns behind D3, SVG conventions, scales, selections, data binding, and dividing charts into logical groupings/layers. Examples of D3 code for selections, data, and joins are also provided.

1. Advanced D3
Charting
Blake Dietz
Daniel Ryan

2. What is ?

3. What is D3?
• http://d3js.org/
• D3.js is a JavaScript
library for manipulating
for binding data to your
documents.
• D3 helps you bring
data to life using
HTML, canvas, SVG
and CSS.

4. Why am I here?

5. Why am I here?
!
• Learn how to make your D3
code cleaner
• How to build reusable
components
• Get a better grasp of D3 by
understanding the pattern it's
built upon

6. Getting Started

7. Getting Started
• SVG Conventions
• Coordinate system
• Selecting elements in the D.O.M.
• d3.select()
• Binding the data to elements
• .selectAll('<element>').data(<your data>).enter()
• CSS

8. Margin Conventions

9. Coordinate System Quirks
x axis
yaxis

10. Scales

11. Linear vs Ordinal
Range Interval
.rangePoints()
.rangeBands()
.rangeBand()

12. CSS for SVG
/* typical CSS */
div
{
background: blue;
}
!
/* SVG CSS */
rects
{
fill: blue;
shape-rendering: crisp-edges;
}
SVG elements
use unique CSS
styles

13. Selections

14. Selections are the basic data type in D3
!
// select all <rect> elements
var rects = d3.selectAll("rect");
!
// set some attributes and styles
rects.attr("height", 50);
rects.attr("width", 20);
rects.style("fill", “blue");
Applies the attributes and styles as a whole!
(similar to jQuery)

15. Data

16. Data are Arrays
(that's not a mistake data is the plural form of datum)
Selections are arrays, data are
arrays. Coincidence? Nope.

17. Data Binding
!
Datum Element

18. Data Joins
Enter Update Exit

19. !
Boiler Plate:
http://jsfiddle.net/blakedietz/72aFH/2/
!
Final Product:
http://jsfiddle.net/blakedietz/zxX98/1/
!
!

20. Divide Your Chart into
Groupings
(charts are like onions)

21. Layers
Axes
Data
Text
Interface
<svg>
<g id="Axes"></g>
<g id="Data"></g>
<g id="Text"></g>
<g id="Interface"></g>
</svg>

22. Under the Covers
(getting intimate with d3)

23. Thanks!
@dietztweetz
@dcryan22