CODEWITHSUNDEEP
datasetd3.jsmassive
Will
Will

Reputation: 375

How do I build simple D3 charts that display massive amounts of data?

I would like to use D3 to build simple charts with literally hundreds of millions of data points.

Obviously, I won't be attempting to plot millions of points at a time. Only a very, very tiny fraction of those points (<1000) would be in view at any given time. I'll download pre-processed data "on-demand" from the server depending on the current view and zoom level, and would like to use D3's built-in zoom and pan behaviors.

Basically, imagine an infinitely wide bar chart that pans back and forth, and alters itself to show the appropriate level of detail depending on the current zoom level (e.g. semantic zoom).

What techniques are available in D3 to achieve this, yet still have it feel responsive and smooth? What should I avoid doing? Are there any examples of this out there?

Upvotes: 3

Views: 878

Answers (2)

Wex
Wex

Reputation: 15695

I would highly recommend you look into using over . From what I've seen, having thousands of SVG elements doesn't scale particularly well. Microsoft has a pretty good writeup for how to know which to choose: http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx#Using_Canvas_AndOr_SVG

Upvotes: 1

Iain Dillingham
Iain Dillingham

Reputation: 625

Examples: Have a look at Fabian Fischer's BankSafe, an award-winning entry to this year's VAST Challenge. Not sure if the code is available, but the report summarising the techniques he used certainly is. The dataset was also in the order of "hundreds of millions" and - if I remember correctly - had a zoom technique similar to the one you describe.

Upvotes: 2

Related Questions