Skip to content

Commit 6382b3e

Browse files
kirandeolkirandeol
authored
Added filtering features + size slider
1 parent 1f12e22 commit 6382b3e

File tree

1 file changed

+255
-9
lines changed

1 file changed

+255
-9
lines changed

‎index.html

Lines changed: 255 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,13 @@
181181
let nodeWeightThreshold = 0; // Use this to filter out low weight nodes
182182
let connWeightThreshold = 0; // Use this to filter out low slime mold connection
183183
let connWeightHighDimThreshold = 0;
184+
let planktonLatitudeThreshold = 0;
185+
let planktonLongitudeThreshold = 0;
186+
let planktonTThreshold = 0;
187+
let planktonSThreshold = 0;
188+
let planktonH1Threshold = 0;
189+
let planktonH2Threshold = 0;
190+
let planktonH3Threshold = 0;
184191

185192
let availableIds = {}; // List of IDs available, each entry is in format [id, info]
186193

@@ -265,6 +272,13 @@
265272
var colorMapBool = true;
266273
var colorMapDropDown;
267274
var subClassDropDown;
275+
var planktonLatFilter = [];
276+
var planktonLonFilter = [];
277+
var planktonTFilter = [];
278+
var planktonSFilter = [];
279+
var planktonH1Filter = [];
280+
var planktonH2Filter = [];
281+
var planktonH3Filter = [];
268282

269283
// actual calls
270284
init();
@@ -333,7 +347,15 @@
333347
'showAnnotations': true,
334348
'grayScale': false,
335349
'year': 2020.7,
336-
'timeSize': 1
350+
'timeSize': 1,
351+
'pointSize': 0.75,
352+
'plankton_lat': 0,
353+
'plankton_lon': 0,
354+
'plankton_t': 0,
355+
'plankton_s': 0,
356+
'plankton_h1': 0,
357+
'plankton_h2': 0,
358+
'plankton_h3': 0
337359
};
338360

339361
newAnnotationParam = {
@@ -354,17 +376,21 @@
354376
traceDataDirectory = dataDirectory;
355377

356378
scene.remove(scene.children[0]);
379+
initializeData();
380+
automaticLoadData(dataDirectory);
357381
camera.position.z = 800;
358382
camera.near = 5;
383+
359384
group = new THREE.Group();
360385
group.add(buildAxes( 1000 ))
361386
scene.add(group);
362387

363388
// FIXME: duplicated setup code
364-
/* if (dataDirectory === "data/plankton/") {
389+
if (dataDirectory === "data/plankton/") {
365390
const axesHelper = new THREE.AxesHelper( 500 );
366391
scene.add( axesHelper );
367-
} */
392+
}
393+
368394

369395
visualFolder.remove(colorMapDropDown);
370396
colorModeList = ["slime connect", "part of speech"];
@@ -439,15 +465,64 @@
439465
// updatePtsColor();
440466
// })
441467

