Condition based coloring on scatter plot using plotly js

Question

I have x axis as some range ex: -100, -50, -12, -6, 0, 6, 12, 50, 100 and y axis is labels for ex: different chocolate brand name kitkat, 5star, milkybar, e.t.c or vice versa X and y Axis

I want scatter plots for each brands and conditional coloring( for each brand different conditions for coloring) ex: for kitkat brand, if value is in range less than or equal to -6 and +6 yellow color scatter plot, if greater that 6 green, if less than -6 it should be red. 5star - if value is in range less than or equal to -12 and +12 yellow color scatter, if greater that 12 green, if less than -12 it should be red.

I am new bee to plotly js. and i am finding x,y values in all examples but unable to find like brands in y axis and values in x axis.

i want each brand have respective scatters on that horizonal line only now am unable to show that.

here is my data,

[{"kitkat":[1, -9, 60, 5, 19],
"5star":[20,-78,12,18,90],
"milkybar":[-67,20,-8,90,12]}]

i tried this code but am unable to give each brand each data and even coditional coloring

this one initial:

data = [];
data.push({
  'id': "KitKat",
  'value': 12,
  'condition': 'CM'
});
data.push({
  'id': "KitKat",
  'value': 4,
  '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': 78,
  'condition': 'CM'
});
data.push({
  'id': "ABC",
  'condition': 'CM'
});
data.push({
  'id': "DEF",
  'condition': 'CM'
});
data.push({
  'id': "XYZ",
  'condition': 'CM'
});


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({
    x: newArray.map(a => a.id),
    y: newArray.map(a => a.value),
    name: condition,
    mode: 'markers',
    type: 'scatter'
  })
})
Plotly.plot('myPlot', traces);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot"></div>

Can anyone suggest how to achieve my output

mit · Accepted Answer · 2022-03-16 22:57:10Z

2

+50

trace.marker.color accepts an array, which you can use to give an individual color to each data point.

const data = [
  {
    "id": "kitkat",
    "value": 12,
    "condition": "CM"
  },
  {
    "id": "kitkat",
    "value": 4,
    "condition": "ECM"
  },
  {
    "id": "kitkat",
    "value": -23,
    "condition": "SAX"
  },
  {
    "id": "milkyway",
    "value": 12,
    "condition": "CM"
  },
  {
    "id": "milkyway",
    "value": 4,
    "condition": "ECM"
  },
  {
    "id": "milkyway",
    "value": -23,
    "condition": "SAX"
  }
];

const conditions = ["CM", "ECM", "SAX"];

function getColor(data) {
  // enter your conditional coloring code here
  if (data.id === 'kitkat' && data.value > 0) {
    return '#0000FF'
  }
  return '#FF0000';
}

const traces = conditions.map(condition => {
  const filteredData = data.filter(d => d.condition === condition);
  return {
    x: filteredData.map(d => d.id),
    y: filteredData.map(d => d.value),
    name: condition,
    mode: 'markers',
    type: 'scatter',
    marker: {
      color: filteredData.map(d => getColor(d))
    }
  };
});

Plotly.plot('myPlot', traces, {showlegend: false});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot"></div>

answered Mar 16, 2022 at 22:57

mit

1,3409 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3599302 Over a year ago

Hi @mit, thanks and i will try this. one small question, can i even add bar as background for kitkat and milkyway. i mean bar and inside bar same scatter as we have now?

mit Over a year ago

Sorry, but that goes beyond the scope of your original question...

user3599302 Over a year ago

can we fix x axis values to -100, -50, -12, -6, 0, 6, 12, 25, 50, 100 ?

Collectives™ on Stack Overflow

Condition based coloring on scatter plot using plotly js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related