Lasso & rectangular selections

[alexcjohnson]

At the moment this just supports scatter traces with markers, should be extensible to other types. scatter lines would be cool but I don't see how to do it. scatter text would be an easy addition.

I haven't done any rigorous performance testing (will be interesting to see how many points this can handle) but I was able to draw a pretty crazy lasso and I didn't detect any lag:

We need icons for rectangle and lasso selection.

cc @etpinard@jackparmer

[alexcjohnson]

@etpinard I mostly don't have internet here in Albania... and the Jasmine tests fail without it because they want to load topo data from the cdn. Is that necessary?

[jackparmer]

Yeeeeeeehaw! This looks slick!
@delekru can you look into some modebar icon options?

[alexcjohnson]

Crosshair is a pretty good cursor for what you're doing, it just doesn't disambiguate these from each other or from zoom. Maybe that's OK.

[etpinard]

+1 'crosshair' for select and lasso.

[alexcjohnson]

not sure what's going on with the image tests... going to have to wait and look at that tonight.

[alexcjohnson]

@delekru here (and right above) are where the new icons get referenced, once they're part of the ploticon font.

[delekru]

@jackparmer@alexcjohnson

There's a few options for a 'box select' icon:


Both of those were from Fontastic. I prefer the first one.

The lasso select icon is pretty rare. I've browsed all the icons inside Fontastic and there's nothing really that resembles a lasso or dotted circle. The closest things are:



A combination of those three would be perfect, but neither one of them seems intuitive/appropriate enough.

Is there any other icon database you guys use?

[jackparmer]

The one Bokeh uses is pretty decent:

http://bokeh.pydata.org/en/0.10.0/docs/user_guide/tools.html#lassoselecttool
Might be a good placeholder if everyone else finds it OK.
Otherwise I usually just Google for icons until I find one I like.

[mdtusz]

Maybe inline these for readability sake. They appear to only be used once each.

[alexcjohnson]

👍

[alexcjohnson]

OK, I think this is good from my side - all yours @delekru for the icons. If you need help getting them into the ploticon font check with @alexander-daniel

@etpinard@chriddyp anything else?

[delekru]

@alexcjohnson

Alright sounds good. I'll ask for some help on that.

[delekru]

@alexcjohnson@etpinard@jackparmer

Alright so, for box select, do we all agree to use this icon?

As for the lasso icon, there was some issue with buying the icons and royalty fees with the ones that were posted on this thread so instead I just drew one myself.

Here's a picture:

All good?

[etpinard]

@delekru +1 and +1 for me.

[etpinard]

Minor point:

I'd vote for making MINDRAG for select box bigger. I find it kind of hard 1d-selecting over large ranges.

Maybe @chriddyp, @cldougl@mdtusz could try it out.

[mdtusz]

Would be a bit more code, but making the MINDRAG a function of the main drag distance would be useful I think. Something with a log scale would be useful. If I 1D drag the width of my screen, it's likely going to fluctuate a whole lot more than if I drag 100px.

[cldougl]

+1 for a larger MINDRAG from me too

[alexcjohnson]

OK, I've made a MINSELECT that's a little bigger than MINDRAG (12 instead of 8). b5c090f

I don't want to make it as big as MINZOOM (or make it an increasing function of distance) because this limits how thin a rectangle you can select. Which is not a problem with MINZOOM because you can always zoom a second time.

[alexcjohnson]

@delekru those icons look great!

[etpinard]

@alexcjohnson awesome.

💃 for once we get the icons in.

@alexander-daniel@delekru let's do this.

[etpinard]

@alexcjohnson@chriddyp@cpsievert@mdtusz@cldougl@jackparmer

Last chance for a review ...

[cldougl]

👍 from me!

[ncammarata]

@chriddyp any update on crossfilter style 1d selections?

If not, any idea how I can implement in the meantime?

[chriddyp]

hey @ncammarata !
If you're working in R, you can do this in Shiny and Plotly: https://plot.ly/r/shinyapp-linked-brush/
Here is an example if you're working in JS: https://plot.ly/javascript/lasso-selection/

[ncammarata]

@chriddyp that handles the 2d plot (which I'm using now with lasso), but does it handle the 1d time series use-case that crossfilter handles?

[gszep]

do I understand correctly that these selection tools break when cross-filtering with more than 1000 points? I'm using the generic cross-filtering example in the docs and when I set the number of points to be higher the update takes ages :(