-
Notifications
You must be signed in to change notification settings - Fork 0
Session 2A: Make it fast!!
Assumptions
- is fast good?
- why is it slow?
d3 isn't only on svg -- you can also do canvas stuff. core d3 is really about binding data to the DOM and then using the enter(),update(),exit() pattern.
really fast: acceleration at the hardware level, which is webGL for now.
Another example to look to what video games do: shadow dom/virtual dom & try to be smart to how to apply it. You can also do this with canvas - build on an offline canvas, and then put it up.
When you just want to make it fast & hear about technology: use webgl. Or, you can just use parts of D3 that don't need the DOM. Layouts & computations & scales. Then use webGL for the rendering. (note - this seems to be a theme: to use D3 to set things up, and something else to render). There is no bridge between d3 and webGL except for x3dom
What about multiple animations at the same time? d3.timer only computes as fast as it can, it may look choppy because it's trying not to choke. Avoid concurrent animation by bundling them in groups or sequencing animations (note - sequencing can also improve cognition). Replace transitions with css transitions, which uses hardware acceleration and is fast e.g. using [famous] (http://famous.org/), but then you lose the d3 functionality for this. Re-layout in the browser is expensive. Transitioning pixels within a canvas is fast, but transitioning divs in the browser is slow. You can load more data in the background so that is renders when needed. Also, you can use tricks, such as an animated GIF as a placeholder while you are computing things. You can also distract the user while the computational work is happening.
chunk the data loading and chunk the rendering if there are too many data points,the problem is loading and refreshing the data points
- kai chang wrote a library to chunk the rendering: https://github.com/biovisualize/render-slicer
- another library for loading data in chunks: http://papaparse.com/
what is WebGL and why is it fast? a browser can only do one thing at a time. webgl allows you to control the gpu and do many tasks at the same time and then give a response back.
you can manipulate the data to reduce the number of data points
- binning
- smoothing
- slicing
Hadley Wickham wrote a great paper on binning data.
What about streaming data If you have control over your server, you can use web sockets. Another option is bacon.js