Condition based coloring for scatter dots in Javascript

Hi all,

i have seen all showing conditional based in python or go e.t.c but in javascript i couldn’t find even one answer

here is my code. Now i have a dots based on vales. But i need coloring if the value is in between -12 and +12 red, if value is in between +12 and +40 green e.t.c

data = ;
data.push({
‘id’: “KitKat”,
‘value’: 12,
‘condition’: ‘CM’
});
data.push({
‘id’: “KitKat”,
‘value’: 12.2,
‘condition’: ‘ECM’
});
data.push({
‘id’: “KitKat”,
‘value’: -23,
‘condition’: ‘SAX’
});
data.push({
‘id’: “5Start”,
‘value’: 4,
‘condition’: ‘SAX’
});
data.push({
‘id’: “5Start”,
‘value’: 78,
‘condition’: ‘ECM’
});
data.push({
‘id’: “5Start”,
‘value’: 12,
‘condition’: ‘CM’
});
data.push({
‘id’: “ABC”,
‘condition’: ‘CM’
});
data.push({
‘id’: “DEF”,
‘condition’: ‘CM’
});
data.push({
‘id’: “XYZ”,
‘condition’: ‘CM’
});

console.log(data)
var conditions = new Set(data.map(a => a.condition));
traces = ;
conditions.forEach(function(condition) {
var newArray = data.filter(function(el) {
return el.condition == condition;
});
traces.push({
y: newArray.map(a => a.id),
x: newArray.map(a => a.value),
name: condition,
mode: ‘markers’,
type: ‘scatter’,
showlegend: false,
marker: {
color: [‘rgb(17, 157, 255)’,‘black’],
size: 10,
line: {
color: ‘rgb(231, 99, 250)’,
width: 6
}
}
})
})
Plotly.plot(‘myPlot’, traces);

how can i change coloring based on condition in javascript?

Please suggest me how i can achieve this