Search code examples
javascriptjqueryd3.jsscatter-plotd3.js-lasso

D3.js Scatterplot with Lasso - record selections

CONTEXT

I'm using d3.js & Lasso in order to allow users to select dots on a scatterplot. I want them to be able to select multiple clusters on the same scatterplot, one after the other. I've found an example of how to do this right here: http://bl.ocks.org/skokenes/511c5b658c405ad68941

PROBLEM

I want to record each selection of dots so that I end up with an array, where each dot has a list of clusters it belongs to. For example, Dot1 belongs to clusters [1,3,4].

QUESTION

What would be the best way of storing these selections?

Solution

  • What would be the best way of storing these selections?

    Well, that's too "opinion based" for S.O. However, I'll share a very crude solution, in which instead of creating for each dot a list of clusters it belongs to, we'll create a list of cluster with their corresponding dots. Pretty much the opposite of what you asked, but you can easily modify the resulting array (an array with the dots for each selection) to create your desired record (one array with the selections for each dot).

    The first step is defining the array outside lasso_end:

    var clusters = [];

    Then, inside lasso_end, we get a list of selected dots:

    var selected = lasso.items().filter(function(d){
    return d.selected===true
});

var selectedDots = selected[0].map(d=>d.id);

    Here, I'm mapping by ID. Then, we push the array into clusters:

    clusters.push(selectedDots);

    Every time the user selects some dots, cluster becomes bigger. So, in the first time, you can get something like this:

    var clusters = [["dot_62","dot_68","dot_87","dot_119"]];

    And, in the second time:

    var clusters = [["dot_62","dot_68","dot_87","dot_119"],
    ["dot_53","dot_57","dot_80","dot_81","dot_93"]];

    Here is a plunker, select your dots and check the console: https://plnkr.co/edit/qiZ6bkgZhoSn3XfJW2l7?p=preview

    PS: As I said before, this is a very crude solution: if the user just clicks anywhere in the chart, clusters will have a new empty array. So, you'll have to modify it to your purposes.