Interactive Heatmap

📊 Plotly Python
1

Hi to all,
i’m new to Plotly forum and my name is Roberto. I made this post because i would like to share my actual python programming problematic.
I’m developing a plot with 3 subplots, a heatmap at the top and two underlying scatterplots. My idea is to click on a heatmap cell to update the data shown in the two scatterplots. I tried to do this and i have read something about click events but i can’t figure out how to connect the click events to the heatmap cell and to the scatter traces

example
example.jpg1920×952 292 KB

The above example, shows my plot. I tried javascript solutions also, but i’m not a js expert.
This is my js attempt.

var gd = document.getElementById('45ca37dc-ef2f-449a-ab16-3d9b4e718791'),
hoverInfo = document.getElementById('hoverinfo');
myPlot.on('plotly_click', function(data){
    var infotext = data.points.map(function(d){
      return (d.data.text);
    });
    hoverInfo.innerHTML = infotext.join('');
    hoverInfo.style.left = +data.points[0].xaxis.l2p(data.points[0].x) + data.points[0].xaxis._offset + 'px';
    hoverInfo.style.top = +data.points[0].yaxis.l2p(data.points[0].y)+data.points[0].yaxis._offset+'px';
    //console.log(hoverInfo.style.left);
    //console.log(hoverInfo.style.top);
})
 .on('plotly_unhover', function(data){
    hoverInfo.innerHTML = '';
});

In this way i can grab the cell name after clicking on it but now i would like to use this info to get some traces by their name and make them visible.

Thanks in advance