performance issue -- how many svg elements can the browser handle?

[bren]

I'm working on a visualization that plots svg circles on a map with a transition (it represents new people over time) -- I have about 50k points that I want to plot. 

I'm running into performance issues, and after about 5k points points plotted, it starts to significantly slow down. And if I try loading the entire 50k observation file, the browser completely craps out.

Any ideas on handling this? Is there a ceiling on svg elements in the DOM?

Many thanks,

Brendan

[Irene Ros]

Hi Brendan,

The numbers you are looking at are not feasible in svg. To be honest, any DOM element at those numbers would grind the browser to a halt. Is canvas an option for you? Because I would look at that. Alternatively, such a high number of points leads me to ask - can the data be aggregated in some form? That might lead you to actually render less elements.

Irene Ros 
http://ireneros.com
(413) 265-3704 | imi...@gmail.com | protocol.by/ireneros

[marc fawzi]

I did this with with Mike's DOM-to-Canvas ... around 1200 circles max
at peak time

http://www.youtube.com/watch?v=xSqVpQjDAjs

As to Irene's comment about aggregating data, if it's geographic data
based on lon,lat then you can't really aggregate, except for ones that
happen in the same zip code (or lon,lat proximity)

[Jamie Popkin]

Nice example Marc... And it brings up a good question.

Brendan - do you need them plotted at the same time? Depending on what you're trying to do.... You can remove points once they are no longer needed. I displayed over 50k points in pottymouth: http://littleearth.ca/pottymouth/  As transitions ended I just removed the points from the DOM.

I kinda figured this out after... But a more sophisticated approach would be to reuse points instead of creating new ones... Hence making it easier on the javascript garbage collector.

Jamie

--

Jamie Popkin
Little Earth

@jamiepopkin

http://littleearth.ca

[marc fawzi]

Thanks Jamie.

What's a Point? In your case, I assume it's an SVG circle element. In
case of using canvas, the assumption would that there is an instance
of a JS object per point, but that's not true in every case. For
example, I use one instance of mapCircles to create all circles in
canvas.

I'll be thinking about your SVG reuse idea. The key to understand is
what costs the most in performance: creating/inserting/removing
elements OR moving elements around using SVG's absolute positioning
(out of flow?) rendering ... I think maybe you're quite right in
assuming it's the creation/insertion/removal that costs the most.