Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

If you have a graph with large number of elements, Canvas scales better. I have built a plotting library in Canvas which can plot about 25000 points (typical requirement with genomic data) in a couple of seconds. Doing this in SVG will not be viable.

http://icanplot.appspot.com/



I've written quite a number of graph/visualization UI controls myself over the years (mostly on the desktop) and in the course of doing so, have looked at many 3rd party libraries / widgets. Many of them claim to be able to do 10's of thousands of points / lines / etc; but I'm still wondering, I have yet to see an actual use for it. 25k data points = even at 1024 * 768, a point density so high that the graph is basically a big colored blob.

For infoviz (although I don't have a formal background in it), I've always taken the approach of implementing more intelligent data point selection algorithms - better selections of what points to actually display, to maximize the information the user gets out of the graph, rather than trying to push as many data points per frame. Similar to improved LoD algorithms making 3d worlds better when raw pixel throughput in the 3d rendering path can't keep up.

Anyway my question is, in what circumstances do you need to render 25k data points per frame / render loop? Aren't there clusters of 10's or 100's of them who end up obscuring each other anyway?


What about performance in different browsers? For SVG, everything is smooth in Chrome, but Firefox is pretty much slower (I'm using RaphaelJS)


I have checked on Firefox, Safari, Chrome. It is just as fast on each, takes about 2 secs to plot 25k+ points.


svg is slower on mobile browsers, and in android < 3.0 (i.e. ~96% of android devices), svg isn't supported at all

My recommendation is svg for static graphics/pictures, and canvas for animations/dynamic stuff, but keep the canvas as small as you can


how do you need to plot them / what are the requirements.

I should do some more speed testing, but e.g. it's possible to get SVG to draw "markers" at every point in a single polygon, and fairly quickly in some renderers.


I'd also expect SVG to be faster if you have a reasonable amount of shapes but only move one or two. In canvas you have to redraw everything yourself, with SVG you simply change the coordinates of the shapes you want to move, and the browser takes care of redrawing what is needed.


It's based on pure Canvas so there are no other requirements. I am still working on the documents but the source code is commented well. Right now it creates scatter plots but I may add other types of plots later. If you intend to help it in your application, I will be happy to work with you.

You could draw SVG markers at every point but with the DOM and everything, it just becomes very slow. protovis (a great SVG based library) mention the number 10,000 points at which SVG starts becoming unusable. I am able to plot 25k+ points.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: