Upgrade to Pro — share decks privately, control downloads, hide ads and more …

D3.js: A Five-Minute Intro

49eec51ef4a3335cb3247a41d1f08971?s=47 Jay Stakelon
July 18, 2013
Programming
1
150

D3.js: A Five-Minute Intro

Presented to the @fullscreen Data Club :)

49eec51ef4a3335cb3247a41d1f08971?s=128

Jay Stakelon

July 18, 2013
Tweet

More Decks by Jay Stakelon

See All by Jay Stakelon
Designing Digital Products
49eec51ef4a3335cb3247a41d1f08971?s=48 stakes
6
320
SINterfaces
49eec51ef4a3335cb3247a41d1f08971?s=48 stakes
4
160
Designing With Code
49eec51ef4a3335cb3247a41d1f08971?s=48 stakes
17
4.1k
Prototyping With Framer
49eec51ef4a3335cb3247a41d1f08971?s=48 stakes
38
11k
Desmystifying UX Teams
49eec51ef4a3335cb3247a41d1f08971?s=48 stakes
7
1.3k
Fake It Till You Make It: An introduction to UX prototyping
49eec51ef4a3335cb3247a41d1f08971?s=48 stakes
16
850
Getting A Job In UX
49eec51ef4a3335cb3247a41d1f08971?s=48 stakes
9
220
Views You Can Use
49eec51ef4a3335cb3247a41d1f08971?s=48 stakes
3
130
Web Forms Usability Workshop
49eec51ef4a3335cb3247a41d1f08971?s=48 stakes
31
1.6k

Other Decks in Programming

See All in Programming
プロダクトの成長とSREと
5a9fb3b80c517e51e4e95a27b63c6a67?s=48 takuyatezuka
0
120
Scaling Productivity- How we have improved our dev experience
63c8b0590595c3de58406678ef99a6bf?s=48 sockeqwe
1
120
Rに管理されてみる
154699a2e3d8b497494a5ee118f211a5?s=48 kazutan
0
260
Dagger, la CI, autrement
27021de2df79d619a3ebf52ab6392e82?s=48 guikingone
1
120
企業内スモールデータでのデータ解析
6aceb3377c71b05c1285459c596d1d1f?s=48 hamage9
0
910
Register-based calling convention for Go functions
86d54dc23ace2b5920f7d5777949ed8f?s=48 cjamhe01385
0
420
Isar勉強会
693ed679c8dde3eccbc682ff44f357e1?s=48 hoddy3190
0
560
アジャイルで始める データ分析基盤構築
384e4d8bab8ac2a5e6f64dab1300c491?s=48 nagano
1
920
ふんわり理解するcontext
438799c739f93d00abc30fa2da33c543?s=48 rukiadia
1
180
実践 SpiceDB - クライドネイティブ時代をサバイブできるパーミッション管理の実装を目指して / Practical SpiceDB
B1bddcb899ec3060fe9913f3cb70dbb6?s=48 lmt_swallow
0
140
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
2
1.2k
Git Rebase
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
7
1.1k

Featured

See All Featured
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
26k
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.4k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
Debugging Ruby Performance
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
65
10k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
Statistics for Hackers
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
782
210k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
373
44k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
290
48k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
64k

Transcript

  1. A Five-Minute Intro D3.js

  2. BIND SOME DATA Select a set of elements and associate

    them with a data set

  3. Data can be as simple as an array of numbers...

    DATA? Or more complex JSON objects

  4. USE THE ENTER() SELECTION For each element in the data

    set, we append a new circle to the initially-empty selection

  5. MAKE THE DATA PRETTY Use .attr to set attributes arbitrarily,

    or based on values from the data object bound to each element

  6. MAKE THINGS FIT Scales map values from an input domain

    to an output range

  7. MAKE THINGS MOVE Use transition() to change attributes of an

    element over time