Introduction to d3 – using Tributary! – Essentials

View Github Repository Open presentation in a new window

ariaz

See all presentation from ariaz

Introduction to d3 – using Tributary! – Essentials

0 2

Intro-to-d3-using-tributary

A quick intro to d3 (container, data binding, scales and transitions) using tributary

On Github ariaz / Intro-to-d3-using-tributary

Introduction to d3

using Tributary!

 

 

 

by Ariel Azoulay

@ariazou

@Outbrain

What is d3?

 

What is it for?

 

  • A Visualization Tool?
  • A tool for binding data to the DOM!
  • Allows application of data driven transformations
  • Very Flexible, Fast, Functional! (with a bit of low-level overhead)

The building blocks of d3:

 

  • THE DATA: usually JSON
  • THE CODE: Javascript
  • THE STRUCTURE: HTML (using lots of SVG)
  • CSS: Give it style

Essentials

 

Setting up a svg container:

var width = 800, 
	height = 800;

var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

Essentials

Given some JSON Data:

var people = [{
            "name": "John",
            "city": "Boston"
        },
        {
            "name": "Peter",
            "city": "New York"
        }];

Bind it to the document with d3:

d3.select("body")     // Top container
  .append("ul")        // Data container
  .selectAll("li")    // Element name
  .data(people)        // The JSON
  .enter()                // And bind it!
  .append("li")         
  .text(function(d){return d.name + " is from  " + d.city}) // Set Properties
  .style('color', 'red');

And you will get:

  • John is from Boston
  • Peter is from New York

Another example (but let's use SVG!):

var width = 600, height = 800;

svg = d3.select("svg").attr("width", width).attr("height", height);

var data = [{x:205, y:200}, {x:200, y:400}, {x:400, y:200}, {x:408, y:400}];

var squares = svg
  .selectAll('rect')
  .data(data)
  .enter()
  .append('svg:rect');

squares
    .attr('rx',50)
    .attr('ry',20)
    .attr('x', function(d){return d.x})
    .attr('y', function(d){return d.y})
    .attr('width', 100)
    .attr('height',100)
    .attr('stroke','black')
	 .style("fill", function(d) { return "#FF0000";});
Let's see it live!!

d3 Scales

  • It is often necessary to bind data values to pixel sizes
  • I.e. Suppose our data is from 0 to 1, how do we project it to pixels in our SVG canvas?
  • d3 provides scales for this:
  • Consder the four squares from the previous example in the unit square:
var n = 2;
var data = [];

for (var i = 0; i < n; i++){
  for(var j = 0; j < n; j++){
    var point = {x:(i+1)/(n+1), y:(j+1)/(n+1)};
    data.push(point);
  }
}

Now we create X and Y scales:

x_scale = d3.scale.linear()
   .range([0,width])
   .domain([0,1]);

y_scale = d3.scale.linear()
   .range([height,0])
   .domain([0,1]);
Check it:

d3 Transitions

We'll triger a transition given an event

var n = 2;
squareWidth = 200/n, squareHeight = 200/n;
zoomIn = 100/n;
//transitions
squares
      .on("mouseover", function() {
          d3.select(this).transition()
          .attr('width', squareWidth + zoomIn)
          .attr('height', squareHeight + zoomIn)
	      .attr('rx',100)
          .attr('ry',100)
          .delay(0)
          .duration(50)
      })
      .on("mouseout", function() {
          d3.select(this).transition()
          .attr('width', squareWidth)
          .attr('height', squareHeight)
	      .attr('rx',n/2)
          .attr('ry',n/2)
          .delay(0)
          .duration(50)
      });
Go Live!

Applications?

Investigate patterns and Illusions

rose by @enjalot

Math / Engineering / Learning?

Animated Bézier Curves by @jasondavies

t=0.57P0P1t=0.57P0P1P2t=0.57P0P1P2P3t=0.57P0P1P2P3P4

Or.. Data Visualization

D3 Show Reel by @mbostock

The End

Sources

  • http://d3js.org (Visualizations, the library)
  • http://enjalot.com/ (Illusions, Tributary)
  • http://lab.hakim.se/reveal-js/ (Slide Engine)
◄ ► ▲ ▼