Visualising data
with
d3.js

Sadique Ali

@sdqali

Credits

Mike Bostock

d3 ?

d3.js = visualisations

d3 = Data Driven Documents

Data → Elements

No new representation

Construct DOM from data

Existing representations

HTML
SVG

Well understood

SVG?

Yes!

This

    
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500">
    <circle cx="480" cy="250" r="200" fill="steelblue">
    </circle>
</svg>

Renders This

Enough Talk!

Show me the Code!

Run this:


python -m SimpleHTTPServer 7654

You can thank me later!

Bar Charts

01-barchart.html

Deaths in traffic accidents

It has got nothing
to do with
the fact that
I am a pedestrian :-)

Let's see
what is
under the cover

 
<div id="barchart">
</div>

This is where we draw! 

 
var data = [820, 883, 903, 836,
  915, 981, 892, 761, 858, 757, 363];

That's the data! 

 var chart = d3.select("#barchart")
   .append("svg")
   .attr ("class", "chart")
   .attr ("width", 1000)
   .attr ("height", 20 * data.length);

Let's build an SVG!

Selectors

  • select
  • selectAll

Use CSS selectors

 
 #foo        //<any id="foo">

 foo         //<foo>

 .foo        //<anyclass="foo">

 [foo=bar]   //<any foo="bar">

 foo bar     //<foo><bar></foo>

Selections are Powerful

We will see...

 
selection.append("svg")

Appends an SVG 

 
selection.attr("width", 1000)

Sets attributes

Attributes could be anything

  • radius
  • x, y coords
  • text
  • classname
  • etc.
 
   chart.selectAll ("rect")
     .data (data)
     .enter ()
     .append ("rect")
     .attr ("width", function (d) {
        return d;
     })

Let's simplify that!

 
var rectangles = chart.selectAll("rect")
                      .data(data)

rects correspond to data

data provides enter and exit

 
var rectangles = chart.selectAll("rect")
                      .data(data)
rectangles.enter()
          .append("rect")

append on enter() adds missing elements

 
var rectangles = chart.selectAll("rect")
                      .data(data)
rectangles.enter()
          .append("rect")
          .attr("y", function(d, i) {
                           return i * 20;
                      })

Elements are bound to data

Lets revisit this!

Hard coded values

Heights and Widths

Size of dataset

Enter scales

Domain → Range

Qunatitative Scales

 
var x = d3.scale.linear()
    .domain([12, 24])
    .range([0, 720]);

x(16); // 240

Linear scale: Translate and Scale 

 
var x = d3.scale.sqrt()
    .domain([12, 24])
    .range([0, 720]);

x(16); // 268.9056992603583

sqrt - exponential
Useful for circles 

 
var x = d3.scale.log()
    .domain([12, 24])
    .range([0, 720]);

x(16); // 298.82699948076737

log - you get the idea

Interpolation

 
var x = d3.scale.linear()
    .domain([12, 24])
    .range(["steelblue", "brown"]);

x(16); // #666586

Isn't that cool?

Ordinal Scales

 
var x = d3.scale.ordinal()
    .domain(["A", "B", "C", "D"])
    .range([0, 10, 20, 30]);

x("B"); // 10

Explicit mapping

d3.scale.category20

Barchart, redone!

02-barchart2.html

Using scales

That still needs improvement

Axes
Labeling

Axes

Labeling for scales

Barchart, with Axes!

03-barchart3.html 

 
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

Create an Axis 

 
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

Append it to g

Rules

Barchart, with Axes and Rules

04-barchart4.html 

 
var yRule = chart.append("g")
  .selectAll(".rule")
  .data(xScale.ticks(20))
  .enter()
  .append("g");

Create g using Ticks 

 
var yRule = chart.append("g")
  .selectAll(".rule")
  .data(xScale.ticks(20))
  .enter()
  .append("g");
yRule.append("line")
  .attr("y2", height - 2 * margins.bottom);

Draw a line for each tick

Let's build something

Objective

Scatterplot

Scale

Axes

Rules

What is a scatterplot?

This

Resources

scatterplot.html

bowlers.json

 
{
 "cap"=>1, "name"=>"Amar Singh",
 "debut_year"=>1932,
 "series"=>"india in england, 1932",
 "winner"=>"eng",
 "performance"=>{
      "Mat"=>"1", "Runs"=>"56",
      "HS"=>"51", "BatAv"=>"28.00",
      "100s"=>"0", "50s"=>"1",
      "W"=>"4", "BB"=>"2/75", "Ct"=>"0"
      "BowlAv"=>"39.75", "5w"=>"0",
  }
}
   
 
      d.name
   
 
      d.country
   
 
      d.performance.BowlAv

Questions?

Thank You

I need feedback!