Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
d3.js
Search
tgolen
March 20, 2012
Education
0
190
d3.js
An introduction to d3.js
tgolen
March 20, 2012
Tweet
Share
Other Decks in Education
See All in Education
応用セッション_同じデータでもP値が変わる話/key_considerations_in_NHST_2
florets1
1
830
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
1.6k
Microsoft Office 365
matleenalaakso
0
1.5k
会社紹介リーフレット(株式会社東進ビルシステム)
tbs_official
0
340
Interactive Tabletops and Surfaces - Lecture 7 - Next Generation User Interfaces (4018166FNR)
signer
PRO
1
1.2k
スタートアップCTOが個人開発で収益化・年13本記事発信・5件登壇を平行するための時間管理
texmeijin
4
780
Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
Earthquake and Disaster Prevention Information for UTokyo International Students
utokyoissr2360
0
520
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
はじめに。『Synchronic』を作った本当の理由
akane69
PRO
1
110
デジタルアイデンティティの技術を学ぼう!~認証認可にまつわる標準仕様文書を読んでみよう~ / OpenID Summit Tokyo 2024
ayokura
0
440
Canva
matleenalaakso
0
100
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
How to train your dragon (web standard)
notwaldorf
71
5.1k
Faster Mobile Websites
deanohume
296
30k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Ruby is Unlike a Banana
tanoku
95
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
A Tale of Four Properties
chriscoyier
150
22k
Clear Off the Table
cherdarchuk
82
310k
Documentation Writing (for coders)
carmenintech
59
3.8k
Designing for humans not robots
tammielis
247
25k
Music & Morning Musume
bryan
39
5.5k
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