442-
gui.add(GUIparam, 'particleConnectionWeight', 0, 100000).name('Filter LD').onChange(function(){
443-
connWeightThreshold = GUIparam.particleConnectionWeight;
468+
gui.add(GUIparam, 'pointSize', 0.001, 1).name('Point Size').onChange(function(size){
469+
for (let k = 0; k < maxParticleCount; k++)
470+
particleSize[k] = size;
444471
updatePtsColor();
445472
});
446473

447-
gui.add(GUIparam, 'particleHighDimConnectionWeight', 0, 100000).name('Filter HD').onChange(function(){
448-
connWeightHighDimThreshold = GUIparam.particleHighDimConnectionWeight;
449-
updatePtsColor();
450-
});
474+
if (dataDirectory === "data/global_1/" || dataDirectory === "data/global_2/" || (dataDirectory === "data/music_demo/")) {
475+
gui.add(GUIparam, 'particleConnectionWeight', 0, 100000).name('Filter Similarity').onChange(function () {
476+
connWeightThreshold = GUIparam.particleConnectionWeight;
477+
updatePtsColor();
478+
});
479+
}
480+
481+
if (dataDirectory === "data/global_1/" || (dataDirectory === "data/global_2/")) {
482+
gui.add(GUIparam, 'particleHighDimConnectionWeight', 0, 100000).name('Filter HD').onChange(function () {
483+
connWeightHighDimThreshold = GUIparam.particleHighDimConnectionWeight;
484+
updatePtsColor();
485+
});
486+
}
487+
488+
if (dataDirectory === "data/plankton/") {
489+
gui.add(GUIparam, 'plankton_lat', 0, 234044/2).name('Filter Latitude').onChange(function () {
490+
planktonLatitudeThreshold = GUIparam.plankton_lat;
491+
updatePtsColor();
492+
});
493+
494+
gui.add(GUIparam, 'plankton_lon', 0, 234044/2).name('Filter Longitude').onChange(function () {
495+
planktonLongitudeThreshold = GUIparam.plankton_lon;
496+
updatePtsColor();
497+
});
498+
499+
gui.add(GUIparam, 'plankton_t', 0, 234044/2).name('Filter T').onChange(function () {
500+
planktonTThreshold = GUIparam.plankton_t;
501+
updatePtsColor();
502+
});
503+
504+
gui.add(GUIparam, 'plankton_s', 0, 234044/2).name('Filter S').onChange(function () {
505+
planktonSThreshold = GUIparam.plankton_s;
506+
updatePtsColor();
507+
});
508+
509+
gui.add(GUIparam, 'plankton_h1', 0, 234044/2).name('Filter H1').onChange(function () {
510+
planktonH1Threshold = GUIparam.plankton_h1;
511+
updatePtsColor();
512+
});
513+
514+
gui.add(GUIparam, 'plankton_h2', 0, 234044/2).name('Filter H2').onChange(function () {
515+
planktonH2Threshold = GUIparam.plankton_h2;
516+
updatePtsColor();
517+
});
518+
519+
gui.add(GUIparam, 'plankton_h3', 0, 234044/2).name('Filter H3').onChange(function () {
520+
planktonH3Threshold = GUIparam.plankton_h3;
521+
updatePtsColor();
522+
});
523+
}
524+
525+
451526

452527
visualFolder.add(GUIparam, 'opacityTuning', 0, 1).name('Opacity').onChange(function(){
453528
opacityTuning = GUIparam.opacityTuning;
@@ -866,6 +941,33 @@
866941

867942
}
868943

944+
function showTooltipOG(objectPosition, text) {
945+
var divElement = $("#tooltip");
946+
947+
divElement.css({
948+
display: "block",
949+
opacity: 0.0
950+
});
951+
952+
var canvasHalfWidth = renderer.domElement.offsetWidth / 2;
953+
var canvasHalfHeight = renderer.domElement.offsetHeight / 2;
954+
955+
var tooltipPosition = objectPosition.clone().project(camera);
956+
tooltipPosition.x = (tooltipPosition.x * canvasHalfWidth) + canvasHalfWidth;
957+
tooltipPosition.y = -(tooltipPosition.y * canvasHalfHeight) + canvasHalfHeight;
958+
959+
var tooltipWidth = divElement[0].offsetWidth;
960+
var tooltipHeight = divElement[0].offsetHeight;
961+
962+
divElement.css({
963+
left: `${tooltipPosition.x + tooltipWidth / 16 - tooltipWidth/2}px`,
964+
top: `${tooltipPosition.y + tooltipHeight / 16 + 30}px`
965+
});
966+
967+
divElement.text(text);
968+
divElement.css({opacity: 0.7});
969+
}
970+
869971
function showTooltip(objectPosition, text) {
870972
var divElement = $("#tooltip");
871973

@@ -1036,6 +1138,29 @@
10361138
docReq.send();
10371139
}
10381140

1141+
if (dataDirectory === "data/plankton/") {
1142+
const column_files = {lat:planktonLatFilter, lon:planktonLonFilter, t:planktonTFilter,
1143+
s:planktonSFilter, H1:planktonH1Filter, H2: planktonH2Filter, H3:planktonH3Filter}
1144+
1145+
for (const property in column_files) {
1146+
var abbrev = property;
1147+
var temp_file_name = "static_sort/" + abbrev + ".csv";
1148+
1149+
var docReq = new XMLHttpRequest();
1150+
docReq.onload = function () {
1151+
var docsResponse = this.responseText.split(/\n/);
1152+
1153+
for (i = 0; i < docsResponse.length; i++) {
1154+
var temp_row = docsResponse[i].split(',');
1155+
column_files[property][i] = temp_row[0];
1156+
}
1157+
1158+
}
1159+
docReq.open("GET", dataDirectory + temp_file_name);
1160+
docReq.send();
1161+
}
1162+
}
1163+
10391164
getFileObject(data_dir + originAttr.toString() +".txt", function (anchorData) {
10401165
let reader = new FileReader();
10411166

@@ -1908,6 +2033,127 @@
19082033
}
19092034
}
19102035

2036+
if (dataDirectory === "data/plankton/") {
2037+
if (planktonTThreshold !== 0){
2038+
for (var cutoff = 0; cutoff < planktonTThreshold; cutoff++) {
2039+
var pos_point = planktonTFilter[cutoff - 1];
2040+
var neg_point = planktonTFilter[-cutoff];
2041+
2042+
particleColor[ pos_point * 3 ] = 0.0;
2043+
particleColor[ pos_point * 3 + 1 ] = 0.0;
2044+
particleColor[ pos_point * 3 + 2] = 0.0;
2045+
particleOpacity[pos_point] = 0.0;
2046+
2047+
particleColor[ neg_point * 3 ] = 0.0;
2048+
particleColor[ neg_point * 3 + 1 ] = 0.0;
2049+
particleColor[ neg_point * 3 + 2] = 0.0;
2050+
particleOpacity[neg_point] = 0.0;
2051+
}
2052+
}
2053+
if (planktonSThreshold !== 0) {
2054+
for (var cutoff = 0; cutoff < planktonSThreshold; cutoff++) {
2055+
var pos_point = planktonSFilter[cutoff - 1];
2056+
var neg_point = planktonSFilter[planktonSThreshold.length - cutoff];
2057+
2058+
particleColor[ pos_point * 3 ] = 0.0;
2059+
particleColor[ pos_point * 3 + 1 ] = 0.0;
2060+
particleColor[ pos_point * 3 + 2] = 0.0;
2061+
particleOpacity[pos_point] = 0.0;
2062+
2063+
particleColor[ neg_point * 3 ] = 0.0;
2064+
particleColor[ neg_point * 3 + 1 ] = 0.0;
2065+
particleColor[ neg_point * 3 + 2] = 0.0;
2066+
particleOpacity[neg_point] = 0.0;
2067+
}
2068+
2069+
}
2070+
if (planktonLatitudeThreshold !== 0) {
2071+
for (var cutoff = 0; cutoff < planktonLatitudeThreshold; cutoff++) {
2072+
var pos_point = planktonLatFilter[cutoff - 1];
2073+
var neg_point = planktonLatFilter[planktonLatFilter.length - cutoff];
2074+
2075+
particleColor[ pos_point * 3 ] = 0.0;
2076+
particleColor[ pos_point * 3 + 1 ] = 0.0;
2077+
particleColor[ pos_point * 3 + 2] = 0.0;
2078+
particleOpacity[pos_point] = 0.0;
2079+
2080+
particleColor[ neg_point * 3 ] = 0.0;
2081+
particleColor[ neg_point * 3 + 1 ] = 0.0;
2082+
particleColor[ neg_point * 3 + 2] = 0.0;
2083+
particleOpacity[neg_point] = 0.0;
2084+
}
2085+
2086+
}
2087+
if (planktonLongitudeThreshold !== 0) {
2088+
for (var cutoff = 0; cutoff < planktonLongitudeThreshold; cutoff++) {
2089+
var pos_point = planktonLonFilter[cutoff - 1];
2090+
var neg_point = planktonLonFilter[planktonLonFilter.length - cutoff];
2091+
2092+
particleColor[ pos_point * 3 ] = 0.0;
2093+
particleColor[ pos_point * 3 + 1 ] = 0.0;
2094+
particleColor[ pos_point * 3 + 2] = 0.0;
2095+
particleOpacity[pos_point] = 0.0;
2096+
2097+
particleColor[ neg_point * 3 ] = 0.0;
2098+
particleColor[ neg_point * 3 + 1 ] = 0.0;
2099+
particleColor[ neg_point * 3 + 2] = 0.0;
2100+
particleOpacity[neg_point] = 0.0;
2101+
}
2102+
2103+
}
2104+
if (planktonH1Threshold !== 0) {
2105+
for (var cutoff = 0; cutoff < planktonH1Threshold; cutoff++) {
2106+
var pos_point = planktonH1Filter[cutoff - 1];
2107+
var neg_point = planktonH1Filter[planktonH1Filter.length - cutoff];
2108+
2109+
particleColor[ pos_point * 3 ] = 0.0;
2110+
particleColor[ pos_point * 3 + 1 ] = 0.0;
2111+
particleColor[ pos_point * 3 + 2] = 0.0;
2112+
particleOpacity[pos_point] = 0.0;
2113+
2114+
particleColor[ neg_point * 3 ] = 0.0;
2115+
particleColor[ neg_point * 3 + 1 ] = 0.0;
2116+
particleColor[ neg_point * 3 + 2] = 0.0;
2117+
particleOpacity[neg_point] = 0.0;
2118+
}
2119+
}
2120+
if (planktonH2Threshold !== 0) {
2121+
for (var cutoff = 0; cutoff < planktonH2Threshold; cutoff++) {
2122+
var pos_point = planktonH2Filter[cutoff - 1];
2123+
var neg_point = planktonH2Filter[planktonH2Filter.length - cutoff];
2124+
2125+
particleColor[ pos_point * 3 ] = 0.0;
2126+
particleColor[ pos_point * 3 + 1 ] = 0.0;
2127+
particleColor[ pos_point * 3 + 2] = 0.0;
2128+
particleOpacity[pos_point] = 0.0;
2129+
2130+
particleColor[ neg_point * 3 ] = 0.0;
2131+
particleColor[ neg_point * 3 + 1 ] = 0.0;
2132+
particleColor[ neg_point * 3 + 2] = 0.0;
2133+
particleOpacity[neg_point] = 0.0;
2134+
}
2135+
2136+
}
2137+
if (planktonH3Threshold !== 0) {
2138+
for (var cutoff = 0; cutoff < planktonH3Threshold; cutoff++) {
2139+
var pos_point = planktonH3Filter[cutoff - 1];
2140+
var neg_point = planktonH3Filter[planktonH3Filter.length -cutoff];
2141+
2142+
particleColor[ pos_point * 3 ] = 0.0;
2143+
particleColor[ pos_point * 3 + 1 ] = 0.0;
2144+
particleColor[ pos_point * 3 + 2] = 0.0;
2145+
particleOpacity[pos_point] = 0.0;
2146+
2147+
particleColor[ neg_point * 3 ] = 0.0;
2148+
particleColor[ neg_point * 3 + 1 ] = 0.0;
2149+
particleColor[ neg_point * 3 + 2] = 0.0;
2150+
particleOpacity[neg_point] = 0.0;
2151+
}
2152+
2153+
}
2154+
}
2155+
2156+
19112157
}
19122158

19132159
// Update dropdown

0 commit comments

Comments
 (0)