I am trying to make a plot with a violin plot and heatmap on it to visualize some data. I am trying to make it so that when I hover over one point on one of the graphs, the corresponding point on the other is highlighted/indicated in some way. You can see the work I am trying to do in this example https://codepen.io/wonderwally/pen/zYLjqVW. I am using Plotly.js v1.58.5 (by adding https://cdn.plot.ly/plotly-latest.min.js as a source to my script).
The gist of my code is that I generate the 2D array for the heatmap and also include the pointNumber
of the corresponding violin’s 1D array under the heatmap’s customdata
property. The violin plot receives a similar treatment.
The violin plot is made with a 1D array and includes the pointNumber
of the corresponding heatmap’s 2D array under the violin plot’s customdata
property.
As an example, if the heatmap 2D array is
[
[0.43, 0.50, 0.58],
[0.73, 0.18, 0.14]
]
and the violin plot’s 1D array is
[0.43, 0.50, 0.58, 0.73, 0.18,0.14]
the heatmap will have a customdata
feature of
[0, 1, 2, 3, 4, 5, 6]
and the violin plot will have a customdata
feature of
[[0, 0], [0, 1], [0, 2], [1, 0], [1, 1], [1,2]]
This is the section of code I am using to try and achieve the tandem hover event:
PLOTLY_GRAPHS.on('plotly_hover', function(eventdata) {
if (eventdata.points[0].data.type === 'violin') {
let violin_pointnum = eventdata.points[0].pointNumber;
let heatmap_pointnum = eventdata.points[0].customdata;
Plotly.Fx.hover(
'plotly_graphs',
[
{curveNumber: 0, pointNumber:violin_pointnum},
{curveNumber: 1, pointNumber:heatmap_pointnum},
],
[
'xy',
'x2y2',
]
);
}
if (eventdata.points[0].data.type === 'heatmap') {
let violin_pointnum = eventdata.points[0].customdata;
let heatmap_pointnum = eventdata.points[0].pointNumber;
Plotly.Fx.hover(
'plotly_graphs',
[
{curveNumber: 0, pointNumber:violin_pointnum,},
{curveNumber: 1, pointNumber:heatmap_pointnum,},
],
[
'xy',
'x2y2',
]
)
}
});
As you can see in the example https://codepen.io/wonderwally/pen/zYLjqVW, if you hover over a point in the violin plot, the corresponding heatmap point is indicated, but there isn’t any hovertext over that same, hovered-over violin plot point. However, when you hover over the heatmap, the corresponding violin plot point isn’t shown.