Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// from https://plot.ly/javascript/dropdowns/
// NEXT: aggregate density and cost-specific datas with math
// Data: Wants Gearhead Actuators: harmonic + stepper, harmonic + bldc, planetary + both
// Data: BLDC Motors
Plotly.d3.csv('data.csv', function(err, rows){
// get array of this key
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
console.log(rows);
for (var i = rows.length - 1; i >= 0; i--) {
rows[i]["Specific Torque (N*m / kg)"] = rows[i]["Constant Torque (N*m)"] / rows[i]["Weight (kg)"];
rows[i]["Cost Specific Torque (N*m / USD)"] = rows[i]["Constant Torque (N*m)"] / rows[i]["Cost (USD)"];
rows[i]["Specific Power (w / kg)"] = rows[i]["Power (W)"] / rows[i]["Weight (kg)"];
}
// for sorting
var allSetNames = unpack(rows, 'Set'),
listofSets = [],
chosenSets = [],
listofValues = Object.getOwnPropertyNames(rows[0]),
traces = []; // of traces, for re-drawing
console.log(rows);
// find unique set names
for (var i = 0; i < allSetNames.length; i++ ){
if (listofSets.indexOf(allSetNames[i]) === -1 ){
listofSets.push(allSetNames[i]);
}
}
// Default data
chosenSets = ['Steppers', 'Servos', 'BLDCs', 'BLDC GM', 'BLDC HD', 'BLDC HD-A'];
setChart(listofValues[8], listofValues[9]);
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
function setChart(chosenXStat, chosenYStat) {
traces = [];
for (var i = chosenSets.length - 1; i >= 0; i--) {
var xdata = [];
var ydata = [];
var names = [];
for (var j = allSetNames.length - 1; j >= 0; j--) {
if(allSetNames[j] === chosenSets[i]){
xdata.push(unpack(rows, chosenXStat)[j]);
ydata.push(unpack(rows, chosenYStat)[j]);
names.push(unpack(rows, 'Name')[j]);
}
}
var trace = {
x: xdata,
y: ydata,
name: chosenSets[i],
mode: 'markers+text',
text: names,
textposition: 'bottom center',
marker: {
size: 12,
opacity: 0.5,
}
};
traces.push(trace);
}
var layout = {
title:'modplot',
height: 1000,
width: 1000,
xaxis: {
type:'log',
autorange: true,
title:'x'
},
yaxis: {
type:'log',
autorange: true,
title:'y'
}
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
};
Plotly.newPlot('plotdiv', traces, layout);
};
// some DOM
var innerContainer = document.querySelector('[data-num="0"'),
plotEl = innerContainer.querySelector('.plot'),
xSelector = innerContainer.querySelector('.xdropdown'),
ySelector = innerContainer.querySelector('.ydropdown');
setSelector = document.getElementById('setdiv');
// write options into dropdowns
function assignOptions(textArray, div) {
for (var i = 2; i < textArray.length; i++) {
var currentOption = document.createElement('option');
currentOption.text = textArray[i];
div.appendChild(currentOption);
}
}
function makeCheckboxes(textArray, div){
for (var i = textArray.length - 1; i >= 0; i--) {
var button = document.createElement("button");
button.innerHTML = textArray[i];
button.addEventListener("click", toggleSet, false)
div.appendChild(button);
}
}
assignOptions(listofValues, xSelector);
assignOptions(listofValues, ySelector);
makeCheckboxes(listofSets, setSelector);
xSelector.value = listofValues[8];
ySelector.value = listofValues[9];
// update after dropdown
function updateChart(){
setChart(xSelector.value, ySelector.value);
}
function toggleSet(event){
var setName = event.explicitOriginalTarget.innerHTML;
if(chosenSets.includes(setName)){
var index = chosenSets.indexOf(setName);
if(index > -1){
chosenSets.splice(index, 1);
}
} else {
chosenSets.push(setName);
}
updateChart();
}
xSelector.addEventListener('change', updateChart, false);
ySelector.addEventListener('change', updateChart, false);
});