1. I would set up two dimensions in crossfilter - one for x and one for y - and let the crossfilter library intersect the results for you. Crossfilter does some fancy stuff behind the scenes that works better with one dimensional data. If you don't have much data and you only want the scatter plot filter, it might be easier to just copy the flower example:

    return e[0][0] > d[p.x] || d[p.x] > e1[0] || e0 > d[p.y] || d[p.y] > e1;

  2. Don't redraw the entire scatter plot! Looking at the flower example, the only thing that changes is the application of the 'hidden' class. If you're only updating the color of the points, it won't take 150 ms to update. Additionally, if you leave the plotted points in place, you can add cool transition effects


  1. Querying

    a. 2 1-d queries. Same as Adams comment. Crossfilter will be faster with one-dimensional data.

  2. Rendering

Most of this I think has to do with the rendering more than the query itself. Adam gave some great points, but I'd like to offer some alternative sources:

Look into leveraging d3.geom.quadtree ( This would allow you to re-visualize only the points that are being impacted. This however, means that a query of the other dataset cannot change the (x, y) location of an individual point in the scatterplot; as you would have to reindex the quad tree.

Also, have you considered a different visualization technique? 2d binning is a good technique to help avoid performance issues:


Have you considered using DC.js?

DC.js is a Javascript charting library that extends D3.js and has crossfilter support. I just started using it for a bar chart, though I haven't tried it for a scatterplot yet. It allows you to filter and zoom in on subsets interactively, and it's fast with crossfilter.

Related Query