Improving d3's performance? [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 9 years ago.

Improve this question

I have some issue regarding the performance of d3.js to display points on map.

I am using this beautiful piece of code that I found here as a starting point for my code https://gist.github.com/bobuss/1985684

Basically what the code on the link does is to draw points on maps and draw curves to connect the lines. However, when I tried to add more data points (around 300) it will somehow either crash my browser or it will lag ALOT

So I was wondering if there's anyway to actually improve the performance in this case..

Thanks!

Answer 1

I considered using d3 to show some genomic data (23k points on scatter plot).

It just couldn't work, most of the browser will crash when you add 23k dom nodes and if you try to have some interactivity (hover, click) you end up with too many event listeners and everything dies.

I love d3, I'm using it since protovis days, but in my experience, it become unusable after few thousands of elements, and every time I had to create chart like that i ended up building it from scratch and implementing it on canvas. And there you end up with entirely new set of problems - implementing your own hit tests, events, simulating hover...

Its a nightmare.

There is no good solution to "big data" charting in JS, at least not to my knowledge.

And that is a shame to be honest, seeing my MacBookPro spinning his fan at max speed and browsers being unresponsive - because im trying to plot 25k points - on a i7 8GB ram machine, thats a nonsense.

But that is what we get when we try to use browser for something its not meant to be. And yes, 2D GPU acceleration helped, but not that much.