Creating a scatter plot in plotly without declaring multiple variables for the data

Question

The following records are a small sample of the dataset I'd like to plot using the scatter plot of the plotly library.

id  value   condition
1   0.00167736464652281 CM
1   0.00409236292494868 ECM
1   0.00402114732563961 SAX
2   0.0136247916329259  SAX
2   0.0151036287262202  ECM
2   0.0115020440436599  CM
3   0.0115571286240125  CM
3   0.0155058764871028  ECM
3   0.0162593141280405  SAX
4   0.0162953858863326  SAX
4   0.0172050279098291  ECM
4   0.0140566233578565  CM
5   0.0141510897863713  CM
5   0.0177908403313223  ECM
5   0.0181831372346949  SAX

According to the standard way (using this example) I should split the values into 3 variables - one per condition (e.g. var CM, var ECM, var SAX) as follows:

var CM = {
  x: [1, 2, 3, 4, 5],
  y: [0.00167736464652281, 0.0115020440436599, 0.0115571286240125, 0.0140566233578565, 0.0141510897863713],
  mode: 'markers',
  type: 'scatter'
};

Is there any smarter way to create the scatter plot using the structure of the sample data as it is?

what about using an arrow function for filtering your data?

Maximilian Peters
– Maximilian Peters

2018-05-22 18:48:38 +00:00
Commented May 22, 2018 at 18:48 — Maximilian Peters
– Maximilian Peters, Commented May 22, 2018 at 18:48
Could you please show me any sample code?

gkoul
– gkoul

2018-05-22 21:18:16 +00:00
Commented May 22, 2018 at 21:18 — gkoul
– gkoul, Commented May 22, 2018 at 21:18

Maximilian Peters · Accepted Answer · 2018-05-22 23:37:01Z

Assuming your data is in an array of objects, you could use the following approach.

Iterate over a set of your conditions

var conditions = new Set(data.map(a => a.condition));
conditions.forEach(function(condition) {
    var newArray = data.filter(function(el) {
        return el.condition == condition;
    });
})

Map id to x and value to y

traces.push({
    x: newArray.map(a => a.id),
    y: newArray.map(a => a.value),
    name: condition,
    mode: 'markers',
    type: 'scatter'
})

data = [];
data.push({
  'id': 1,
  'value': 0.00167736464652281,
  'condition': 'CM'
});
data.push({
  'id': 1,
  'value': 0.00409236292494868,
  'condition': 'ECM'
});
data.push({
  'id': 1,
  'value': 0.00402114732563961,
  'condition': 'SAX'
});
data.push({
  'id': 2,
  'value': 0.0136247916329259,
  'condition': 'SAX'
});
data.push({
  'id': 2,
  'value': 0.0151036287262202,
  'condition': 'ECM'
});
data.push({
  'id': 2,
  'value': 0.0115020440436599,
  'condition': 'CM'
});
data.push({
  'id': 3,
  'value': 0.0115571286240125,
  'condition': 'CM'
});
data.push({
  'id': 3,
  'value': 0.0155058764871028,
  'condition': 'ECM'
});
data.push({
  'id': 3,
  'value': 0.0162593141280405,
  'condition': 'SAX'
});
data.push({
  'id': 4,
  'value': 0.0162953858863326,
  'condition': 'SAX'
});
data.push({
  'id': 4,
  'value': 0.0172050279098291,
  'condition': 'ECM'
});
data.push({
  'id': 4,
  'value': 0.0140566233578565,
  'condition': 'CM'
});
data.push({
  'id': 5,
  'value': 0.0141510897863713,
  'condition': 'CM'
});
data.push({
  'id': 5,
  'value': 0.0177908403313223,
  'condition': 'ECM'
});
data.push({
  'id': 5,
  'value': 0.0181831372346949,
  'condition': 'SAX'
});

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>

Collectives™ on Stack Overflow

Creating a scatter plot in plotly without declaring multiple variables for the data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related