A short introduction of D3js

AGENDA
Introduction
Examples
A guide of bar chart
The analysis of source code
The Wealth & Health of Nations
An time series visual design of Adserver svn commit
record
Resources

D3.JS: DATA-DRIVEN DOCUMENTS
JavaScript Library
Open source (BSD license)
developed by Michael Bostock and others at Stanford
University
former work on Protovis Library
from Intro to d3

D3.JS: DATA-DRIVEN DOCUMENTS
not a traditional visualization framework
focus on efficient manipulation of documents based on
data
bind arbitrary data to the DOM
apply data-driven transformations to the document
functional/declarative style
support for interaction and animation
you have to do the graphical representation yourself!
but has helpers for SVG generation
from Intro to d3

SELECTIONS
d3.selectAll("p")
.style("color", "white");

operate on arbitrary sets of nodes called selections
W3C Selectors API or Sizzle fallback

DYNAMIC PROPERTIES
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d, i) { return d + "px"; });

bind data to a selection
apply functions to styles, attributes and other
properties
a lot of built-in reusable functions available
bound data available as first argument
you can omit the data operator the second time!

ENTER AND EXIT
var p = d3.select("body").selectAll("p") // Update…
.data([4, 8, 15, 16, 23, 42])
.text(String);
p.enter().append("p") // Enter…
.text(String);
p.exit().remove(); // Exit…

enter: selects all data elements without a DOM
representation
exit: selects all DOM elements without data
common pattern
perform only necessary modifications

SUBSELECTIONS
d3.selectAll("ul")
.data(questions) // an array of questions
.selectAll("li")
// a nested array of responses
.data(function(d) { return d.responses; })
// the text of the response
.text(function(d) { return d.text; });

generate a subselection by calling selectAll on an
existing selection
maintains the hierarchical structure

TRANSITIONS
// fade background from white to black in 1s
d3.select("body").transition()
.duration(1000)
.style("background-color", "black");

with d3.js they are easy!
various tweening functions
interpolation of basic types, numbers and numbers in
strings (e.g. "15px")

OBAMA'S 2013 BUDGET
PROPOSAL

economy (mpg) cylinders displacement (cc) power (hp) weight (lb) 0-60 mph (s)
8.0
450
45 220 5,000 24

7.5
200
40 400
22
4,500
7.0
180
35
350
20
6.5 160
4,000
30

6.0 300 140
18

25 3,500
120
5.5
250 16

20 100
5.0 3,000

80 14
200
15
4.5
60 2,500
12
10 150
4.0
40

2,000 10
5 3.5
100 20

0 3.0 0 8

Agglo merativeCluster

lity
Co mmunityStructure

L inkD e nne ssCe ntra
O pe rato pe rato rL ist

te r
Stac ando m L ayo u t

HierarchicalClus
O pe rato rSw e

ke r
No d

Span e stPaths t
Tre e M

Sho rt lo wMinCu
Rad

So rtO pe ratoh
Ind Icicle cte d L ayyo ut t

ke dA

nce
Visualization
R

B an
Fo ndr ck le L o u ut

e
O

Tre e
MaxF istance
e L in

rSe que nc

Me rge Edg
e nt
rce o g ing ay te

ialTr Pie L ay o ut
De Pa c R o
Cir

r
que

Ob mbixInte to r lato r r
O pe ra

atio

Int te In te rp o lato
re aL ayo ut

Nu atr o la rpo ato
apL a
ed

kTre L ayyo ut

ning
cle
Bu

Dir ra L a o u r

e I la to r
ee

ct Inte te rpo to r
gl o o la lato
Be twe

nSe
e ctR

ol
nd

Tre e L ay o ut
e

r
nt to r
L

to
Tre L ay o ut

Dao lo rIn te rp
ayo u
e L a o ut
Sta

itc

Reo int ctInrInte o la
yo utt
le d A

la
e La ou

to r

ctio
Funsing

er r
Cir ge ay
ck R

r

po
rp
Asp

C rayIn
y
m

M e rp te
Ed xisL

ou

an rp rp
e d ad

Ea
t
Ar ial L a

P je e
Ar
e a L a be o r

