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
80
Designing for Spacecraft Operations
binx
2
550
Place and Space
binx
0
480
Error: Success
binx
0
500
Peak Visualization?
binx
1
490
The Data Visualization Hustle
binx
2
400
People, Not Users
binx
2
200
Data Collection and Memory
binx
1
190
The Road To Code
binx
1
330
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Fireside Chat
paigeccino
35
3.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Embracing the Ebb and Flow
colly
84
4.6k
Thoughts on Productivity
jonyablonski
69
4.5k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
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