d3 js speed up and optimization

1,204 views
Skip to first unread message

natali...@gmail.com

unread,
Jan 13, 2017, 4:22:53 AM1/13/17
to d3-js
Hi, all!
I work with d3 and I have a question about common ways of speed up / optimization and best practice.
Could you share your ideas and experience, please?

Thank you for helping anyway! 

Vlado Z

unread,
Jan 13, 2017, 5:30:53 AM1/13/17
to d3-js
Can you post the complete code or share it on JSFiddle, Github or JSbin?

natali...@gmail.com

unread,
Jan 16, 2017, 7:48:20 AM1/16/17
to d3-js
Hi! Thank you for the answer. 
It is a question only for common understanding. I'm very interesting what experience or rules have d3.js community.
But if you have time and it is interesting for you I have a question about the best solution for speed up drag and drop. 

Curran

unread,
Jan 16, 2017, 8:46:00 AM1/16/17
to d3-js
Hello,

There are a number of ways to speed up D3 visualizations, but it all depends on what is making it slow in the first place. What kind of performance limitations are you trying to overcome?

In general, usually the cause of slowness with D3 programs is a high number of shapes. When there are more than around 10,000 SVG shapes, animations become jagged. Here's a Tree Fractal Example that shows how performance decreases as the number of shapes increases. This is a limitation of SVG rendering, not D3 itself.

One common solution to increase performance on data visualizations with too many shapes is to apply a data reduction step, like binned aggregation or random sampling, to reduce the number of shapes drawn while retaining the interesting patterns of the visualization. Another common approach is to migrate to a rendering technology faster than SVG, like Canvas or WebGL.

Best regards,
Curran
Reply all
Reply to author
Forward
0 new messages