presented by hao Ding

DATA-DRIVEN DOCUMENTS

Mike Bostock

mbostock

The New York Times

San Francisco, CA

http://bost.ocks.org

Jason Davies

jasondavies

Jason Davies Ltd

London, UK

http://www.jasondavies.com

A CHART LIBRARY

Not

Though you can make charts with it

What is D3 ?

1

A MAP LIBRARY

1

Not

Though you can make maps with it

What is D3 ?

ABOUT SVG OR HTML OR CANVAS

Not

Though you can use it with them

What is D3 ?

d3 is a general purpose visualization library

Data ↦ Elements

S1	S2	S3
18	25	19
1	5	17

21	22	14
18	25	19

↦

Web Standards

HTML
CSS
SVG
Javascript

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

HTML

<html>

<body>

<head>

<h1>

<p>

<!DOCTYPE html>
<meta charset="utf-8">
<style>
 body { 
    background: steelblue;
 }
 p { 
    font: italic bold 40px Georgia, serif; 
    color: white; 
 }
</style>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

CSS

SVG

<svg width="100" height="100">
  <circle 
        cx="50" cy="50" r="40" 
        stroke="green" stroke-width="4" 
        fill="yellow" />
</svg>

<svg width="160" height="110">
  <rect width="150" height="100" 
        style="fill:        rgb(0,0,255);
               stroke-width:3;
               stroke:      rgb(0,0,0)" />
</svg>

<svg height="210" width="200">
  <polygon points="100,10 150,190 60,210" 
        style="fill:          lime;
               stroke:        purple;
               stroke-width:  1" />
</svg>

<svg height="210" width="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
        style="fill:        lime;
               stroke:      purple;
               stroke-width:5;
               fill-rule:   nonzero;" />
</svg>

d3 requires deep proficiency in javascript

// -- global variables --
// an integer stored as number
a = 0;
// a string
b = "1";
// an array
c = [1, 2, "3", [4]];
// a boolean
f = false;
// redefining f as a float stored as a number
f = 34.56;

// -- "local" variables --
var name="Alex";
var age=34;

Variables

JAvascript

// an integer stored as number
a = 0;
// a string
b = "0";

a == b
// return ture

a === b
// return false

== & ===

Javascript

// adding, substracting,  multiplying, dividing
var sum = 1 + 3;
sum += 1;
sum++;
sum--;
var division = sum/13;

// modulo
var mod = division % 2;

// typeof operator
typeof(division); // returns string number

// String concatenation
var compoundString = "two " + "words";

Operations

JAvascript

// The familiar if
if (1 == parseFloat("1")) {
    console.log("First if");
} else if (2 == parseFloat("3")) {
    console.log("Else if");
} else {
    console.log("else");
}

// for loops
var output = "";
for (i = 0; i < 10; ++i) {
    output += i + ", ";
}
console.log("For loop: " + output);

Control & Loop

JAvascript

function someFunction(v) {
    if (v < 10) {
        return v;
    } else {
        return v*v;
    }
}

someFunction(5)
// return 5

someFunction(10)
//return 100

Function

JAvascript

// here's what a functor is
function functor(x) {
  return function() {
    return x;
  };
}

Functor

JAvascript

var passed = 3;

var addTo = function () {
    var inner = 2;
    return passed + inner;
};

console.dir(addTo());

var passed = 4;

console.dir(addTo());

Closure

JAvascript

1

var addTo = function (passed) {
    
    var add = function(inner){
        return passed + inner    
    };

    return add;
};

var addTree = new addto(3);

var addFour = new addto(4);

console.log(addThree(1));
console.log(addFour(1));

Manipulate the DOM

#foo        // <any id="foo">
foo         // <foo>
.foo        // <any class="foo">
[foo=bar]   // <any foo="bar">
foo bar     // <foo><bar></foo>

foo.bar      // <foo class="bar">

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

Selectors

CSS provides a handy way to refer to specific elements.

foo, bar {
  font-family: "Menlo", monospace;
  font-size: 48px;
}

Javascript standardized selector

document.querySelector("node")

W3C standardized selector

document.querySelectorAll("node")

A selection is an array of elements pulled from the current document.

d3.Selections

d3.select(selector)

d3.select(node)

d3.selectAll(selector)

d3.selectAll(nodes)

#foo        
foo         
.foo        
[foo=bar]   
foo bar

foo.bar

foo#bar

Selectors

What makes D3's selection BETTER?

Selections.Attr()

// select all <circle> elements
var circle = d3.selectAll("circle");

