javascript - D3 Scatterplot with thousands of data points - Stack Overflow

admin管理员组

文章数量:1317915

I would like to make a scatter plot using D3 with the ability of only looking at a small section at a time using some sort of slider across the x-axis. Is there a method in javascript where I can efficiently buffer the data and quickly access the elements as the user scrolls left or right?

My goal is similar to this protovis example here, but with 10 times the amount of data. This example chokes when I make that many data points.

I would like to make a scatter plot using D3 with the ability of only looking at a small section at a time using some sort of slider across the x-axis. Is there a method in javascript where I can efficiently buffer the data and quickly access the elements as the user scrolls left or right?

My goal is similar to this protovis example here, but with 10 times the amount of data. This example chokes when I make that many data points.

• javascript
• d3.js

Share Improve this question Follow asked Dec 7, 2012 at 2:18 dvreed77dvreed77 2,38722 gold badges3030 silver badges4949 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I have done a scatterplot with around 10k points where I needed to filter sections of the plot interactively. I share a series of tips that worked for me, which I hope some may hopefully help you too:

• Use a key function for your .data() operator as it is done at the end of this tutorial. The advantage of using keys is that you do not need to update elements that do not change.
• Not related to d3, but I divided my data space into a grid, so that each data point is associated to a single cell (in other words each cell is an index to a set of points). In this way, when I needed to access from, let's say, from x_0 to x_1, I knew what cells I needed, and hence I could access a much more refined set of possible data points (avoiding iterating along all points).
• Avoid transitions: from my personal experiences the .transition() is not very smooth when thousand of SVG elements are selected (it may be better now in newer versions or with faster processors)
• In my case it was more convenient to make points invisible (.attr("display","none")) or visible rather than removing and creating SVG elements (I wonder if this is more time efficient too)

本文标签： javascriptD3 Scatterplot with thousands of data pointsStack Overflow