search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
17.09k stars 1.87k forks source link

Hover over lines in parallel coordinate chart #3012

Open lakshaykc opened 6 years ago

lakshaykc commented 6 years ago

Parallel coordinate charts are useful when we have to filter out data across multiple dimensions and play with the constraints interactively. It would be nice to have a hover feature over the lines which would display their respective IDs or labels so to identify which row or column it is.

Currently, I am not able to hover over or extract out the data filtered data from the chart which is the goal of a parallel coordinate chart.

alexcjohnson commented 6 years ago

Great idea. We currently do emit plotly_hover and plotly_unhover events that point to individual items, but we don't show hover labels, nor is there a way to access the set of selected items. These would be great to add.

lakshaykc commented 6 years ago

I'd like to work on that. How can I add that (maybe on my fork)? Can someone guide me a bit through the code?

alexcjohnson commented 6 years ago

Absolutely! Here are the PR guidelines: https://github.com/plotly/plotly.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md

Lets discuss this as two separate features (and two separate PRs), one for hover and another for filtered data.

Re: hover - here's where the events are emitted:

https://github.com/plotly/plotly.js/blob/ed39d82a9aa809f1de06f0050572a6d55fb524f8/src/traces/parcoords/plot.js#L57-L63

You'd just need to plumb in Fx.loneHover and Fx.loneUnhover before the event emissions. A good model for that may be gl3d:

https://github.com/plotly/plotly.js/blob/ed39d82a9aa809f1de06f0050572a6d55fb524f8/src/plots/gl3d/scene.js#L117-L133

https://github.com/plotly/plotly.js/blob/ed39d82a9aa809f1de06f0050572a6d55fb524f8/src/plots/gl3d/scene.js#L165

Re: extracting the filtered data: This one is tougher, as parcoords manages all of that on the GPU. I'm not sure what the best way to get back to js will be... have the shaders write selection data back into a buffer/texture as a bitmask perhaps, then convert that to an array of indices in js?

Then there's the question of where to put the resulting selection. We can certainly emit plotly_selecting and plotly_selected events once we have this data, but it would be great if it were available as part of the state, not just in events. Most other trace types define a selectedpoints attribute, but we can't (just) do that with parcoords because the selection is defined by the dimension filters. That said, it would be great for crossfiltering purposes if we did have a way to specify a selection independent of the dimension filters (like in the example @jonmmease made for parcats https://github.com/plotly/plotly.js/pull/2963#issuecomment-420769904). Perhaps a (writable) selectedpoints attribute as an input that acts as an additional filter beyond the dimension selections, then a (read-only) fullTrace._finalSelectedpoints array giving the resulting selection? We should hash out this API before anyone starts work on this part.

lakshaykc commented 6 years ago

Thanks for the pointers. I was working with plotly python version, and thought I could do it from the python wrapper. I am new to javascript. Let me go through some of the basics regarding events and play around with the code a little more. I'll try to add in the hover label atleast. I welcome any suggestions or references to start with events handling in JS.

skylogic004 commented 5 years ago

+1 this would be a great feature!

How's the progress on this?

iakouchine commented 5 years ago

Any progress on this feature?

renatobellotti commented 5 years ago

I'd love to see this. That would be a real simplification for outlier detection and removal.

nitin0301 commented 4 years ago

any update on this? much needed feature! Thanks for working on this...

aquan9 commented 4 years ago

I would love to have this feature if anyone is working on it. Any updates on the status? The lack of this feature is forcing me to find another plotting library at the moment. Thank you for any progress.

erinhwilson commented 4 years ago

I love the sliding filter on the y-axes but same as @aquan9, I'm a little stuck without being able to see info about which data points I'm actually selecting. Would love to use this feature when possible :)

ped59430 commented 4 years ago

+1

jackparmer commented 4 years ago

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:

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

lakshaykc commented 4 years ago

Sorry for being out of the loop on this one. I haven't gotten around working with JS, so I wouldn't be able to work on this right now.

TomyPoty commented 3 years ago

Any news for this feature? Or is there any alternative library (also for R) that contains the hover feature?

nilswagner commented 1 year ago

+1