le
t

Se cheuse le l lab
L a be le
G

n
be le r
ra

l u
Fis

izatio

Pa ara e d
IO
p

le r
hD

cluste r
he

itio nc r
Vi tan

pe Filtete r

ns ue ule
P ch
r

e
graph
sib c
t

is
ye
er en

ra

IS

Tra q d
r

o ptim
ilit e F
Tre

n
o n nEv rte

te
t
Pr Sha Siz

y il

lay
op p eE eF iti io ve r

o la

S
e r e E nc ilte ns sit on e

o ut
r
Traran e n rs tC rt

e rp
tyE nc o
Co n o de r T we rte Te x nv e r
lo En co de r

int
Fis rEn co de r T v e te d Co rte
o nlimi hML nv e rte r

la
he co de r

b
ye C e p o ve

el
Bif D de r D ra aC o n

cs
o c D isto r G at NC

analyti
alD isto rtio ID SO

filt
isto rtio n ld a

op
Le en J Fie he m

e
ge rtio n

r
co s ataaSc t

e ra
L e ndR n de rte
r D at e ce
g e an D ataS o ur
nd ge r ve

to r

e
L e g Ite m dis on D taS able

at
Visu
en to c Da taT til

im
aliz d rtio
a
T tio n Da taU

an
n Da
Se leo o ltip Ev e nt le g rite
ctio Ev e n ySp
Dat nEv t en
d Dirt e Sprite
aEv e nt L in
e nt
Tre e eve
Build nts
e ta lay
Scale Tre er da disp
Bindin
g
Shape R
e nde re fle x
IRe nd r
Edge Re nd e re r v is
e re r re nde r
Arro wType
physics
Node Sprite data
EdgeSprite
DataSprite fla
re
DataList
Data
ntro l
To o ltipCo ntro l
nCo
Se le ctiomCo ntro l ls
o ol ro
PanZo ICo ntr o l co nt
ntr
e rCo ntro l
Ho v dCo
n ro l
Expa agCo ntlL ist
Dr o ntro o l
C tr qu
Co n tro l is er
kCo
n ax y
Clic

TUTORIALS
A GUIDE OF BAR CHART

BASE COMPONENT
HTML
CSS
Javascript
SVG

SVG
<svg width="50" height="50">
</svg>

SVG
<svg width="50" height="50">
<circle cx="25" cy="25" r="22"
fill="blue" stroke="gray" stroke-width="2"/>
</svg>

SIMPLE SHAPES
<rect x="0" y="0" width="500" height="50"/>

SIMPLE SHAPES
<circle cx="250" cy="25" r="25"/>

SIMPLE SHAPES
<ellipse cx="250" cy="25" rx="100" ry="25"/>

SIMPLE SHAPES
<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

SIMPLE SHAPES
<text x="250" y="25">Easy-peasy</text>

Easy-peasy

SIMPLE SHAPES
<text x="150" y="50" font-family="sans-serif"
font-size="50" fill="gray">Easy-peasy</text>

Easy-peasy

SIMPLE SHAPES
<circle cx="25" cy="25" r="100"
fill="yellow" stroke="orange" stroke-width="5"/>

SIMPLE SHAPES
<circle cx="25" cy="25" r="22" class="pumpkin"/>

.pumpkin {
fill: red;
stroke: orange;
stroke-width: 5;
}

SIMPLE SHAPES
<rect x="100" y="100" width="80" height="80" fill="purple"/>
<rect x="120" y="105" width="80" height="80" fill="blue"/>
<rect x="140" y="110" width="80" height="80" fill="green"/>
<rect x="160" y="115" width="80" height="80" fill="yellow"/>
<rect x="180" y="120" width="80" height="80" fill="red"/>

SIMPLE SHAPES
<circle cx="125" cy="80" r="60" fill="rgba(128, 0, 128, 1.0)"/>

PAGE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// Your beautiful D3 code will go here
</script>
</body>
</html>

FIRST
d3.select("body").append("p").text("New paragraph!");

WITH DATA
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p");

WITH DATA
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");

WITH DATA
console.log(d3.selectAll("p"))

WITH DATA
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) { return d; });

