Search code examples
optimizationd3.jsreal-timevisualizationrickshaw

JavaScript library more efficient than Rickshaw for realtime visualizations


I want to visualize data as time-series graphs on mobile devices(tablets) and therefore stumbled upon rickshaw, which is based on D3. First I must say I was a little bit confused when I realized that realtime in web design is defined totally different to realtime in engineering which has fixed(and often very short) timeframes. Anyway my aim is to visualize the data as fast as possible, and on older tablets visualization with rickshaw is quite slow. Can anybody recommend another library, which may be more efficient in rendering?

Or is there no way out and I have to go native?


Solution

  • You have to differ two types of visualizing frameworks: There are frameworks based on SVG and HTML 5 Canvas. SVG is a nicer solution to provide interaction in your visualization, because the SVG elements can be addressed within the DOM. The tradeoff is that real-time visualizations are slow for SVG. On the other side HTML 5 Canvas is bad for interaction, but faster in real-time rendering. Long story short: Rickshaw is based on SVG and maybe you have better performance with a HTML Canvas based framework like:

    You could try them with sample visualizations and compare their benchmark results.

    Here you have some benchmark examples: