< html >
< head >
<!-- Ignore Favicon - > Solved the warning in console of the browser. -->
< link rel = "icon" href = "data:;base64,iVBORw0KGgo=" >
<!-- Three.js and Lodash libraries -->
< script src = './modules/three.js-r101/three.js' > < / script >
< script src = './modules/lodash/lodash.js' > < / script >
<!-- Importing D3 minified versions v3 and v5. -->
< script src = './modules/d3v3/d3.min.js' > < / script >
< script src = './modules/d3/d3.min.js' > < / script >
<!-- Importing additional modules such as PCP, annotator, tip, legend, lasso, papaParse, and Jquery. -->
< script src = './modules/d3-annotations/d3-annotator.js' > < / script >
< script src = "./modules/d3-tip/tip.js" > < / script >
< script src = "./modules/d3-legend/d3-legend.min.js" > < / script >
< script src = "./modules/d3-lasso/lasso.js" > < / script >
< script src = "./modules/plotly/plotly_min.js" > < / script >
< script src = "./modules/pcp/d3v3.parcoords.js" > < / script >
< script src = "./modules/papa/papaparse.min.js" > < / script >
< script src = "./modules/jquery/jquery.min.js" > < / script >
<!-- Basic scripts that we execute. -->
< script src = "./js/tsne.js" > < / script >
< script src = "./js/data_form_handler.js" > < / script >
< script src = "./modules/pca/pca.js" > < / script >
<!-- CSS - Styling -->
< link rel = "stylesheet" href = "./css/style.css" / >
< link rel = "stylesheet" href = "./css/bootstrap.min.css" / >
< link rel = "stylesheet" href = "./css/d3.parcoords.css" >
< link rel = "stylesheet" href = "./css/reset.css" >
<!-- Bootstrap -->
< script src = "./modules/bootstrap/bootstrap.min.js" > < / script >
< / head >
< body >
< div class = "container-fluid" >
< div class = "row" >
< div class = "col-md-3" >
< div class = "panel panel-default" >
< div class = "panel-heading" >
< h2 class = "panel-title" style = "display:inline-block" > t-SNE Overview< / h2 > < div id = "datasetDetails" style = "display:inline-block; float:right" > < / div >
< / div >
< div class = "row" >
< div class = "panel-body" >
< div class = "col-md-6" >
< div id = "overviewRect" > < / div >
< / div >
< div class = "col-md-6" >
< div style = "display:block" id = "CategoryName" > < / div >
< div class = "legend" id = "legend2" > < / div >
< / div >
< / div >
< / div >
< div id = "control-panel" class = "PoinRadius" >
< div class = "param" >
< label for = "param-lim" > Points radius scaling factor< / label >
< input id = "param-lim" type = "range" min = "1" max = "3" value = "3" , step = "0.5" onchange = "setReInitialize(true);" >
< output for = "param-lim" id = "param-lim-value" > 3< / output >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-6" >
< svg id = "SvgAnnotator" > < / svg >
< svg id = "modtSNEcanvas_svg" > < / svg >
< svg id = "modtSNEcanvas_svg_Schema" > < / svg >
< div id = "modtSNEDiv" >
< canvas id = "modtSNEcanvas" > < / canvas >
< / div >
< / div >
< div class = "col-md-1" style = "width: 3.499999995%" >
< svg id = "legend1" > < / svg >
< svg id = "legend4" > < / svg >
< / div >
< div class = "col-md-2" style = "width: 21.499999995%" >
< div class = "panel panel-default" >
< div class = "panel-heading" >
< h2 class = "panel-title" > Select Different Modes< / h2 >
< / div >
< div class = "panel-body" >
< div id = "resetAllFilters" style = "margin-bottom: 40px" >
< button class = "btn btn-info btn-block active" onclick = "setLayerProj();" > t-SNE points exploration< / button >
< button class = "btn btn-info btn-block" onclick = "setLayerComp();" > Points selection and data features comparison< / button >
< button class = "btn btn-info btn-block" onclick = "setLayerSche();" > Schema investigation< / button >
< / div >
< button class = "btn btn-info btn-block" onclick = "setReset();" > Reset all filters< / button >
< label style = "margin-top: 15px" >
< input id = "controls" type = "checkbox" >
Hide annotations' controllers
< / label >
< label style = "margin-top: 15px" >
< input id = "downloadDists" checked type = "checkbox" >
Distances cache (Save Exec.)
< / label >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-3" >
< div class = "panel panel-default" >
< div class = "panel-heading" >
< h2 class = "panel-title" > Shepard Heatmap< / h2 >
< / div >
< div class = "panel-body" >
< div class = "row" >
< div class = "col-md-6" >
< svg id = "sheparheat" > < / svg >
< / div >
< div class = "col-md-2" >
< svg id = "legend3" > < / svg >
< div id = "hider2" > < / div >
< div id = "PlotCost" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-3 col-md-offset-6" >
< div class = "panel panel-default right-side-cor" >
< div class = "panel-heading" >
< h2 class = "panel-title" style = "display:inline-block" > Correl. Schema Investigation< / h2 > < div class = "param" style = "display:inline-block; float:right" > < label for = "param-corlim" style = "display:inline-block; float: right" > Mininum Correlation: #< output for = "param-corlim" id = "param-corlim-value" style = "display:inline-block; float:right" > 0.0< / output > < / label >
< input id = "param-corlim" type = "range" min = "0" max = "1" value = "0.0" , step = "0.1" style = "display:inline-block; float:right" onchange = "CalculateCorrel(true);" >
< / div >
< / div >
< div class = "panel-body" >
< svg id = "correlation" > < / svg >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-3" >
< div class = "panel panel-default" id = "left-side-param" >
< div class = "panel-heading" >
< h2 class = "panel-title" style = "display:inline-block" > t-SNE Parameters< / h2 > < div id = "cost" style = "display:inline-block; float:right" > < / div >
< / div >
< div class = "panel-body" >
< div id = "control-panel" data-sr = "enter left over 8s" >
< div class = "param" >
< label id = "data" for = "param-dataset" > Data sets< / label >
< select id = "param-dataset" name = "param-dataset" onChange = "changeDataset(this.value);" >
< option value = "diabetes.csv" selected > Pima Indian Diabetes< / option >
< option value = "breast-cancer-wisconsin.csv" > Breast Cancer Wisconsin< / option >
< option value = "iris.csv" > Iris< / option >
< option value = "winequality-red.csv" > Red Wine - Quality< / option >
< option value = "empty" > Upload New File< / option >
< / select >
< button type = "button" class = "button" id = "FactRes" onclick = "FactoryReset()" > Factory Reset< / button >
< / div >
< div class = "param" >
< label for = "param-perplexity" > Perplexity< / label >
< input id = "param-perplexity" type = "range" min = "5" max = "100" value = "30" , step = "1" >
< output for = "param-perplexity" id = "param-perplexity-value" > 30< / output >
< / div >
< div class = "param" >
< label for = "param-learningrate" > Learning rate< / label >
< input id = "param-learningrate" type = "range" min = "1" max = "150" value = "10" , step = "1" >
< output for = "param-learningrate" id = "param-learningrate-value" > 10< / output >
< / div >
< div class = "param" >
< label for = "param-maxiter" > Max iterations< / label >
< input id = "param-maxiter" type = "range" min = "10" max = "1000" value = "500" , step = "10" >
< output for = "param-maxiter" id = "param-maxiter-value" > 500< / output >
< / div >
< div class = "param" >
< label for = "param-distance" > Distance metric< / label >
< select id = "param-distance" name = "param-distance" >
< option value = "euclideanDist" selected > Euclidean distance< / option >
< option value = "jaccardDist" > Jaccard dissimilarity< / option >
< / select >
< input id = "file-input" type = "file" name = "name" style = "display: none;" / >
< button type = "button" class = "button" onclick = 'loadAnalysis();' > Load Execut.< / button >
< / div >
< div class = "param" >
< label for = "param-transform" > Data transform< / label >
< select id = "param-transform" name = "param-transform" >
< option value = "noTrans" selected > No transform< / option >
< option value = "logTrans" > Log10< / option >
< option value = "asinhTrans" > Asinh< / option >
< option value = "binTrans" > Binarize< / option >
< / select >
< button type = "button" class = "button" onclick = "SaveAnalysis()" > Save Execut.< / button >
< / div >
< p > < div id = "run-button" > < button id = "ExecuteBut" class = "btn btn-primary btn-block" onclick = "getData();" value = "Execute new t-SNE analysis" > Execute new t-SNE analysis< / button > < / div > < / p >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-3 col-md-offset-6" >
< div class = "panel panel-default right-side-star" >
< div class = "panel-heading" >
< h2 class = "panel-title" > Parallel Coordinates Plot (with Local PCA Calculation)< / h2 >
< / div >
< div class = "panel-body" >
< div id = "PCP" class = "parcoords" > < / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-3" >
< div class = "panel panel-default" id = "left-side-visual" >
< div class = "panel-heading" >
< h2 class = "panel-title" > Visual Mapping Parameters< / h2 >
< / div >
< div class = "row" >
< div class = "panel-body" >
< div class = "col-md-12" >
< div id = "ThumbNailsList" >
< div class = "param" >
< label for = "male" > Density (1/sigma)< / label >
< select id = "param-neighborHood" name = "param-neighborHood" onchange = "setReInitialize(true);" style = "display:inline-block" >
< option selected = "selected" value = "color" > Color-encoding< / option >
< option value = "size" > Size-encoding< / option >
< / select >
< button class = "button" onclick = "deleteAnnotations();" style = "display:inline-block; float:right" > Delete Annotations< / button >
< / div >
< output for = "param-neighborHood" id = "param-neighborHood-value" > < / output >
< label for = "male" > Final Cost (Kullback-Leibler Divergence)< / label >
< label id = "selectionLabel" style = "margin-top:4px" > Size-encoding< / label >
< div id = "param-correlation" >
< div class = "param" >
< label for = "param-corr" > Correlation threshold< / label >
< input id = "param-corr" type = "range" min = "0" max = "750" value = "150" , step = "25" onchange = "CalculateCorrel(true);" >
< output for = "param-corr" id = "param-corr-value" > 150< / output >
< / div >
Annotation: < textarea type = "text" id = "comment" name = "textforAnnotator" style = "margin-top:4px" placeholder = "Please, provide your comment." > < / textarea >
< / div >
< div id = "commBtn" >
< div class = "param" style = "margin-top:4px" >
< div id = "toggleAnnotator" > < button class = "btn btn-default btn-block" onclick = "setAnnotator();" > Addition of a new comment< / button > < / div >
< / div >
< div class = "param" style = "margin-top:4px" >
< div id = "continue" > < button class = "btn btn-default btn-block active" onclick = "setContinue();" > Continuation of the analysis< / button > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = col-md-6 >
< div class = "panel panel-default med-bottom" >
< div class = "panel-heading" >
< h2 class = "panel-title" style = "display:inline-block" > Neighborhood Preservation< / h2 > < div id = "knnBarChartDetails" style = "display:inline-block; float:right" > < / div >
< / div >
< div class = "panel-body" >
< div id = "hider" > < / div >
< div id = "knnBarChart" > < / div >
< / div >
< / div >
< / div >
< div class = "col-md-3" id = "extra-information" style = "width: 24.6vw" >
< div class = "panel panel-default right-side-hist" >
< div class = "panel-heading" >
< h2 class = "panel-title" style = "display:inline-block;" > 1/sigma and KLD Distributions< / h2 > < div class = "param" style = "display:inline-block; float:right" > < label for = "param-costlim" style = "display:inline-block; float: right" > Cost Limiter: #< output for = "param-costlim" id = "param-costlim-value" style = "display:inline-block; float:right" > 1< / output > < / label >
< input id = "param-costlim" type = "range" min = "0.1" max = "1" value = "1" , step = "0.1" style = "display:inline-block; float:right" onchange = "setReInitialize(false);" >
< / div >
< / div >
< div class = "panel-body" >
< div id = "costHist" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< script >
$("#cost").html('(Unknown Iteration and Cost Values.)');
$("#datasetDetails").html('(Unknown Number of Features and Instances.)');
$("#CategoryName").html('No Classification');
$("#knnBarChartDetails").html('(Number of Selected Points: 0/0)');
/* This script is used in order to give functionalities to the different buttons provide through the front-end. */
$('#param-lim').bind('input', function () { $('#param-lim-value').text($('#param-lim').val()); });
$('#param-corr').bind('input', function () { $('#param-corr-value').text($('#param-corr').val()); });
$('#param-corlim').bind('input', function () { $('#param-corlim-value').text($('#param-corlim').val()); });
$('#param-costlim').bind('input', function () { $('#param-costlim-value').text($('#param-costlim').val()); });
$('#param-perplexity').bind('input', function () { $('#param-perplexity-value').text($('#param-perplexity').val()); });
$('#param-earlyexag').bind('input', function () { $('#param-earlyexag-value').text($('#param-earlyexag').val()); });
$('#param-learningrate').bind('input', function () { $('#param-learningrate-value').text($('#param-learningrate').val()); });
$('#param-maxiter').bind('input', function () { $('#param-maxiter-value').text($('#param-maxiter').val()); });
// Get the container element
var btnContainer = document.getElementById("commBtn"); //Add a new comment button
// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length ; i + + ) {
btns[i].addEventListener("click", function() {
let current = document.getElementById("commBtn").getElementsByClassName("active");
current[0].className = current[0].className.replace("btn btn-default btn-block active", "btn btn-default btn-block");
this.className += " active";
});
}
// Get the container element
var btnContainer2 = document.getElementById("resetAllFilters"); //resetAllFilters button
// Get all buttons with class="btn" inside the container
var btns2 = btnContainer2.getElementsByClassName("btn");
for (var i = 0; i < btns2.length ; i + + ) {
btns2[i].addEventListener("click", function() {
let current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace("btn btn-info btn-block active", "btn btn-info btn-block");
this.className += " active";
});
}
< / script >
< script >
/* On resize refresh the shepardHeatmap */
window.onresize = function(event) {
if ( document.getElementById('cost').hasChildNodes() ) {
// Clear legend for the shepardHeatmap
//var svgLegend = d3.select("#legend3");
//svgLegend.selectAll("*").remove();
// Clear the SheapHeardmap before refreshing
//var svg = d3.select("#sheparheat");
//svg.selectAll("*").remove();
// Call the ShepardHeatmap again to be redrawn
//ShepardHeatMap();
MainVisual();
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length ; i + + ) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
< / script >
<!-- Load the core visualization script. -->
< script src = "./js/tsne_vis.js" > < / script >
< / body >
< / html >
