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

[etpinard]

Lasso and select-box were added in https://github.com/plotly/plotly.js/pull/154

Adding support for other trace types should be as easy as adding a selectPoints to the other trace modules.

[etpinard]

cc @dfcreative @chriddyp @jackwluo

[jackparmer]

Top ones for crossfilter project:

• [ ] Line charts
• [x] Bar charts done in https://github.com/plotly/plotly.js/pull/2045
• [x] Histograms done in https://github.com/plotly/plotly.js/pull/2045
• [x] Choropleths done in #2030
• [x] scattergeo done in #2030
• [x] box with boxpoints: 'all' done in https://github.com/plotly/plotly.js/pull/2094
• [ ] heatmap (at least for zsmotth: false bricks)

[jackparmer]

For bar chart and histogram selection, I think just touching a bar should include it in a selection. Thoughts @cpsievert based on plotly.js selections in Shiny apps?

[etpinard]

For the record, I'd vote for having to select 1/2 of the bar's area. Not a strong opinion though.

[morganh35]

I am anxious to get this feature working and would be willing to help implement it. Is there an estimate of the timeline for this feature?

[cpsievert]

For bar chart and histogram selection, I think just touching a bar should include it in a selection.

Yea, we can already link views in this way via the R package (via click or hover):

Thoughts @cpsievert based on plotly.js selections in Shiny apps?

R users can leverage most common plotly.js events (e.g., ,plotly_click, plotly_hover, plotly_selected, plotly_relayout, etc) both inside and outside of shiny. Regardless, being able to brush multiple bars would be of some use.

I'd vote for having to select 1/2 of the bar's area. Not a strong opinion though.

No strong opinion here either, but I think I'd prefer that we force selection of the entire bar. One reason being that you could imagine a system where you could partially select a bar that represented multiple observations

[jackparmer]

@morganh35 We'll be rolling out lasso or box select for the rest of Plotly.js trace types over the next few months. If you need this feature for a project at your workplace, we'd love to hear from you

[monfera]

For the record, there are some traces that work with crossfilter in a view mode, ie. crossfiltering yields a feedback (when whitelisting them in the dashboard code), even though they weren't yet made suitable for crossfilter:

• scattergeo: works well in view mode but has no box/lasso selector (observe the glitch that is the resetting of the map upon crossfiltering, a problem not present with scattermapbox or scatter)

• bar: works in display mode, although the red bars (retained set) are added on the side rather than replace/overlap the original bars; bars also have no box / lasso

[jackparmer]

@monfera The difference between initiating a crossfilter and responding to a crossfilter is a really good point.

For the customer project we've been working on, I confirmed today that only choropleths and geoscatter need to initiate crossfilter (in addition to what we already have already - scattermapbox and scatter). The other chart types still need to respond to crossfilter, but as you mentioned we're doing that outside of plotly.js for this project.

[chriddyp]

