Создание точечной диаграммы без объявления нескольких переменных для данных - PullRequest
Новая
       50

Создание точечной диаграммы без объявления нескольких переменных для данных

0 голосов
/ 22 мая 2018

Следующие записи представляют собой небольшой образец набора данных, который я хотел бы построить с использованием точечной диаграммы библиотеки графиков. 

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

В соответствии со стандартным способом (используя этот пример ) Я должен разделить значения на 3 переменные - по одной на условие (например, var CM, var ECM, var SAX) следующим образом: 

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

Есть ли какой-нибудь более умный способ создания точечной диаграммы с использованиемСтруктура выборочных данных как есть?

1 Ответ

0 голосов
/ 23 мая 2018

Предполагая, что ваши данные находятся в массиве объектов, вы можете использовать следующий подход:

  • Выполните итерацию по набору ваших condition s 

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

  • Карта id на x и value на 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>
...