Columbia Creates:

Introduction to D3.js

October 14, 2014

P V

What does D3.js provide?

Representation

Transformation

So how do D3.js visualizations work?

Construct it on existing standards:

HTML
SVG

Benefits of using HTML & SVG

Already established, familiar standard
Integrate with existing systems
Use other tools on it (ex. chrome dev tools)

Goal of D3.js?

Maintain mapping

Data points -> visual elements

Work Canvas

An HTML page

bit.ly/1pFk8l9

<!DOCTYPE html><html><head>  <title>D3.js Demo</title>  <style> /* CSS goes here */ </style>  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script></head><body>  <p>D3.js is awesome!</p>   <p>This is another paragraph.</p>
  <script> /* JS goes here */ </script>
</body></html>

Selectors

Take existing elements and modify them

d3.selectAll('p').style('color', 'green');

Selectors

They can also take dynamic, functional values


d3.selectAll('p').style('color', function(){
  return 'rgb( 0, '+ Math.floor(Math.random() * 360) + ', 0)';
});

Creating new elements?

Surprise: no primitive function for that in D3.js!

Instead: data joins.

Data Joins

Select the elements you WANT to work on
Bind it to the data.

d3.selectAll('p').data([3, 42, 69, 101])

Data Joins

3 selections to choose from:

.enter(), .update(), .exit()

Data Joins


var p = d3.selectAll('p')
  .data([3, 42, 69, 101])
  .style('color', 'green');

p.enter()
  .append('p')
  .text(function(d, i) {
    return 'My '+ i + 'th favorite number is '+ d;
  });

Transitions

Transformations -> animated transition

(aka why D3.js looks so cool in action)

Transitions

Select your elements
Transition!


d3.selectAll('p')
  .transition()
  .duration(3000)
  .delay( function(d, i) { return i*3000; })
  .style('font-size', '40px');

SVG

Similar in structure to HTML


<svg width="200" height="200">  <rect x="50" y="5" width="20" height="40" rx="3" ry="3" />  <line x1="5" x2="90" y1="10" y2="90" stroke-width="3" stroke="green" />  <g stroke="purple" fill="blue" stroke-width="5" >    <circle cx="150" cy="30" r="40" />    <circle cx="150" cy="60" r="40" />
    <circle cx="150" cy="90" r="40" />
  </g></svg>

Note:

Position & size are SVG attributes

Styles may be defined in CSS

SVG Canvas Creation

To start, create the SVG canvas via D3.js


var w = 500,  h = 100;
var svg = d3.select('body')  .append('svg')  .attr('width', w)  .attr('height', h);

Let's Actually Make a Visualization

Proposed data set:

Sleep hours per 24-hour intervals over a week



var sleepData = [ 8, 7, 8, 8, 9, 12, 9 ];

Bar chart time!

Let's Actually Make a Visualization

Add to the created SVG canvas as rectangles


svg.selectAll('rect')
  .data(sleepData)
  .enter()
  .append('rect')
  .attr('x', function(d, i) {
    return i * (w / sleepData.length);
  })
  .attr('y', function(d) {
    return h - (d * 9);
  })
  .attr('width', w / sleepData.length - 2)
  .attr('height', function(d) {
    return d * 9;
  });