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.4k
d3.js + mobile
binx
August 10, 2012
Tweet
Share
More Decks by binx
See All by binx
On the Importance of Iteration
binx
0
100
Designing for Spacecraft Operations
binx
2
600
Place and Space
binx
0
520
Error: Success
binx
0
520
Peak Visualization?
binx
1
550
The Data Visualization Hustle
binx
2
440
People, Not Users
binx
2
240
Data Collection and Memory
binx
1
220
The Road To Code
binx
1
380
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Become a Pro
speakerdeck
PRO
29
5.6k
Mobile First: as difficult as doing things right
swwweet
225
10k
Thoughts on Productivity
jonyablonski
71
4.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
A Tale of Four Properties
chriscoyier
161
23k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Code Reviewing Like a Champion
maltzj
526
40k
Designing for Performance
lara
610
69k
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