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 + mobile
Search
binx
August 10, 2012
11
4.3k
d3.js + mobile
binx
August 10, 2012
Tweet
Share
More Decks by binx
See All by binx
On the Importance of Iteration
binx
0
78
Designing for Spacecraft Operations
binx
2
530
Place and Space
binx
0
470
Error: Success
binx
0
490
Peak Visualization?
binx
1
460
The Data Visualization Hustle
binx
2
380
People, Not Users
binx
2
200
Data Collection and Memory
binx
1
180
The Road To Code
binx
1
300
Featured
See All Featured
Visualization
eitanlees
144
15k
Being A Developer After 40
akosma
86
590k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Music & Morning Musume
bryan
46
6.1k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Optimizing for Happiness
mojombo
376
69k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Designing for humans not robots
tammielis
249
25k
Become a Pro
speakerdeck
PRO
24
5k
Gamification - CAS2011
davidbonilla
80
5k
GitHub's CSS Performance
jonrohan
1030
460k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Transcript
d3.js + mobile Rachel Binx, Stamen Design
So the good news is that D3 works great on
mobile devices. The bad news is that you still have to build a mobile site.
1) Design 2) Interaction 3) Performance
Tools of the Trade
Viewport <link rel="stylesheet" media="screen and (max- device-width: 480px)" href=”iphone.css”/> <meta
name="viewport" content="width=device- width, initial-scale=1, maximum-scale=1"> @media screen and (max-device-width: 480px) { .column { float: left; } } Media Queries
Platform Detection navigator.userAgent IE iOS iPad iPhone Safari Firefox Chrome
SVG viewBox <svg width="300px" height="200px" viewBox="0 0 1500 1000" preserveAspectRatio="none">
<min-x> <min-y> <width> <height>
Tiny Screens! • Anything interactive on your page: make it
much larger • You will not have a cursor to indicate interaction models - consider labeling everything • Quite simply: remove all subtly
2011 MTV Video Music Awards http://sta.mn/hyd
Selected State
Interaction Models
Let’s Talk About Touch Limitations: click == hover drag ==
scroll Opportunities: multitouch!
Hover as Click 2011 Video Game Awards — http://sta.mn/cgq
Scroll as Drag maps.stamen.com Basically, beware of which elements on
the page will steal focus from whole-page interaction
Multitouch http://sta.mn/f3 d3.js jQuery .touches() touchstart touchmove touchend .drag() .zoom()
various plugins: touchstart/end swipes swipe/zoom/scale
Saucy Animations
Optimizing Framerate • Sadly, SVG is not hardware accelerated •
One solution: make the SVG element as small as it can be • Or, try removing setInterval / requestAnimationFrame in favor of event-based animation • If all else fails: refactor the animations!
Event-Based Animation 2012 NewNowNext Awards — http://sta.mn/rnm
Design + Interaction + Performance = Successful Mobile Project
Thanks!
[email protected]
@rachelbinx