I’m trying to dynamically apply multiple filters to a Plotly scatter plot using the transforms property. I want to use both (filter inside a range) and <> (filter outside a range) operations. While I can define these transforms during the initial plot creation, I’m having trouble dynamically updating them using Plotly.relayout.
Below is a simplified example that demonstrates the issue.
var xData = ['A', 'B', 'C', 'D', 'E'];
var yData = [10, 15, 8, 12, 7];
var customdata = [
{ metadata: { score1: 0, score2: 2 } },
{ metadata: { score1: 1, score2: 1 } },
{ metadata: { score1: 0, score2: 1 } },
{ metadata: { score1: 1, score2: 2 } },
{ metadata: { score1: 0, score2: 0 } }
];
var data = [{
type: 'scattergl',
x: xData,
y: yData,
mode: 'markers',
customdata: customdata,
transforms: [
{
type: 'filter',
target: customdata.map(item => item.metadata.score1), // Filter on score1
operation: '[]', // Include values in range
value: [0, 1] // Include score1 between 0 and 1
},
{
type: 'filter',
target: customdata.map(item => item.metadata.score2), // Filter on score2
operation: '<>', // Exclude values in range
value: [1, 2] // Exclude score2 between 1 and 2
}
]
}];
// Layout for the plot
var layout = {
title: 'Multiple Filters Example'
};
// Create the plot
Plotly.newPlot('myDiv', data, layout);
// Define new filter transforms
const newTransforms = [
{
type: 'filter',
target: 'customdata.metadata.score1',
operation: '<>', // Exclude values between 0 and 1
value: [0, 0]
},
{
type: 'filter',
target: 'customdata.metadata.score2',
operation: '[]', // Include values between 0 and 1
value: [0, 1]
}
];
// Attempt to update transforms using relayout
Plotly.relayout('myDiv', {
transforms: newTransforms // This doesn't seem to work
});