Lasso & rectangular selections #154

alexcjohnson · 2015-12-31T09:03:53Z

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 · 2015-12-31T09:09:00Z

@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 · 2015-12-31T09:11:52Z

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

alexcjohnson · 2015-12-31T09:12:50Z

src/components/modebar/buttons.js

+    pan: 'move',
+    zoom: 'crosshair',
+    select: 'crosshair',
+    lasso: 'crosshair' // TODO: better cursors for select and lasso?


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.

+1 'crosshair' for select and lasso.

alexcjohnson · 2015-12-31T10:16:15Z

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

alexcjohnson · 2015-12-31T10:17:58Z

src/components/modebar/buttons.js

+    title: 'Lasso Select',
+    attr: 'dragmode',
+    val: 'lasso',
+    icon: Icons.question, // TODO


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

delekru · 2015-12-31T16:21:55Z

@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 · 2016-01-01T04:14:54Z

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 · 2016-01-04T14:50:46Z

src/lib/polygon.js

+        rectFirstEdgeTest;
+
+    function onFirstVert(pt) { return pt[0] === pts[0][0]; }
+    function onFirstHorz(pt) { return pt[1] === pts[0][1]; }


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

alexcjohnson · 2016-01-06T14:56:42Z

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 · 2016-01-06T15:02:46Z

@alexcjohnson

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

delekru · 2016-01-06T15:34:00Z

@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 · 2016-01-06T15:40:25Z

@delekru +1 and +1 for me.

etpinard · 2016-01-06T15:48:24Z

src/plots/cartesian/constants.js

+    DBLCLICKDELAY: 600,
+
+    // pixels to move mouse before you stop clamping to starting point
+    MINDRAG: 8,


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.

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.

+1 for a larger MINDRAG from me too

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 · 2016-01-06T16:56:39Z

@delekru those icons look great!

etpinard · 2016-01-06T17:25:34Z

@alexcjohnson awesome.

💃 for once we get the icons in.

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

etpinard · 2016-01-06T19:57:45Z

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

Last chance for a review ...

cldougl · 2016-01-06T20:03:02Z

👍 from me!

Lasso & rectangular selections

ncammarata · 2016-05-23T21:45:21Z

@chriddyp any update on crossfilter style 1d selections?

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

chriddyp · 2016-05-23T22:23:50Z

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 · 2016-05-24T02:31:11Z

@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 · 2022-07-25T17:11:58Z

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 :(

alexcjohnson added 12 commits December 27, 2015 23:08

agignore dist

d6f983e

point in polygon routine, with tests

e536a91

lasso and selectbox skeleton

5cad4ff

propagate dragbox cursor to coverSlip while dragging

ca60e63

fix modebar logic and tests for select dragmodes

76926d7

change polygon and its tests to multi-exports form

78d2867

polygon filtering algorithm

f0e6cfb

polygon filtering test

c0a94f7

special case of polygon for rectangles

12b43c6

selection on scatter points

07e5cef

clear hover when drag starts

b1a1c24

didn't end up using a separate lasso handler

1958475

alexcjohnson reviewed Dec 31, 2015
View reviewed changes

mdtusz reviewed Jan 4, 2016
View reviewed changes

desciption attribute value delimiters

bc04a15

etpinard reviewed Jan 6, 2016
View reviewed changes

fix nonlinear axes in select

710791d

alexcjohnson added 2 commits January 6, 2016 17:59

🐄

342f991

MINSELECT bigger than MINDRAG

b5c090f

etpinard mentioned this pull request Jan 6, 2016

Local jasmine test should use local topojson to plot geo maps #163

Closed

add lasso and selectbox icon

1d7745f

alexcjohnson added a commit that referenced this pull request Jan 6, 2016

Merge pull request #154 from plotly/lasso

f8a9a8d

Lasso & rectangular selections

alexcjohnson merged commit f8a9a8d into master Jan 6, 2016

alexcjohnson deleted the lasso branch January 6, 2016 20:38

This was referenced Jan 7, 2016

New build icons #169

Merged

Lasso and select-box support for traces other than scatter marker and scatter text #170

Closed

Bring back click events [fixes #173] #174

Merged

Issues encountered with new zoom functionality #181

Closed

etpinard mentioned this pull request Feb 16, 2016

Reset axis does not elminate select box #257

Closed

etpinard mentioned this pull request Jun 16, 2016

Mulitple fixes for multi-heatmap-trace plots #655

Merged

etpinard mentioned this pull request Jun 28, 2016

Support for making multiple selections using Box selector or Lasso selector tools in Plotly.js #698

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lasso & rectangular selections #154

Lasso & rectangular selections #154

alexcjohnson commented Dec 31, 2015

alexcjohnson commented Dec 31, 2015

jackparmer commented Dec 31, 2015

alexcjohnson Dec 31, 2015

etpinard Jan 4, 2016

alexcjohnson commented Dec 31, 2015

alexcjohnson Dec 31, 2015

delekru commented Dec 31, 2015

jackparmer commented Jan 1, 2016

mdtusz Jan 4, 2016

alexcjohnson Jan 4, 2016

alexcjohnson commented Jan 6, 2016

delekru commented Jan 6, 2016

delekru commented Jan 6, 2016

etpinard commented Jan 6, 2016

etpinard Jan 6, 2016

mdtusz Jan 6, 2016

cldougl Jan 6, 2016

alexcjohnson Jan 6, 2016

alexcjohnson commented Jan 6, 2016

etpinard commented Jan 6, 2016

etpinard commented Jan 6, 2016

cldougl commented Jan 6, 2016

ncammarata commented May 23, 2016 •

edited

Loading

chriddyp commented May 23, 2016

ncammarata commented May 24, 2016 •

edited

Loading

gszep commented Jul 25, 2022 •

edited

Loading

Lasso & rectangular selections #154

Lasso & rectangular selections #154

Conversation

alexcjohnson commented Dec 31, 2015

alexcjohnson commented Dec 31, 2015

jackparmer commented Dec 31, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexcjohnson commented Dec 31, 2015

Choose a reason for hiding this comment

delekru commented Dec 31, 2015

jackparmer commented Jan 1, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexcjohnson commented Jan 6, 2016

delekru commented Jan 6, 2016

delekru commented Jan 6, 2016

etpinard commented Jan 6, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexcjohnson commented Jan 6, 2016

etpinard commented Jan 6, 2016

etpinard commented Jan 6, 2016

cldougl commented Jan 6, 2016

ncammarata commented May 23, 2016 • edited Loading

chriddyp commented May 23, 2016

ncammarata commented May 24, 2016 • edited Loading

gszep commented Jul 25, 2022 • edited Loading

ncammarata commented May 23, 2016 •

edited

Loading

ncammarata commented May 24, 2016 •

edited

Loading

gszep commented Jul 25, 2022 •

edited

Loading