• [ ] Parcoords (Requested by dash user: https://github.com/plotly/dash-core-components/issues/101)

[etpinard]

Parcoords (Requested by dash user: plotly/dash-core-components#101)

How would that work?

[chriddyp]

I think they are expecting to be able to listen to these axes-filter-highlight-bar events and get the data corresponding to the lines that were selected / highlighted

[chriddyp]

If that event and event data is already accessible through a separate event than selected then I can provide that to the dash users through a separate interface

[monfera]

At the moment, there's a plotly_restyle event is generated upon release of the magenta brush bar. Currently there's no return value as the actual data point filtering is being done in the GPU. It's straightforward to have a filter loop on the CPU side but it has to be written. A basic algo would be quadratic (one loop on data and another on constrained dimensions) but it's a long&narrow thing so in reality it's more like linear. It would've been too slow for interactive filtering but a JS double loop is fast enough if only invoked on event.

[slishak]

For clarifaction (I submitted the issue) - yes, I was hoping to be able to use the selection bars on a parcoords plot to control which data is plotted on a separate scatter plot (so I can plot two dimensions against each other while interactively eliminating/focusing on other dimensions). For me it would make sense if the event data was a list of indices into the plotted data. Equally (if it's internally easier to do) I could take the raw highlighted ranges and use them to filter the data myself in a callback function.

[monfera]

@slishak if the need is urgent, maybe you could subscribe to the plotly_restyle event, query the filter ranges and do a basic nested loop across data points and constrained dimensions. Here's an example for the plotly_restyle event:

1. Go to https://codepen.io/monfera/pen/xLNqXN
2. Open the Dev Console so you see the console log
3. Move a magenta bar, release it and see the new filter ranges in the console log
4. This shows an array with as many elements as there are dimensions; constrained dimensions have [from, to] arrays while the unconstrained ones just have undefined
5. Loop through the data index 0..n (outer loop) and loop through the constrained dimensions and push indices that fulfill all the current dimension constraints

Would this work?

[slishak]

Yes, this approach would work well for me (having access to the actual ranges is just as useful as the "selected" indices, if not more so). However, I'm not sure how to accomplish this from within Dash/Python. It's not too urgent as I can fall back on multiple RangeSlider components for now, but the parcoords approach is certainly neater.

[cosmin-novac]

Is someone working on enabling plotly_selected for the heatmap?

[jackparmer]

@tenshis not currently - it would be great if you could work on this!

[jackparmer]

@tenshis Here's a mock for how we were considering plotly_selected in a heatmap:

Essentially if you lasso the centroid of the cell, the entire cell highlights as "selected."

[destradafilm]

@etpinard @jackparmer Since this feature isn't yet available. Is there a way to stylize heatmap cells individually? Like ability to specify the color of a certain cell, or add a marker line for a cell?

[NotInControl]

@etpinard is this supported for pie charts? Dont see it in the code myself but cant say I fully understand the plotly code base either. Could you please help point me in the right direction on how to get select events working on a pie chart.

Thanks

[anhtram72]

@tenshis not currently - it would be great if you could work on this!

I am interested to work on this. How to participate to work on this issue?

[archmoj]

@tenshis not currently - it would be great if you could work on this!

I am interested to work on this. How to participate to work on this issue?

@alexcjohnson this seems to be related to adding selection to heatmap which could be little tricky. If so, how about starting a new issue as a place holder just for that?

[alexcjohnson]

Let's keep the discussion here for now. Looking at @jackparmer's comment https://github.com/plotly/plotly.js/issues/170#issuecomment-317063282 the only remaining items are heatmap and line - is that right or is there anything else people would like add selections to? I'm not sure what this would look like for lines so for now I'm just going to talk about heatmaps.

I think what will be needed is:

• attributes for selection styling - as far as I can see the only thing that really makes sense would be unselected.opacity. Or perhaps it wouldn't really be an opacity, if we implement this by overlaying a shape that partially masks the heatmap? Then it could be something like unselected.fade and unselected.bgcolor?
• figure out what the selectedpoints attribute should look like for heatmap traces - I guess when the heatmap came from all 1D arrays it can just be an array of indices, but when z is a 2D array, the equivalent of an array of point indices would be an array of length-2 arrays, [row, column]? This line from hover (that controls hover and click event data) looks like the behavior to match:

https://github.com/plotly/plotly.js/blob/5b8b1db1386b82db747cbad239fed754e624a18f/src/traces/heatmap/hover.js#L115

• Implement the selection by making a heatmap/selectedPoints routine - the PRs linked in https://github.com/plotly/plotly.js/issues/170#issuecomment-317063282 should give a good idea how to implement this and expose it in the trace module.
• Implement drawing the selection within heatmap/plot or heatmap/style. The two general ways I can imagine doing this are: (1) alter the colors of the image we draw for the heatmap itself, or (2) mask the image element. (1) would be pretty easy to implement, but I don't think it'll do what we need: it would mean redrawing the whole heatmap every time a new element is added to or removed from the selection (heatmap/plot), and it would make blurred edges with zsmooth: fast. (2) will be trickier to implement but can go in heatmap/style and would have crisp edges regardless of zsmooth.

[thomashusebo]

Selecting multiple cells in the heatmap is done by plotting a scatter of the heatmap values along with the heatmap. Thus the lasso tool selects points from the scatter. The points from the scatter are in the center of the heatmap cells, thus the cells of the heatmap will appear to be chosen if the center of the cell is within the lasso

from here

Don't know if this sufficient for what is needed, but this was my workaround for using lasso tool on heatmaps. Would be really nice to have this work without having to plot twice.

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

[MarcSkovMadsen]

I would also love to have the Box Select option for heat maps so that I could use Plotly as the plotting backend for the below example