d3.js + mobile

Transcript

1. d3.js + mobile Rachel Binx, Stamen Design

2. 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.

3. 1) Design 2) Interaction 3) Performance

4. Tools of the Trade

5. 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

6. Platform Detection navigator.userAgent IE iOS iPad iPhone Safari Firefox Chrome

7. SVG viewBox <svg width="300px" height="200px" viewBox="0 0 1500 1000" preserveAspectRatio="none">

   <min-x> <min-y> <width> <height>

8. 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

9. 2011 MTV Video Music Awards http://sta.mn/hyd

10. Selected State

11. Interaction Models

12. Let’s Talk About Touch Limitations: click == hover drag ==

    scroll Opportunities: multitouch!

13. Hover as Click 2011 Video Game Awards — http://sta.mn/cgq

14. Scroll as Drag maps.stamen.com Basically, beware of which elements on

    the page will steal focus from whole-page interaction

15. Multitouch http://sta.mn/f3 d3.js jQuery .touches() touchstart touchmove touchend .drag() .zoom()

    various plugins: touchstart/end swipes swipe/zoom/scale

16. Saucy Animations

17. 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!

18. Event-Based Animation 2012 NewNowNext Awards — http://sta.mn/rnm

19. Design + Interaction + Performance = Successful Mobile Project

20. Thanks! [email protected] @rachelbinx