Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
d3.js
tgolen
March 20, 2012
Education
0
170
d3.js
An introduction to d3.js
tgolen
March 20, 2012
Tweet
Share
Other Decks in Education
See All in Education
matleenalaakso
1
9.9k
ceejeanpiaget
0
380
willmaehon
0
110
sat
1
200
agonagasukujira
1
120
ayanaru512
0
120
udaykondreddy
1
150
kaityo256
6
3.1k
birdhiro
0
240
signer
0
330
matleenalaakso
0
270
matleenalaakso
0
10k
Featured
See All Featured
thoeni
4
550
maltzj
500
36k
jasonvnalue
82
8k
denniskardys
220
120k
caitiem20
308
17k
danielanewman
1
470
brettharned
93
3k
stephaniewalter
260
11k
morganepeng
17
1.1k
swwweet
206
6.8k
searls
204
35k
frogandcode
127
20k
Transcript
d3.js an introduction
What is it? A JavaScript library for manipulating documents based
on data.
What can it do? • Graphs • Charts • Tables
• Transformations • Interactions • SVG • HTML • Anything
Examples • http://mbostock.github.com/d3/ex/calendar. html • http://mbostock.github.com/d3/ex/chord.html • http://www.visualizing. org/visualizations/urban-water-explorer/
Simple Code Example https://github.com/Nodeable/web-client/blob/master/static/js/4_x/nodeable/views/desktop/widgets/hashtags.js tagCloud.selectAll( '.tag') .data(self.data) .enter().append( 'a') .attr('class',
function(d){ return 'tag height_' + Math.round (tagHeight(d.percent)); }) .attr('title', function(d){ return d.value; }) .style('font-size', function(d){ return Math.round(tagHeight(d. percent)) + 'px'; }) .text(function(d){ return d._id; });
Why should you use it? • You want to visualize
data in unique ways. • You thirst for adventure and challenge. • You don't want to use canned graphs.
Why shouldn't you use it? • It has an extremely
steep learning curve. • You can settle for more simple solutions (highcharts).
Resources d3.js - http://mbostock.github.com/d3/
Questions? Tim Golen Web Developer - Nodeable.com @tgolen http://www.golen.net