How to detect overlapping dots in a scatter plot using D3?

Question

I am creating a scatter plot with D3 but I noticed that several dots are overlapping in the same spot. Since every data point is meaningful, so I want to indicate that there are several dots in that place. So I think the first thing I need to do is to detect whether there is overlapping happening when drawing the scatter plot.

What I have in mind is that, when I use the following code to append circles in svg, I will keep every pair of the (cx, cy) values in an array and when drawing the next dot, go through the array to see whether that (cx, cy) pair has exist, if so there has been a dot already. And I can do something to indicate there is overlapping.

var starterCircle = starterItem.append("circle")
    .attr("class", "dot starter circle-default")
    .attr("r", 6)
    .attr("cx", function(d) {
        if (getXSelectedOption() == "MP") {
            return calcMinutesPlayed(d, "x");
        }
        else {
            return xScale(d[getXSelectedOption()]);
        }
     })
     .attr("cy", function(d) { 
        if (getYSelectedOption() == "MP") {
            return calcMinutesPlayed(d, "y");
        }
        else {
            return yScale(d[getYSelectedOption()]);
        }
     });

But it seems to me that it takes lots of calculation to do that and I was wondering whether there is simpler way to deal with that.

Any suggestions will be appreciated! Thank you!

Answer 1

How about create a matrix m(SX, SY), where SX and SY are the size of the 2d plot. When you add a new data point (cx, cy), mark it down in the matrix entry m(cx, cy). Then you will know the number of overlap data points you have at point (cx, cy).