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
590
Place and Space
binx
0
510
Error: Success
binx
0
520
Peak Visualization?
binx
1
530
The Data Visualization Hustle
binx
2
430
People, Not Users
binx
2
230
Data Collection and Memory
binx
1
220
The Road To Code
binx
1
370
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How GitHub (no longer) Works
holman
314
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
How STYLIGHT went responsive
nonsquared
100
5.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