D3.js

Data-Driven Documents

April 2015

Presented by Steven Salat

# Wat? * JavaScript library for manipulating documents based on data * Emphasis on web standards — not proprietary frameworks * Bind data to the DOM, if data changes ➔ DOM changes * Open source BSD license, code is on [GitHub](https://github.com/mbostock/d3)
# When? You can use D3 for displaying data * Charts * Graphs * Tables * Visualizations * Transitions
# Where * D3 supports *modern* browsers * This means IE 9+ * There are work-arounds for older browsers
# How? - Selectors * Selectors are similar to jQuery/CSS * Supports chaining similar to jQuery * Assign a function, not just a constant ```js d3.selectAll("tr").style("color", function(d, i) { return i % 2 ? "#fff" : "#eee"; // toggle between white/gray rows }); ``` Yes D3 can essentially replace jQuery entirely. Read more about selection [here](http://bost.ocks.org/mike/selection/)
# How? - Data Binding * Select all `p` elements * Bind array of numbers * Each `p` will be given a number * Set the font size of each `p` based on it's number ```js d3.selectAll("p") .data([14, 8, 15, 16, 12, 13]) .style("font-size", function(d) { return d + "px"; }); ``` * Data is not a prop of selection, but a prop of its elements * Similar to jQuery.data() function but better...
# Update, Enter, Exit The common pattern is to separate selections into 3 parts ```js // Update - Matching element for a given datum, update DOM var p = d3.select("body").selectAll("p") .data(dataArray) .style("font-size", function(d) { return d + "px"; }); // Enter - No matching element for a given datum, add to DOM p.enter().append("p") .style("font-size", function(d) { return d + "px"; }); // Exit - No matching datum for a given element, remove from DOM p.exit().remove(); ``` * Matches are determined by the key function or the array index if no key function is defined * See examples [here](http://bost.ocks.org/mike/selection/#enter-update-exit)
# Transitions * Special selection where the operators apply smoothly over time * Creates a tween starting from the DOM value and ends on the specified value ```js .select("body") .style("color", "green") // make the body green .transition() .style("color", "red"); // then transition to red ``` Examples with duration and ease [here](http://xaedes.de/dev/transitions/)
# Layouts * [Tree](https://github.com/mbostock/d3/wiki/Tree-Layout) * Node-link diagram to display heirarchy * [Cluster](https://github.com/mbostock/d3/wiki/Cluster-Layout) * Node-link diagrams that place leaf nodes of the tree at the same depth * [Force](https://github.com/mbostock/d3/wiki/Force-Layout) * Each node has a charge to specify repulsion * Psuedo-gravity keeps nodes in visible viewport * Friction approximates velocity decay at each tick * [Histogram](https://github.com/mbostock/d3/wiki/Histogram-Layout) * Shows the distribution of data by grouping discrete data points into bins
# External Data * [XHR](https://github.com/mbostock/d3/wiki/Requests) wrapper like jQuery * Parsing is available for many formats * CSV * JSON * HTML * TSV * XML * Text
# Extras * Parsing and formatting dates * Various was to represent [color spaces](http://bl.ocks.org/mbostock/3014589) * RGB * HSL * HCL * Lab ```js var format = d3.time.format("%Y-%m-%d"); format.parse("2011-01-01"); // returns a Date format(new Date(2011, 0, 1)); // returns a string ``` ```js var red = d3.rgb(200, 0, 0); var brightRed = d3.rgb(200, 0, 0).brighter(); ```
# Demos * [bl.ocks.org](http://bl.ocks.org/mbostock)