search

plotly / plotly.js

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

Improve hover behavior for overlapping points in scatterplot #4294

Open lorentzen99 opened 4 years ago

lorentzen99 commented 4 years ago

In my scatterplot I have multiple points that overlap. Each point has different data to it, and much of the hoverdata is unavailable.

Suggestion: an icon or number somewhere indicating that a point has overlapping data, perhaps coupled with onclick functionality that lets the user inspect all points (either in-graph, sub-plot, or in a table?).

etpinard commented 4 years ago

Essentially a duplicate of https://github.com/plotly/plotly.js/issues/720 I think.

lorentzen99 commented 4 years ago

I should add I am using Plotly Express and only 1 trace.

jamesalang commented 4 years ago

Have you overcome the overlapping data problem? I am having the same problem.

vologdin commented 4 years ago

I am having the same problem

johann-petrak commented 4 years ago

The hvplot library does this much better and shows hover data for all identical data points.

I think this is a serious issue to consider since it can easily hide important information when exploring data.

One important question would be if hover data should be shown for all data points which have exactly identical x/y coordinates only or for all data points which are "very close" to the coordinate represented by the cursor position, i.e. within a small bounding box around the cursor position (I guess this is what "overlapping" means here).

nicolaskruchten commented 4 years ago

It's a good feature and we'd love to have it in the library but it's not on anyone's roadmap at the moment as far as I know. That said, we as maintainers would be happy to help someone from the community to implement it in Plotly.js, or to accept sponsorship to get it on to our short-term roadmap :)

nicolaskruchten commented 4 years ago

@johann-petrak what does hvplot do when there are e.g. 100 points under the cursor? is there some summarization option like "... and 98 other points" or something? I'd love to see a screenshot or get some sample code for that library so I can poke around :)

johann-petrak commented 4 years ago

Here is a zip file that contains a notebook which illustrates how hvplot does this: it creates a huge stack of hover boxes which exceed the vertical size of the viewable area inside a notebook. I think this happens because the notebook viewable area does not have a maximum height defined. If the same happens in a web page where the height is defined by the window size, I think the stack gets "broken" up into several side-by side stacks, but I do not know what happens if that would cover the whole area. I do not think they have some kind "overflow" options where any additional hover boxes would get summarized somehow.

The notebook also illustrates how hvplot differs in how it shows hover information for long texts, which will cover the cursor/point shown in plotly but not in hvplot.

plotly_scatter_hover1.zip

michaelfBoxer commented 3 years ago

Anyone have any pointers for how to implement a multihover to this?

nicolaskruchten commented 3 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: $15k-$25k

What Sponsorship includes:

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

ssine commented 3 years ago

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this. preview:

archmoj commented 3 years ago

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this. preview:

Sounds good. Here are few questions/considerations before opening the PR. Is lodash really needed there? Could you possibly replace it with Lib.extendDeep functions? Kindly use ES5 syntax : ) Please do not to commit the dist folder. Thank you!

ssine commented 3 years ago

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this. preview:

Sounds good. Here are few questions/considerations before opening the PR. Is lodash really needed there? Could you possibly replace it with Lib.extendDeep functions? Kindly use ES5 syntax : ) Please do not to commit the dist folder. Thank you!

I was just doing a quick & dirty hack to set up my grafana dashboard, do you think the way I implement this seems suitable for merging (without option to show the last point only like before)? If so, I will definitely clean up the code with consistent code style.

archmoj commented 3 years ago

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this.

Sounds good. Here are few questions/considerations before opening the PR. Is lodash really needed there? Could you possibly replace it with Lib.extendDeep functions? Kindly use ES5 syntax : ) Please do not to commit the dist folder. Thank you!

I was just doing a quick & dirty hack to set up my grafana dashboard, do you think the way I implement this seems suitable for merging (without option to show the last point only like before)? If so, I will definitely clean up the code with consistent code style.

Well. This ticket is a feature not a bug. So I think it would be best to add a layout attribute to control this.

ssine commented 3 years ago

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this.

Sounds good. Here are few questions/considerations before opening the PR. Is lodash really needed there? Could you possibly replace it with Lib.extendDeep functions? Kindly use ES5 syntax : ) Please do not to commit the dist folder. Thank you!

I was just doing a quick & dirty hack to set up my grafana dashboard, do you think the way I implement this seems suitable for merging (without option to show the last point only like before)? If so, I will definitely clean up the code with consistent code style.

Well. This ticket is a feature not a bug. So I think it would be best to add a layout attribute to control this.

Sure, maybe we need some discussion about naming? I can do this in the future when I have time.

alaafarahid89 commented 2 years ago

@ssine , can you share your solution

alaafarahid89 commented 2 years ago

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this. preview:

Can you share your hack solution ?

ssine commented 2 years ago

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this. preview:

Can you share your hack solution ?

Hi @alaafarahid89 , Just compare the differences in this fork: https://github.com/plotly/plotly.js/compare/master...ssine:master

gvwilson commented 2 months ago

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson

johann-petrak commented 2 months ago

I believe this is basically the same as https://github.com/plotly/plotly.py/issues/2476 ?

And probably also the same as #5097 ?