CODEWITHSUNDEEP
javascriptd3.jsplotdata-visualization
avyfain
avyfain

Reputation: 854

How to override d3.js's limit on number of elements that can be rendered?

I am trying to create a visualization in d3.js, with 4 scatter plots (think a 2x2 matrix plot) and ~1000 data points in total. Each plot should have its own set of axes and include the 1:1 line and a linear fit line. This is all happening in one svg.

It seems that my browser (chrome) can't render more than a couple hundred of data points. Is there a way to override this limit?

EDIT: Here is a sample of what I'm doing with dummy data. Clearly, the data points in the first quadrant are not being plotted.

svg.selectAll("circle")
            .data(two)
            .enter()
            .append("circle")
            .attr("cx", function(d){
                return (w + xscale(d[0]));
            })
            .attr("cy", function(d){
                return yscale(d[1]);
            })
            .attr("r", 2);

I basically used the same code for the first and second graphs, but added a w to cx, as shown above.

Upvotes: 1

Views: 2081

Answers (1)

Zac
Zac

Reputation: 1009

The svg.selectAll("circle") calls are interfering with each other. You need to differentiate your groups of circles; for example, by adding a class to each:

svg.selectAll("circle.one")
  .data(one)
  .enter()
  .append("circle")
  .attr("class","one")
  .attr("cx", function(d){
    return xscale(d[0]);
  })
  .attr("cy", function(d){
    return yscale(d[1]);
  })
  .attr("r", 2);

...

svg.selectAll("circle.two")
  .data(two)
  .enter()
  .append("circle")
  .attr("class","two")
  .attr("cx", function(d){
    return (w + padding + xscale(d[0]));
  })
  .attr("cy", function(d){
    return yscale(d[1]);
  })
  .attr("r", 2);

(Also, note that I added padding to the "two" group's x value.)

Here's your example, updated: http://jsfiddle.net/pzp4h/3/

Upvotes: 3

Related Questions