d3.js on mobile devices

[B Lyon]

I've been wondering if anyone has gotten satisfactory results with animated/interactive d3 visualizations on iPad/iPhone/Nexus.  I've yet to do so, but haven't devoted a serious shot at it yet. Plus there's the change in screensize that I also have yet to properly deal with as well on mobile devices - the browser's address bar/chrome seems to muck with any tests you might try in Chrome's mobile emulator, etc.  Things always seems sluggish (although I do usually use a lot of javascript that doesn't help).  This might be the general rule for mobile browsers, I guess, but still thinking there are probably some specific things to do.  Any tips on what might have worked for you would definitely be appreciated.

-b

[Shreeram Kushwaha]

I tried on Nokia Lumia.

I ran a d3 js app, with 3000 nodes and 4000 links between them and it was working totally fine

On Sat, Oct 19, 2013 at 5:30 AM, B Lyon <brad...@gmail.com> wrote:

I've been wondering if anyone has gotten satisfactory results with animated/interactive d3 visualizations on iPad/iPhone/Nexus.  I've yet to do so, but haven't devoted a serious shot at it yet. Plus there's the change in screensize that I also have yet to properly deal with as well on mobile devices - the browser's address bar/chrome seems to muck with any tests you might try in Chrome's mobile emulator, etc.  Things always seems sluggish (although I do usually use a lot of javascript that doesn't help).  This might be the general rule for mobile browsers, I guess, but still thinking there are probably some specific things to do.  Any tips on what might have worked for you would definitely be appreciated.

-b

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

Regards,

(Voice  +91-7849069144)
( Shreeram Kushwaha )
Software Engineer

Samsung R&D Institute India - Bangalore

[Enrico Spinielli]

For recipes on responsive charts using d3 see http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/

it provides "tricks" to make your charts/maps/graphs adapt to the different platforms and to their different screen real estates.

Ciao
Enrico

On Oct 19, 2013 2:00 AM, "B Lyon" <brad...@gmail.com> wrote:

I've been wondering if anyone has gotten satisfactory results with animated/interactive d3 visualizations on iPad/iPhone/Nexus.  I've yet to do so, but haven't devoted a serious shot at it yet. Plus there's the change in screensize that I also have yet to properly deal with as well on mobile devices - the browser's address bar/chrome seems to muck with any tests you might try in Chrome's mobile emulator, etc.  Things always seems sluggish (although I do usually use a lot of javascript that doesn't help).  This might be the general rule for mobile browsers, I guess, but still thinking there are probably some specific things to do.  Any tips on what might have worked for you would definitely be appreciated.

-b

[B Lyon]

Thanks for the great info. Good to hear about what you've seen for the directed layout, and I had not come across that post about responsive designs tailored for d3 stuff. 

 

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/zNiWODMPyrg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

--
BF Lyon

http://www.nowherenearithaca.com

[Victor Powell]

I haven't had any major trouble animating 3k+ elements with D3 expect for low frame rates on iPhone. just make sure to let D3 handle the animation (because it delegates to requestAnimationFrame.) to update on page resize making your visualization responsive, can you do something along these lines:

var width, height;

// ...create svg, etc...

d3.select(window).on('resize', resize);

function resize(){

    width = window.innerWidth;

    height = window.innerHeight;

    svg.style({ width: width + 'px', height: height + 'px' });

    updateNodes(); // update the nodes incorporating the new width and height

}

resize(); // also resize when the page first loads

you'll want to remove any default margins applied to the <body> tag in chrome (and safari?)

body { margin: 0; }

and set the meta viewport to the device-width:

<meta name="viewport" content="width=device-width, user-scalable=0;">

and don't forget to support touch events like "mousemove" since mobile phones don't have mice :)

- Victor