Advanced D3 Charting

Blake Dietz Daniel Ryan

What is ?

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.

Why am I here?

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

Getting Started

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

Margin Conventions

Coordinate System Quirksx axis

y ax

is

Scales

Linear vs Ordinal

Range Interval

.rangePoints()

.rangeBands()

.rangeBand()

CSS for SVG/* typical CSS */ div { background: blue; } !/* SVG CSS */ rects { fill: blue; shape-rendering: crisp-edges; }

SVG elements use unique CSS

styles

Selections

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)

Data

Data are Arrays (that's not a mistake data is the plural form of datum)

Selections are arrays, data are arrays. Coincidence? Nope.

Data Binding !Datum Element

Data Joins

Enter Update Exit

!

Boiler Plate: http://jsfiddle.net/blakedietz/72aFH/2/

!

Final Product: http://jsfiddle.net/blakedietz/zxX98/1/

!

!

Divide Your Chart into Groupings

(charts are like onions)

Layers

Axes

Data

TextInterface

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

Under the Covers (getting intimate with d3)

Thanks!@dietztweetz @dcryan22