d3.js + mobile - Speaker Deck

Slide 1

Slide 1 text

d3.js + mobile Rachel Binx, Stamen Design

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

1) Design 2) Interaction 3) Performance

Slide 4

Slide 4 text

Tools of the Trade

Slide 5

Slide 5 text

Viewport @media screen and (max-device-width: 480px) { .column { float: left; } } Media Queries

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

SVG viewBox

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Selected State

Slide 11

Slide 11 text

Interaction Models

Slide 12

Slide 12 text

Let’s Talk About Touch Limitations: click == hover drag == scroll Opportunities: multitouch!

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Scroll as Drag maps.stamen.com Basically, beware of which elements on the page will steal focus from whole-page interaction

Slide 15

Slide 15 text

Multitouch http://sta.mn/f3 d3.js jQuery .touches() touchstart touchmove touchend .drag() .zoom() various plugins: touchstart/end swipes swipe/zoom/scale

Slide 16

Slide 16 text

Saucy Animations

Slide 17

Slide 17 text

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!