0
|
1 // Copyright (c) 2016 Northrop Grumman.
|
|
2 // All rights reserved.
|
|
3
|
|
4 var updateScatter3D = function(){
|
|
5 scatterData3D['selectedPopulations'] = [];
|
|
6 scatterData3DMFI['selectedPopulations'] = [];
|
|
7 $('.pop3D').each(function() {
|
|
8 if (this.checked) {
|
|
9 scatterData3D['selectedPopulations'].push(parseInt(this.value));
|
|
10 scatterData3DMFI['selectedPopulations'].push(parseInt(this.value));
|
|
11 }
|
|
12 });
|
|
13 processScatterData3D();
|
|
14 processScatterData3DMFI();
|
|
15 displayScatterPlot3D();
|
|
16 };
|
|
17
|
|
18 var processScatterData3D = function() {
|
|
19 var xData = [],
|
|
20 yData = [],
|
|
21 zData = [],
|
|
22 popData = [],
|
|
23 pop = [],
|
|
24 col1 = [],
|
|
25 col2 = [],
|
|
26 col3 = [],
|
|
27 min = Number.MAX_VALUE,
|
|
28 max = Number.MIN_VALUE;
|
|
29
|
|
30 min = d3.min(scatterData3D['data'], function(array) {
|
|
31 return d3.min(array);
|
|
32 });
|
|
33 max = d3.max(scatterData3D['data'], function(array) {
|
|
34 return d3.max(array);
|
|
35 });
|
|
36 scatterData3D['min'] = 0;
|
|
37 scatterData3D['max'] = max;
|
|
38
|
|
39 col1 = scatterData3D['data'].map(function(value,index) {
|
|
40 return value[scatterData3D['m1']];
|
|
41 });
|
|
42 col2 = scatterData3D['data'].map(function(value,index) {
|
|
43 return value[scatterData3D['m2']];
|
|
44 });
|
|
45 col3 = scatterData3D['data'].map(function(value,index) {
|
|
46 return value[scatterData3D['m3']];
|
|
47 });
|
|
48 pop = scatterData3D['data'].map(function(value,index) {
|
|
49 return value[scatterData3D['popCol']];
|
|
50 });
|
|
51
|
|
52 for (var i = 0, j = col1.length; i < j; i++) {
|
|
53 if (scatterData3D['selectedPopulations'].indexOf(pop[i]) >= 0) {
|
|
54 xData.push(col1[i]);
|
|
55 yData.push(col2[i]);
|
|
56 zData.push(col3[i]);
|
|
57 popData.push(pop[i]);
|
|
58 }
|
|
59 }
|
|
60
|
|
61 scatterData3D['popColors'] = popData.map(function(value,index) {
|
|
62 return color_palette[0][value][0];
|
|
63 });
|
|
64 scatterData3D['xData'] = xData;
|
|
65 scatterData3D['yData'] = yData;
|
|
66 scatterData3D['zData'] = zData;
|
|
67 scatterData3D['popData'] = popData;
|
|
68 return scatterData3D;
|
|
69 };
|
|
70
|
|
71 var displayScatterToolbar3D = function() {
|
|
72 $("#xAxisMarker3D").select2();
|
|
73 $("#yAxisMarker3D").select2();
|
|
74 $("#zAxisMarker3D").select2();
|
|
75 $("#view3D").select2();
|
|
76
|
|
77 scatterData3D['columnHeadings'].map(function(value,index) {
|
|
78 $('#xAxisMarker3D')
|
|
79 .append($("<option></option>")
|
|
80 .attr("value",index)
|
|
81 .text(value));
|
|
82
|
|
83 $('#yAxisMarker3D')
|
|
84 .append($("<option></option>")
|
|
85 .attr("value",index)
|
|
86 .text(value));
|
|
87
|
|
88 $('#zAxisMarker3D')
|
|
89 .append($("<option></option>")
|
|
90 .attr("value",index)
|
|
91 .text(value));
|
|
92 });
|
|
93
|
|
94 $('#xAxisMarker3D').select2("val",0);
|
|
95 $('#yAxisMarker3D').select2("val",1);
|
|
96 $('#zAxisMarker3D').select2("val",2);
|
|
97
|
|
98 $("#xAxisMarker3D").on("change",function(e) {
|
|
99 var m1 = $("#xAxisMarker3D").select2("val");
|
|
100 scatterData3D['m1'] = m1;
|
|
101 scatterData3DMFI['m1'] = m1;
|
|
102 updateScatter3D();
|
|
103 });
|
|
104 $("#yAxisMarker3D").on("change",function(e) {
|
|
105 var m2 = $("#yAxisMarker3D").select2("val");
|
|
106 scatterData3D['m2'] = m2;
|
|
107 scatterData3DMFI['m2'] = m2;
|
|
108 updateScatter3D();
|
|
109 });
|
|
110 $("#zAxisMarker3D").on("change",function(e) {
|
|
111 var m3 = $("#zAxisMarker3D").select2("val");
|
|
112 scatterData3D['m3'] = m3;
|
|
113 scatterData3DMFI['m3'] = m3;
|
|
114 updateScatter3D();
|
|
115 });
|
|
116
|
|
117 $("#view3D").on("change",function(e) {
|
|
118 var view = $("#view3D").select2("val");
|
|
119 scatterData3D['view'] = view;
|
|
120 updateScatter3D();
|
|
121 });
|
|
122
|
|
123 $("#updateDisplay3D").on("click",function() {
|
|
124 $(".pop3D").prop("checked", true);
|
|
125 $("#selectall3D").prop('checked', true);
|
|
126 updateScatter3D();
|
|
127 });
|
|
128 };
|
|
129
|
|
130 var displayScatterPopulation3D = function() {
|
|
131 $("#populationTable3D tbody").empty();
|
|
132 scatterData3D['populations'].map(function(value) {
|
|
133 $('#populationTable3D tbody')
|
|
134 .append('<tr><td align="center">'
|
|
135 + '<input type="checkbox" checked class="pop3D" value='
|
|
136 + value + '/></td><td title="'+ newNames[value]
|
|
137 + '">'+ newNames[value] + '</td>'
|
|
138 + '<td><span style="background-color:'
|
|
139 + color_palette[0][value][0] + '">  </span></td>'
|
|
140 + '<td>' + scatterData3D['percent'][value - 1] + '</td></tr>');
|
|
141 });
|
|
142
|
|
143 $('#selectall3D').click(function() {
|
|
144 var checkAll = $("#selectall3D").prop('checked');
|
|
145 if (checkAll) {
|
|
146 $(".pop3D").prop("checked", true);
|
|
147 } else {
|
|
148 $(".pop3D").prop("checked", false);
|
|
149 }
|
|
150 updateScatter3D();
|
|
151 });
|
|
152 $('.pop3D').click(function() {
|
|
153 if ($('.pop3D').length == $(".pop3D:checked").length) {
|
|
154 $('#selectall3D').prop("checked",true);
|
|
155 } else {
|
|
156 $('#selectall3D').prop("checked",false);
|
|
157 }
|
|
158 updateScatter3D();
|
|
159 });
|
|
160
|
|
161 $('.pop3D').each(function() {
|
|
162 var selectedpop3D = parseInt(this.value);
|
|
163 if ($.inArray(selectedpop3D,scatterData3D['selectedPopulations']) > -1) {
|
|
164 this.checked = true;
|
|
165 } else {
|
|
166 this.checked = false;
|
|
167 }
|
|
168 });
|
|
169 };
|
|
170
|
|
171 var displayScatterPlot3D = function() {
|
|
172 var h = $(window).height() - 200,
|
|
173 w = $("#scatterPlotDiv3D").width(),
|
|
174 xtitle = scatterData3D['columnHeadings'][scatterData3D['m1']],
|
|
175 ytitle = scatterData3D['columnHeadings'][scatterData3D['m2']],
|
|
176 ztitle = scatterData3D['columnHeadings'][scatterData3D['m3']],
|
|
177 view = scatterData3D['view'],
|
|
178 traces = [],
|
|
179 layout = {};
|
|
180
|
|
181 $("#scatterPlotDiv3D").empty();
|
|
182 $("#scatterPlotDiv3D").height(h);
|
|
183
|
|
184 if ( view == 1 || view == 2 ) {
|
|
185 var trace1 = {
|
|
186 x: scatterData3D['xData'],
|
|
187 y: scatterData3D['yData'],
|
|
188 z: scatterData3D['zData'],
|
|
189 mode: 'markers',
|
|
190 opacity: .75,
|
|
191 hoverinfo: "none",
|
|
192 marker: {
|
|
193 size: 2,
|
|
194 color: scatterData3D['popColors']
|
|
195 },
|
|
196 type: 'scatter3d'
|
|
197 };
|
|
198 traces.push(trace1);
|
|
199 };
|
|
200
|
|
201 if ( view == 1 || view == 3) {
|
|
202 var trace2 = {
|
|
203 x: scatterData3DMFI['xData'],
|
|
204 y: scatterData3DMFI['yData'],
|
|
205 z: scatterData3DMFI['zData'],
|
|
206 mode: 'markers',
|
|
207 opacity: 1.0,
|
|
208 hoverinfo: "x+y+z",
|
|
209 marker: {
|
|
210 symbol: "circle-open",
|
|
211 size: 8,
|
|
212 color: scatterData3DMFI['popColors']
|
|
213 },
|
|
214 type: 'scatter3d'
|
|
215 };
|
|
216 traces.push(trace2);
|
|
217 }
|
|
218
|
|
219 layout = {
|
|
220 title: '',
|
|
221 showlegend: false,
|
|
222 scene: {
|
|
223 aspectratio: {
|
|
224 x: 1,
|
|
225 y: 1,
|
|
226 z: 1
|
|
227 },
|
|
228 camera: {
|
|
229 center: {
|
|
230 x: 0,
|
|
231 y: 0,
|
|
232 z: 0
|
|
233 },
|
|
234 eye: {
|
|
235 x: 1.25,
|
|
236 y: 1.25,
|
|
237 z: 1.25
|
|
238 },
|
|
239 up: {
|
|
240 x: 0,
|
|
241 y: 0,
|
|
242 z: 1
|
|
243 }
|
|
244 },
|
|
245 xaxis: {
|
|
246 type: 'linear',
|
|
247 title: xtitle,
|
|
248 range: [0, scatterData3D['max']],
|
|
249 zeroline: false
|
|
250 },
|
|
251 yaxis: {
|
|
252 type: 'linear',
|
|
253 title: ytitle,
|
|
254 range: [0, scatterData3D['max']],
|
|
255 zeroline: false
|
|
256 },
|
|
257 zaxis: {
|
|
258 type: 'linear',
|
|
259 title: ztitle,
|
|
260 range: [0, scatterData3D['max']],
|
|
261 zeroline: false
|
|
262 }
|
|
263 }
|
|
264 };
|
|
265
|
|
266 Plotly.newPlot('scatterPlotDiv3D', traces, layout);
|
|
267 };
|