< html >
< head >
<!-- Ignore Favicon - > Solved the warning in console of the browser. -->
< link rel = "icon" href = "data:;base64,iVBORw0KGgo=" >
<!-- To be removed!!! -->
< script src = './modules/three.js-r101/three.js' > < / script >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/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 starPlot, annotator, tip, legend, switch, papaParse, and Jquery. -->
< script src = './modules/d3-star/d3-starPlot.js' > < / script >
< 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/savage.toggle-switch.js" type = "text/javascript" > < / 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/checkbox.js" > < / script >
< script src = "./js/data_form_handler.js" > < / script >
< script src = "./lasso.js" > < / script >
<!-- CSS - Styling -->
< link rel = "stylesheet" href = "./css/style.css" / >
< link rel = "stylesheet" href = "./css/bootstrap.min.css" / >
< link rel = "stylesheet" href = "./css/dc.css" / >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" >
<!-- Bootstrap -->
< script src = "./modules/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" >
< h3 class = "panel-title" > t-SNE Overview< / h3 >
< / div >
< div class = "row" >
< div class = "panel-body" >
< div class = "col-md-6" >
< canvas id = "tSNEcanvas" > < / canvas >
< / div >
< div class = "col-md-2" >
< div class = "legend" id = "legend3" > < / div >
< / div >
< / div >
< / div >
< div id = "control-panel" >
< div class = "param" >
< label for = "param-lim" > Points radius scaling factor< / label >
< input id = "param-lim" type = "range" min = "0.25" max = "4" value = "2" , step = "0.25" >
< output for = "param-lim" id = "param-lim-value" > 2< / output >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-6" >
< svg id = "SvgAnnotator" > < / svg >
< svg id = "modtSNEcanvas_svg" > < / svg >
< div id = "modtSNEDiv" >
< canvas id = "modtSNEcanvas" > < / canvas >
< / div >
< / div >
< div class = "col-md-1" style = "width: 3.499999995%" >
< svg id = "legend1" > < / svg >
< / div >
< div class = "col-md-2" style = "width: 21.499999995%" >
< div class = "panel panel-default" >
< div class = "panel-heading" >
< h3 class = "panel-title" > Select different modes< / h3 >
< / div >
< div class = "panel-body" >
< div id = "resetAllFilters" style = "margin-bottom: 40px" >
< button class = "btn btn-info btn-block active" onclick = "setLayerProj();" > Layer: t-SNE projection< / button >
< button class = "btn btn-info btn-block" onclick = "setLayerComp();" > Layer: kNN limiter and data features comparison< / button >
< button class = "btn btn-info btn-block" onclick = "setLayerSche();" > Layer: 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 >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-3" >
< div class = "panel panel-default" >
< div class = "panel-heading" >
< h3 class = "panel-title" > Shepard Heatmap< / h3 >
< / 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 = "legend4" > < / svg >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-3 col-md-offset-6" >
< svg id = "correlation" > < / svg >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-3" >
< div class = "panel panel-default" >
< div class = "panel-heading" >
< h3 class = "panel-title" > t-SNE Parameters< / h3 >
< / 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 = "winequality-red.csv" > Red Wine - Quality< / option >
< option value = "iris.csv" selected > Iris< / option >
< option value = "mnist.csv" > Mnist< / option >
< option value = "Frogs_MFCCs_s.csv" > Frogs< / option >
< option value = "empty" > Add New File< / option >
< / select >
< / div >
< div class = "param" >
< label for = "param-perplexity" > Perplexity< / label >
< input id = "param-perplexity" type = "range" min = "2" 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 = "300" 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 = "10" , step = "10" >
< output for = "param-maxiter" id = "param-maxiter-value" > 10< / 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 >
< output for = "param-distance" id = "param-distance-value" > < / output >
< / 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 >
< output for = "param-transform" id = "param-transform-value" > < / output >
< / div >
< p > < div id = "run-button" > < button class = "btn btn-primary btn-block" onclick = "getData();" > Run New t-SNE< / button > < / div > < / p >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-3 col-md-offset-6" >
< div id = "starPlot" > < / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-3" >
< div class = "panel panel-default" >
< div class = "panel-heading" >
< h3 class = "panel-title" > Visual Mapping Parameters< / h3 >
< / div >
< div class = "row" >
< div class = "panel-body" >
< div class = "col-md-12" >
< div id = "ThumbNailsList" >
< label for = "male" > Neighborhood Preservation< / label >
< select id = "param-neighborHood" name = "param-neighborHood" >
< option selected = "selected" value = "color" > Color< / option >
< option value = "size" > Size< / option >
< / select >
< output for = "param-neighborHood" id = "param-neighborHood-value" > < / output >
< label for = "male" > Final Cost (Kullback-Leibler)< / label >
< label id = "selectionLabel" style = "margin-top:4px" > Vice versa< / 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 = "50" >
< output for = "param-corr" id = "param-corr-value" > 150< / output >
< / div >
Visualization annotating form: < 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();" > Add 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();" > Continue with the analysis< / button > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = col-md-6 >
< svg id = "knnBarChart" > < / svg >
< / div >
< div class = "col-md-3" id = "extra-information" style = "width: 24.5999995%" >
< div class = "panel panel-default" >
< div class = "panel-heading" >
< h3 class = "panel-title" > t-SNE and data set's extra information< / h3 >
< / div >
< div class = "panel-body" >
< div id = "cost" > < / div >
< br >
< div id = "datasetDetails" > < / div >
< / div >
< / div >
< div class = "panel panel-default" id = "kNNInfo" >
< div class = "panel-heading" >
< h3 class = "panel-title" > kNN barchart information< / h3 >
< / div >
< div class = "panel-body" >
< div id = "cost" > < / div >
< br >
< div id = "datasetDetails" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< script >
/* 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-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");
// 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");
console.log(current);
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");
// 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");
console.log(current);
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("#legend4");
svgLegend.selectAll("*").remove();
// Clear the SheapHeardmap before refreshing
var svg = d3.select("#sheparheat");
svg.selectAll("*").remove();
// Call the ShepardHeatmap again to be redrawn
ShepardHeatMap();
}
}
/* 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 >
