Condition based coloring for scatter dots in Javascript

plotly.js
1

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

2

would be nice to be able to do this also with a third dimension rather than to have to create separate series.

I have data of web server request date time, duration and response status and would like to plot the duration over time, easy, and color the markers depending on the status, not so easy, but shouldn’t be that hard right?

3

I think you would just create a variable, and assign the color code based on the condition result. Something like this:

let myColor;

if(a.value >= -12 && a.value <=12) {
    myColor = "red";
} else if(a.value >=13 && a.value <=40) {
   myColor = "green";
} else {
   myColor="black";
}

Then, in your layout, set color: myColor,