// set some attributes and styles
circle.attr("cx", 20);
circle.attr("cy", 12);
circle.attr("r", 24);
circle.style("fill", "red");

<svg height="120" width="120">
  <circle/>
</svg> 
<svg height="120" width="120">
  <circle />
</svg> 
<svg height="120" width="120">
  <circle />
</svg>

SELECTIONS.append()

// select the <body> element
var body = d3.select("body");

// add an <h1> element
var h1 = body.append("h1");
h1.text("Hello!");

<body>
</body>

// select the <body> element
var body = d3.select("body");

// add an <h1> element
var h1 = body.style("background", "steelblue")
             .append("h1");

h1.text("Hello!")
  .style("color", "white");

<body>
</body>

SELECTIONS.append()

<body>
  <section></section>
  <section></section>
  <section></section>
</body>

// select the <body> element
var body = d3.selectAll("section");

// add an <h1> element
var h1 = body.style("background", "steelblue")
             .append("h1");
h1.text("Hello!")
  .style("color", "white");

SELECTIONS.append()

Add many elements?

Data ↦ Elements

Data()

// A bar chart, perhaps?
var data = [3, 8, 12, 7, 17];

Data can be numbers

// A scatterplot, perhaps?
var data = [
  {x: 10.0, y: 9.14},
  {x:  8.0, y: 8.14},
  {x: 13.0, y: 8.74},
  {x:  9.0, y: 8.77},
  {x: 11.0, y: 9.26}
];

Data can be objects

Data ↦ Elements

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("cx", x)
    .attr("cy", y)
    .attr("r", 2.5);

Data ↦ Elements

var circle = svg.selectAll("circle")
    .data(data);

Data ↦ Elements

var circle = svg.selectAll("circle")
    .data(data);

circle.enter().append("circle");

Data ↦ Elements

var circle = svg.selectAll("circle")
    .data(data);

circle.enter().append("circle")
    .attr("cx", x)
    .attr("cy", y)
    .attr("r", 2.5);

LAYouts: Force

var graph = {    
    "nodes":[
        {
         "name":"1",
         "rating":90,
         "id":2951},
	{
         "name":"2",
         "rating":80,
         "id":654654
        },
	    ...
	],    
    "links":[
	{
         "source":6,
         "target":5,       
         "label":"publishedOn"
        },
	{
         "source":8,
         "target":5,
         "label":"publishedOn"},
	    ...
	]
}

LAYouts: Chord

 var matrix = [
     [1144, 71, 35, 14, 11, 2, 39],
     [92, 672, 5, 44, 31, 18, 51],
     [246, 58, 144, 19, 11, 43, 56],
     [56, 99, 2, 220, 20, 9, 24],
     [23, 68, 2, 24, 255, 34, 56],
     [0, 0, 0, 0, 0, 206, 0],
     [152, 87, 10, 20, 24, 21, 1456],
 ];

LAYouts: Hierarchy

LAYouts: Pack

LAYouts: CLOUD

Developed by Jason Davies

1. Place the word at some starting point: usually near the middle, or somewhere on a central horizontal line.

3. If the word intersects with any previously-placed words, move it one step along an increasing spiral. Repeat until no intersections are found.

Want an Abstraction?

The End

THANK YOU FOR LISTENING

The slides are made by reveal.js and slides.com

presented by hao Ding

DATA-DRIVEN DOCUMENTS

Mike Bostock

Jason Davies

A CHART LIBRARY

Not

What is D3 ?

A MAP LIBRARY

Not

What is D3 ?

ABOUT SVG OR HTML OR CANVAS

Not

What is D3 ?

d3 is a general purpose visualization library​​

d3 is a general purpose visualization library​​

Data ↦ Elements

↦

Web Standards

HTML

HTML

CSS

SVG

d3 requires deep proficiency in javascript

JAvascript

Javascript

JAvascript

JAvascript

JAvascript

JAvascript

JAvascript

Manipulate the DOM

Selectors

Selectors

Javascript standardized selector

W3C standardized selector

d3.Selections

Selectors

What makes D3's selection BETTER?

Selections.Attr()

SELECTIONS.append()

SELECTIONS.append()

SELECTIONS.append()

Add many elements?

Data ↦ Elements

Data()

Data can be numbers

Data can be numbers

Data can be objects

Data can be objects

Data ↦ Elements

Data ↦ Elements

Data ↦ Elements

Data ↦ Elements

LAYouts: Force

LAYouts: Chord

LAYouts: Hierarchy

LAYouts: Pack

LAYouts: CLOUD

Want an Abstraction?

The End

d3 is a general purpose visualization library

d3 is a general purpose visualization library