BEYOND TEXT
.style("color", "red");

.style("color", function(d) {
if (d > 15) { //Threshold of 15
return "red";
} else {
return "black";
}
});

PLAY WITH DATA
var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
24, 18, 25, 9, 3 ];

d3.select("body").selectAll("div")
.data(dataset) // <-- The answer is here!
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
});

MAKING A BAR CHART
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

MAKING A BAR CHART
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 20)
.attr("height", 100);

MAKING A BAR CHART
.attr("x", function(d, i) {
return i * 21; //Bar width of 20 plus 1 for padding
})

MAKING A BAR CHART
.attr("height", function(d) {
return d;
});

MAKING A BAR CHART
.attr("y", function(d) {
return h - d; //Height minus data value
})
.attr("height", function(d) {
return d * 4; //Just the data value
});

MAKING A BAR CHART
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});

MAKING A BAR CHART
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadd
ing) / 2;
})
.attr("y", function(d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");

THE WEALTH & HEALTH OF NATIONS

DATA
[{
"name": "Angola",
"region": "Sub-Saharan Africa",
"income": [
[1800, 359.93],
[1820, 359.93],
[1913, 556.12],
[1950, 3363.02],
[1951, 3440.9],
[1952, 3520.61],
[1953, 3598.81],
[1954, 3450.82],
[1955, 3672.08],
[1956, 3549.04],

TRANSITION
// Start a transition that interpolates the data based on year.
svg.transition()
.duration(duration)
.ease("linear")
.tween("year", tweenYear())
.each("end", enableInteraction);

// Tweens the entire chart by first tweening the year, and then the da
ta.
// For the interpolated data, the dots and label are redrawn.
function tweenYear(start, end) {
start = start || 1800;
end = end || 2009;
return function() {
var year = d3.interpolateNumber(start, end);
return function(t) { displayYear(year(t)); };
}
}

INTERPOLATE DATA
// Interpolates the dataset for the given (fractional) year.
function interpolateData(year) {
return nations.map(function(d) {
return {
name: d.name,
income: interpolateValues(d.income, year),
//...
};
});
}

// Finds (and possibly interpolates) the value for the specified year.
function interpolateValues(values, year) {
var i = bisect.left(values, year, 0, values.length - 1),
a = values[i];
if (i > 0) {
var b = values[i - 1],
t = (year - a[0]) / (b[0] - a[0]);

DATA
"total": [
[1303115788, 2],
[1303182050, 6],
[1303194454, 18],
[1303210228, 28],
[1303267612, 40],
//...
],
"qwang": [
[1335869108, 0],
[1335869108, 9],
[1335869340, 2],
[1335954367, 33],
//...

LAYOUT
force = d3.layout.force()
.gravity(.5)
.charge(function(d, i){ return i ? 0 : -20; })
.nodes(users)
.size([width, height]);

force.start();
force.on("tick", function(e) {
var q = d3.geom.quadtree(users),
i = 0,
n = users.length;

while (++i < n) {
q.visit(collide(users[i]));
}

dot.selectAll("g")
.attr("transform", function(d) { return "translate(" + d.x + ", "

COLLISION
function collide(node) {
var rr = r(node),
nx1 = node.x - rr,
nx2 = node.x + rr,
ny1 = node.y - rr,
ny2 = node.y + rr;
return function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== node)) {
var x = node.x - quad.point.x,
y = node.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
rr = r(node) + r(quad.point);
if (l < rr) {
l = (l - rr) / l * .5;
node.x -= x *= l;
node.y -= y *= l;
quad.point.x += x;
quad.point.y += y;

RESUME
function displayDay(time_pos) {
dots.data(interpolateData(time_pos)).call(position).sort(order);
label.text(secondtoday(time_pos));
force.resume();
}

RESOURCES
D3js Wiki
Paper:D3: Data-Driven Documents
Mike Bostock
Visual.ly
David McCandless: The beauty of data visualization
GapMinder - for a fact-based world view

A short introduction of D3js

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie A short introduction of D3js

Ähnlich wie A short introduction of D3js (20)

Mehr von dreampuf

Mehr von dreampuf (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

A short introduction of D3js