Display (a different) value under scatter point

Specific Domains Visualization
,
1

Plotlyjs is giving me a plot that doesn’t seem to be finding the closest scatter point to my cursor (indicated by black arrow):

using Plots
plotlyjs()
scatter(x1, x2)

Slide1
Slide1720×540 32.8 KB

My question is:

  1. How can I display the name of each point based on x- and y- coordinate of my cursor?
  2. If I actually want the displayed value to be different, how can I change that? For instance, I am plotting the 5th and 6th column of a dataframe (see image below), but when I hover over the points, I want to display the corresponding values in the 3rd and 4th column:

fdsa
fdsa1668×702 37.7 KB

1 Like
2

try the hover attribute

1 Like
3

Thank you, I was able to add the name to the points. However the plots are still not displaying the node that is closest to my cursor. Do you know how to fix this?

Slide1
Slide1720×540 33.4 KB

For future reference, this is how I did it:

#construct the name array
name = Array{String}(size(x, 1))
for i in 1:length(name)
name[i] = x[i, 3] * " & " * x[i, 4]
end

scatter(x[:empiric_kinship], x[:theoretical_kinship],
xlabel = “empiric kinship”, ylabel = “theoretical kinship (θ)”,
hover = name)

4

Yes there’s something fishy going on with the plotly hovers and the mouse position, always have been. Not even sure this is Plots creating trouble or happens in plotly itself.
It’s actually really annoying, but not sure how to fix.

5

There’s a button in the top right corner of the plot that switches between “show all points” and “show closest point”. Have you tried that?

3 Likes
6

Ahhhhhhhhhhh I feel stupid. Thank you so much. It works!

7

If you want to change the behavior programatically, you can do

p=plot(); PlotlyJS.relayout!(p.o,hovermode="closest")

Alternative values are "x" (the default) and "y" (which doesn’t seem to be accessible from the GUI).

3 Likes
8

What! I feel even more stupid :open_mouth:
:heart:

9

@Ralph_Smith I’m having trouble implementing your line;

using Plots
using PlotlyJS: relayout!
plotlyjs()

x = rand(10)
y = rand(10)

p = plot(x, y)
PlotlyJS.relayout!(p.o, hovermode="closest")

Whatever p.o is, it is nothing;

ERROR: LoadError: MethodError: no method matching relayout!(::Nothing; hovermode="closest")
Closest candidates are:
  relayout!(::PlotlyJS.SyncPlot) at /root/.julia/packages/PlotlyJS/h3GxO/src/display.jl:196 got unsupported keyword argument "hovermode"
  relayout!(::PlotlyBase.Layout) at /root/.julia/packages/PlotlyBase/YSDKA/src/api.jl:116 got unsupported keyword argument "hovermode"
  relayout!(::PlotlyBase.Layout, ::AbstractDict; kwargs...) at /root/.julia/packages/PlotlyBase/YSDKA/src/api.jl:116
10

Hey, I found a fix. there is a function within the plots backend that otuputs SyncPlot to be used in relayout. Also note that relayout is called without the “!”


using Plots
using PlotlyJS: relayout
plotlyjs()

x = rand(10)
y = rand(10)
p = Plots.plot(x, y)
PlotlyJS.relayoutPlots.plotlyjs_syncplot(p), hovermode="closest")

Hope that helps!

11

Hmmm, I’m getting

julia> PlotlyJS.relayoutPlots.plotlyjs_syncplot(p, hovermode="closest")
ERROR: UndefVarError: relayoutPlots not defined
Stacktrace:
 [1] getproperty(x::Module, f::Symbol)
   @ Base .\Base.jl:26
 [2] top-level scope
   @ REPL[11]:1
12

The following works fine:

using Plots; plotlyjs()
using PlotlyJS: relayout
x = rand(10)
y = rand(10)
p = Plots.plot(x, y)
PlotlyJS.relayout!(p.o,hovermode="closest")
13

yeah i think i made a typo at the top.