D3 = Data-Driven Documents
d3.js is a data visualization framework in JavaScript for the web. It leverages open web standards such as DOM, CSS and SVG.
Processing.js Raphaƫl |
d3.js | Google Charts Highcharts |
W3C Selector API.
d3.select('div')
d3.select('.circle')
d3.select('#vis')
d3.select('input[type=text]')
d3.select('#vis div')
d3.select('p ~ .help')
Input data is an array of arbitrary values, such as numbers, strings or objects.
var series = [1,2,3,4,5,6]; d3.selectAll('div').data(series);
By default, data is joined to elements by index. An optional key can be passed in to preserve object constancy across transitions.
Upon data join, d3 generates three virtual selections: enter, update and exit.
var series = [{w: 10, h: 20}, {w: 30, h: 40}]; d3.selectAll('div') .data(series) .style('width', function(d,i){ return d.w + 'px'; }) .style('height', function(d){ return d.h + 'px'; })
selection.enter().append('circle') .attr('cx', toPx) .attr('cy', toPx) .attr('r', 10)
selection.exit() .transition() .duration(800) .attr('cx', toPx) .attr('cy', toPx) .attr('r', 80) .remove()