Intro to D3

Created by Victor Mejia

about me

Freelance UI Engineer and Instructor

I ♥ Coding and Teaching

I ♥ JavaScript (Angular, Ionic, D3, Firebase)

Tweeting @_victormejia

Coding @victormejia

Blogging @ victormejia.me

what is D3?

Data

Driven

Documents

Created by Mike Bostock

efficient manipulation of documents based on data

not a just a charting library, it's so much more

let's focus on the word visualization

check out what

D3 can do

Awesome Visualizations

D3 Gallery

D3 out in the wild:

Emmet Sublime Package

California Drought

Simpson's Paradox

setosa.io

the plan

• svg intro
• selections
• scales
• axis
• transitions
• basic tooltips

svg intro

svg

<svg width="500" height="300" class="light-border"></svg>

rect

<rect width="40" height="200" x="230" y="100" fill="#1e8fc6"></rect>

circle

<circle cx="150" cy="100" r="80" fill="#514f73"></circle>

ellipse

<ellipse cx="250" cy="150" rx="50" ry="10" fill="#cc2309"></ellipse>

text

<text x="250" y="150" text-anchor="middle">Hello SVG!</text>

line

<line x1="150" y1="200" x2="450" y2="300" stroke-width="9" stroke="#2d323d"></line>

polyline

<polyline points="20,200 110,50 320,200 470,90" stroke="#514f73" stroke-width="5" fill="none"></polyline>

path

<path d="M 400 100 L 100 200 L 200 100 z" fill="#514f73"></path>

check this out too

and this

let's build a bar chart

Top GitHub Languages for 2014

var data =[{"lang":"JavaScript","value":"791535"}
{"lang":"Java","value":"561366"}
{"lang":"Ruby","value":"479525"}
{"lang":"CSS","value":"354354"}
{"lang":"PHP","value":"346761"}
{"lang":"Python","value":"317085"}
{"lang":"C","value":"289880"}
{"lang":"C++","value":"164722"}
{"lang":"C#","value":"123509"}
{"lang":"Objective-C","value":"119345"}
{"lang":"Shell","value":"99555"}
{"lang":"Perl","value":"73431"}
{"lang":"CoffeeScript","value":"43541"}
{"lang":"R","value":"42070"}
{"lang":"Go","value":"38130"}
];
          

Data source: GitHub Archive

Setup

you only need d3.js

+

some styling

Margin Convention

// (1) Select element
var el = d3.select('#chart'),

// (2) Grab element's dimensions
elWidth = parseInt(el.style('width'), 10),
elHeight = parseInt(el.style('height'), 10),

// (3) Declare margins for axis
margin = {top: 20, right: 10, bottom: 80, left: 40},

// (4) calculate width and height used for scaling
width = elWidth - margin.right - margin.left,
height = elHeight - margin.top - margin.bottom;

// (5) append svg element with added margins and group element inside
var svg = el.append("svg")
  .attr("width", elWidth)
  .attr("height", elHeight)
.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

// now in our code we can just reference width and height
          

Selections

d3.select

var el = d3.select('#chart');

// append an svg element
var svg = el.append('svg');

// append returns a new selection
svg.attr(...)
          

One element selected, one appended

d3.selectAll

// with many selected, can change all elements
var rect = svg.selectAll('rect')
                .attr(..);
          

Let's talk about data

Data are arrays

var data = [1, 3, 5, 7, 9];

var meetups = [
  { name: 'AngularJSOC', members: 286 },
  { name: 'OCMongoDB'  , members: 326 }
];
          

Data are mapped to elements

var selection = svg.selectAll('rect')
                  .data(data); // this creates empty placeholders

// appending to the enter selection creates new elements
selection
  .enter()
  .append('rect')
    .attr(/*...*/)
          

We can chain

// create viz
var selection = svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
    .attr({
      x: function (d, i) { ... },
      y: function (d, i) { ... },
      height: function (d) { ... },
      width: ...,
      fill: ...
    });
          

Enter, Update & Exit

Three Little Circles

Thinking with Joins

General Pattern

//create visualization
var rect = svg.selectAll('rect').data(data);

// transition new data
rect.enter()
  .append('rect')
    .attr(...)

// remove any data not needed
rect.exit().remove();

          
        

Enter

Update

Exit

Things to remember

source: Thining With Joins

Some useful

d3.max

var values = [2, 10, 3];
var max = d3.max(values); // 10

// if array of objects...
var maxRepoCount = d3.max(data, function (d) {
  return d.value;
});
          

d3.extent

var values = [3, 1, 5, 8, 9, 2];

var max = d3.extent(values); // [1, 9]
          

Scales

d3.scale

var heightScale = d3.scale.linear()
  .domain([0, d3.max(data, function (d) { return d.value})])
  .range([height, 0]);

// ordinal scales for discrete data
var xScale = d3.scale.ordinal()
  .domain(data.map(function (d) { return d.category; }))
  .rangeRoundBands([0, width], 0.1); // useful for barcharts
          

Use scales for rect's attr

               
selection
  .attr({
    x: function (d, i) {
      return xScale(d.lang)
    },
    y: function (d, i) {
      return yScale(d.value);
    },
    height: function (d) {
      return height - yScale(d.value);
    },
    width: xScale.rangeBand(),
    fill: fillColor
  })
                
             

demo

Punchcard code along: scales

Axis

d3.svg.axis

// create axis
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom") // place label below tick
  .tickPadding(10); // padding b/n tick and label

var xAxisGroup = svg.append("g")
  .attr({
    class : 'axis',
    transform: 'translate(' + [0, height] + ')'
  }).call(xAxis);

          

axis demo

Punchcard code along: axis

Punchcard code along: display data

Transisitions

General Pattern

// (1) initial attributes
var r = svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
    .attr(initialAttrs);

// (2) transition to final state
r.transition()
  .delay(function (d, i){
    return d * 25; // delay each element
  })
  .ease("linear") // also "elastic", "bounce", etc.
  .duration(700) // entire transition
  .attr(finalAttrs);
          

transition demo

transition demo 2

Punchcard code along: transitions

Custom Tooltips

selection.on(type, listener)

var r = svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
    .attr(...)
    .on('mouseover', handleMouseover);

function handleMouseover(d, i) {
  // this: element moused over
  // d: datum
  // i: index
}
          

tooltip.css

.tooltip {
  visibility: hidden;
  background-color: #39393d;
}

.tooltip text {
  fill: #fff;
  font-size: 12px;
  shape-rendering: crispEdges;
}
          

add tooltip to svg

var tooltip = svg.append('g').attr({class: 'tooltip'});

tooltip.append('rect').attr({ height: '30', width: '100' });

tooltip.append('text').attr({ x: 10, y: 20 }); // relative to group element
          

event handlers

function handleMouseover(d, i) {
  // calculate x, y (add code to check for boundaries)
  var pos = { x: xScale(d.lang), y: yScale(d.value) - 35};

  var tooltip = svg.select('.tooltip')
    .attr('transform': 'translate(' + [pos.x, pos.y + ')');

  tooltip.select('text').text('Repos: ' + d.value);

  tooltip.style('visibility', 'visible');
}

function handleMouseout(d, i) {
  svg.select('.tooltip').style('visibility', 'hidden')
}
          

tooltip demo

tooltip demo 2

Some extra Resources

the end :)

© 2014 PEANUTS Worldwide LLC