Selection in Scatterplotmatrix has an overlay problem

[Willy Loedts]

Hello,

I'm currently working with a scatterplot matrix in d3. I'm using this example as a basis: https://bl.ocks.org/Fil/6d9de24b31cb870fed2e6178a120b17d

But unfortunately i ran into a big problem.

If i'm using this matrix with a big csv file, there are a lot of values which overlap. The problem now is, if i select an area and the selected points in this area are overlapped by other points in the rest of the matrix then they are not visible..

Has someone an idea how i could fix this?

My idea (which didn't work) was to simply draw the highlighted points again so that they aren't overlapped anymore.

I did this by doing the following steps:

Surround everything in the <script> part with a function like this:

function scatter(data, data2){
....
}

adding a traits2 which is identical to traits

Then under the cell variable, adding the following code:

if(data2!==undefined){

traits2.forEach(function(trait) {

domainByTrait[trait] = d3.extent(data2, function(d) { 

return +d[trait]; 

});

});

svg.selectAll(".cell")

.data(cross(traits2,traits2))

.enter().append("g")

.attr("class", "cell")

.attr("transform", function(d) {return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; })

.each(plot);

}

And to the brushend() function i added this:

var e = d3.brushSelection(this);

    if (e === null){
              svg.selectAll(".hidden").classed("hidden", false);
    } else {
               var j = data.filter(function(d){

return !e

? false

: (

e[0][0] < x(+d[p.x]) && x(+d[p.x]) < e[1][0]

&& e[0][1] < y(+d[p.y]) && y(+d[p.y]) < e[1][1]

);

});             
              scatter(data,j)
   }

So has someone an other idea how to solve this? Or maybe a fix for my idea

Thanks