<h2class="panel-title"style="display:inline-block"data-toggle="tooltip"data-placement="right"title="Tip: control t-SNE algorithm and its parameters.">t-SNE Parameters</h2><divid="cost"style="display:inline-block; float:right"></div>
</div>
<divclass="panel-body">
<divid="control-panel"data-sr="enter left over 8s">
<labelid="data"for="param-dataset"data-toggle="tooltip"data-placement="right"title="Tip: use one of the data sets already provided or upload a new file.">Data sets</label>
<buttontype="button"class="button"id="FactRes"onclick="FactoryReset()"data-toggle="tooltip"data-placement="right"title="Tip: Restart the entire web page/application.">Factory reset</button>
<labelfor="param-perplexity"data-toggle="tooltip"data-placement="right"title="Tip: perplexity is a measure for information that is defined as 2 to the power of the Shannon entropy. The perplexity of a fair die with k sides is equal to k. In t-SNE, the perplexity may be viewed as a knob that sets the number of effective nearest neighbors. (Source: https://lvdmaaten.github.io/tsne/)">Perplexity</label>
<labelfor="param-learningrate"data-toggle="tooltip"data-placement="right"title="Tip: if the learning rate is too high, the data may look like a ‘ball’ with any point approximately equidistant from its nearest neighbours. If the learning rate is too low, most points may look compressed in a dense cloud with few outliers. If the cost function gets stuck in a bad local minimum increasing the learning rate may help. (Source: https://scikit-learn.org/stable/modules/generated/sklearn.manifold.TSNE.html)">Learning rate</label>
<labelfor="param-maxiter"style="padding: 25px 0 0 8px">Max iterations</label>
<labelfor="param-maxiter"style="padding: 25px 0 0 8px"data-toggle="tooltip"data-placement="right"title="Tip: maximum number of iterations for the optimization. Should usually be around 250. (Source: https://scikit-learn.org/stable/modules/generated/sklearn.manifold.TSNE.html)">Max iterations</label>
</div>
<divclass="col-md-4"style="padding: 25px 0 0 0px">
<labelfor="param-distance"data-toggle="tooltip"data-placement="right"title="Tip: distance different measurements. Usually Euclidean distance is used.">Distance metric</label>
<labelfor="param-transform"data-toggle="tooltip"data-placement="right"title="Tip: distance transformation measurements. Usually either no transformation or Log10/Asinh (logarithmic/hyperbolic) distance are used.">Data transform</label>
<p><divid="run-button"><buttonid="ExecuteBut"class="btn btn-primary btn-block"onclick="getData();"value="Execute new t-SNE analysis"style="margin-top: 4px"><iclass="fas fa-running fa-lg"style="margin-right: 10px"></i>Execute new t-SNE analysis</button></div></p>
</div>
<divclass="col-md-4"style="margin-top: 10px">
<label>
<inputid="downloadDists"checkedtype="checkbox">
<labeldata-toggle="tooltip"data-placement="right"title="Tip: if you store distances the file size will be larger but on a loading of this execution it will be processed much quicker than without this option enabled.">
<h2class="panel-title"style="display:inline-block"data-toggle="tooltip"data-placement="right"title="Tip: t-SNE overview with or without labels depending on each data set. To determine the feature of a data set that corresponds to classes set a * mark after this feature.">t-SNE Overview</h2><divid="datasetDetails"style="display:inline-block; float:right"></div>
<labelfor="param-corr"data-toggle="tooltip"data-placement="right"title="Tip: percentage of all points taken into account by Dimension Correlation.">Correlation threshold (%)</label>
<labelfor="param-lim"data-toggle="tooltip"data-placement="right"title="Tip: x*times the actual radius (increase/decrease points radius).">Points radius scaling</label>
<h2class="panel-title"data-toggle="tooltip"data-placement="right"title="Tip: a view related to the overall quality of the projection.">Shepard Heatmap</h2>
<h2class="panel-title"style="display:inline-block;">Density and Remaining Cost Distributions</h2>
<h2class="panel-title"style="display:inline-block;"data-toggle="tooltip"data-placement="right"title="Tip: it might be useful to take a look at this histogram, to observe the density and remaining cost distributions, when remaining cost values are low and have an idea about the distributions.">Density and Remaining Cost Distributions</h2>
<labelfor="param-costlim"style="display:inline-block; float: right"data-toggle="tooltip"data-placement="right"title="Tip: set the rate of the limiter for the minimum acceptable visible cost at the main visualization view.">Min. Visible Cost Rate: #<outputfor="param-costlim"id="param-costlim-value"style="display:inline-block; float:right">1</output></label>
varmaxKNN=Math.round(document.getElementById("param-perplexity-value").value*1.25);// Specify the amount of k neighborhoods that we are going to calculate. According to "perplexity."
varformat;
@ -1553,6 +1554,13 @@ function click(){ // This is the click of the Schema Investigation scenario
}
functionsortByKey(array,key){
returnarray.sort(function(a,b){
varx=a[key];vary=b[key];
return((x<y)?-1:((x>y)?1:0));
});
}
functionCalculateCorrel(flagForSchema){// Calculate the correlation is a function which has all the computations for the schema ordering (investigation).
if(flagForSchema==false){
@ -1611,14 +1619,16 @@ function CalculateCorrel(flagForSchema){ // Calculate the correlation is a funct
if(arraysCleared[i][5]<correlLimit){// Now we add a limit to the distance that we search according to the thresholder which the user changes through a slider.
if(i<=compareThreshold){// Now we add a limit to the distance that we search according to the thresholder which the user changes through a slider.
ArrayLimit.push(arraysCleared[i]);
}
}
vartemparray=[];
varcount=newArray(paths.nodes().length).fill(0);
@ -1793,15 +1803,20 @@ function CalculateCorrel(flagForSchema){ // Calculate the correlation is a funct
correlationResultsFinal[j][1]=parseFloat((correlationResultsFinal[j][1])).toFixed(2)*(-1);// Give the negative sign if needed and multiply by 100
}
if(SignStore[i][1]==correlationResults[j][1]){
correlationResultsFinal[j][1]=parseFloat((correlationResultsFinal[j][1])).toFixed(2);// Give a positive sign and multiply by 100
if(SignStore[i][0]==correlationResults[j][2]){
if(SignStore[i][1]<0)
{
correlationResultsFinal[j][1]=parseFloat((correlationResultsFinal[j][1])).toFixed(2)*(-1);// Give the negative sign if needed and multiply by 100
}
else
{
correlationResultsFinal[j][1]=parseFloat((correlationResultsFinal[j][1])).toFixed(2);// Give a positive sign and multiply by 100
}
}
}
}
}
//console.log(correlationResultsFinal);
drawBarChart();// Draw the horizontal barchart with the correlations.
}
@ -2328,8 +2343,7 @@ inside = inside + 1;
if(points.length){// If points exist (at least 1 point)
selectedPoints=[];
varfindNearestTable=[];
varhowManyPoints=0;
howManyPoints=0;
for(letm=0;m<points.length;m++){
//if (points[m].id == 257){
if(points[m].selected==true){
@ -2345,16 +2359,11 @@ if (points.length) { // If points exist (at least 1 point)
varfindNearest;
varviewport=getViewport();// Get the main viewport width height
varvw=viewport[0]*0.5;
varvh=viewport[1]*0.042;
varmaxKNN=Math.round(document.getElementById("param-perplexity-value").value*1.25);// Specify the amount of k neighborhoods that we are going to calculate. According to "perplexity."
//var maxKNN = 1;
selectedPoints.sort(function(a,b){// Sort the points according to ID.
returnparseFloat(a.id)-parseFloat(b.id);
});
findNearestTable=[];
for(k=maxKNN;k>0;k--){// Start from the maximum k value and go to the minimum (k=2).
varfindNearest=[];
@ -2430,67 +2439,22 @@ if (points.length) { // If points exist (at least 1 point)
}
findNearestTable.reverse();
d3.select("#hider").style("z-index",1);
d3.select("#knnBarChart").style("z-index",2);
vardata=[];
varlayout=[];
varkValuesLegend=[];
kValuesLegend=[];
for(vari=1;i<=maxKNN;i++){
kValuesLegend.push(i);
}
if(inside==1){
StoreInitialFindNearestTable=findNearestTable;
}
vartrace1={
x:kValuesLegend,
y:StoreInitialFindNearestTable,
name:'Projection average',
type:'bar',
marker:{
color:'rgb(0,0,0)'
}
};
vartrace2={
x:kValuesLegend,
y:findNearestTable,
name:'Selected points',
type:'bar',
marker:{
color:'rgb(0, 187, 187)'
}
};
varLimitXaxis=Number(maxKNN)+1;
data=[trace1,trace2];
layout={
barmode:'group',autosize:false,
width:dimensions*0.97,
height:vh*1.38,
margin:{
l:50,
r:30,
b:30,
t:5,
pad:4
},
xaxis:{range:[0,LimitXaxis],
title:'Number of neighbors',
titlefont:{
size:12,
color:'black'
}},
yaxis:{
title:'Pres., %',
titlefont:{
size:12,
color:'black'
}}};
$("#knnBarChartDetails").html("(Number of Selected Points: "+howManyPoints+"/"+dataFeatures.length+")");
varNBViewOptions=document.getElementById("param-NB-view").value;// Get the threshold value with which the user set's the boundaries of the schema investigation
NBViewOptions=parseInt(NBViewOptions);
console.log(NBViewOptions);
// Get the output text
varviewport=getViewport();// Get the main viewport width height
