Heatmap indicating selection

plotly.js
1

Hello,

I was looking at the selection code described in this example: https://plot.ly/javascript/lasso-selection/ for a regular scatter plot. One thing I liked about this is that the unselected points change color to indicate the selection.

Is there some way to replicate this when making selections on a heatmap without changing the values within the heatmap data (i.e., the colorbar along the side)? For context, I’m editing a spectrogram. Programs like Adobe Audition add a new “layer” containing the selection on top of the spectrogram that is white and has ~20% opacity. It would be great to replicate this functionality.

Here’s what I’m doing now, which affects the actual heatmap data:

$('#spectrogram-heatmap').on('plotly_selected', function(eventData) {
    let range = eventData.handleObj.handler.arguments[1].range;

    // converts range data (i.e., 16.4 sec) to indices (143)
    let sel = new BoxSelection(xTicks, yTicks, range);  

    let dataWithSelections = $.extend(true, [], spectrogram.rawData);  // copy original data
    for (let y = sel.yStartIdx; y < sel.yEndIdx; y++) {
        for (let x = sel.xStartIdx; x < sel.xEndIdx; x++) {
            dataWithSelections[y][x] -= 50  
        }
    }

    Plotly.restyle('spectrogram-heatmap', {z: [dataWithSelections]});
}

Thanks!
-e

2

You can try listening to plotly_deselect and call restyle there.