D3.js Scatterplot with Lasso - record selections

443
December 08, 2016, at 11:41 PM

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?

Answer 1

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.

Rent Charter Buses Company
READ ALSO
AJAX sending various types of data from JS to PHP

AJAX sending various types of data from JS to PHP

Let's first have a look on code, then i'll explain what kind of error im occuringFirst, my AJAX code:

317
jQuery Tablesorter won't sort PHP generated tables

jQuery Tablesorter won't sort PHP generated tables

I'm trying to sort two tables with Tablesorter that have been generated using PHP and the data is taken from MySQL databaseThe issue is that tablesorter does not work and I'm suspecting that it's because I wrap the tables in a for each loop but I have no alternative...

388
Enable parallax only in viewport

Enable parallax only in viewport

I have been using a parallax effect using this method: https://mediumcom/@PatrykZabielski/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27

498
jQuery UI - a method to close modal dialog that works more than once

jQuery UI - a method to close modal dialog that works more than once

I have a modal dialogI want to close it by clicking outside the dialog window

275