t-viSNE: Interactive Assessment and Interpretation of t-SNE Projections
https://doi.org/10.1109/TVCG.2020.2986996
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
521 lines
34 KiB
521 lines
34 KiB
<html>
|
|
<head>
|
|
|
|
<!-- Ignore Favicon -> Solved the warning in console of the browser. -->
|
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
|
|
<title>t-viSNE</title>
|
|
|
|
<!-- 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/data_form_handler.js"></script>
|
|
<script src="./modules/pca/pca.js"></script>
|
|
|
|
<!-- CSS - Styling -->
|
|
<link rel="stylesheet" href="./css/w3.css">
|
|
<link rel="stylesheet" href="./css/style.css"/>
|
|
<link rel="stylesheet" href="./css/bootstrap.min.css"/>
|
|
<link rel="stylesheet" type="text/css" href="./css/d3.parcoords.css">
|
|
<link rel="stylesheet" href="./css/reset.css">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous">
|
|
<!-- Bootstrap -->
|
|
|
|
<script src="./modules/popper/popper.min.js"></script>
|
|
<script src="./modules/bootstrap/bootstrap.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="w3-container">
|
|
|
|
<div id="myModal" class="w3-modal">
|
|
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
|
|
<header class="w3-container w3-blue">
|
|
<h2 title="Tip: t-SNE grid search with 25 most diverse projections extracted from 500 generated embeddings (using Procrustes distance). " style="display:inline-block; font-size: 16px; margin-top: 15px; margin-left: 10px; margin-bottom:15px">t-SNE Grid Search</h3>
|
|
[Sorting:
|
|
<select id="param-SortMOver-view" name="param-SortMOver-view" style="color: black" onchange="ReSortOver()">
|
|
<option value="1" selected>Quality Metrics Average (QMA)</option>
|
|
<option value="2">Neighborhood Hit (NH)</option>
|
|
<option value="3">Trustworthiness (T)</option>
|
|
<option value="4">Continuity (C)</option>
|
|
<option value="5">Stress (S)</option>
|
|
<option value="6">Shepard Diagram Correlation (SDC)</option>
|
|
</select>
|
|
]
|
|
</header>
|
|
<div id="loader"></div>
|
|
<div id="gridVisual"></div>
|
|
<div class="w3-container w3-light-grey w3-padding">
|
|
<button id="confirmModal" class="w3-button w3-left w3-white w3-border" style="margin-top: -3px; margin-bottom: -3px" onclick="ReSort(true)" disabled>Confirm</button>
|
|
<button id="closeModal" class="w3-button w3-right w3-white w3-border" style="margin-top: -3px; margin-bottom: -3px" onclick="closeModalFun()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-3">
|
|
<div class="panel panel-default" id="left-side-param">
|
|
<div class="panel-heading">
|
|
<h2 class="panel-title" style="display:inline-block" data-toggle="tooltip" data-placement="right" title="Tip: a panel for controlling the t-SNE algorithm and its parameters. There is also an option to choose between grid parameter search and single set mode.">Parameters</h2>
|
|
[M:
|
|
<select id="param-EX-view" name="param-EX-view" data-toggle="tooltip" data-placement="right" title="Tip: the option of changing between grid search (generating 500 projections) and a single set of parameters (1 projection)." onchange="ExecuteMode()">
|
|
<option value="1" selected>Grid Search</option>
|
|
<option value="2">Single Set</option>
|
|
</select>
|
|
]
|
|
<div id="cost" title="Tip: the overall cost reduced by each iteration step of the t-SNE algorithm." style="display:inline-block; margin-top:3px; float:right"></div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<table class="table table-borderless paramTable">
|
|
<tbody>
|
|
<tr>
|
|
<td scope="row"><label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided (only numerical values supported) or upload a new file (do not forget to use * for the target label).">Data sets</label></td>
|
|
<td>
|
|
<select id="param-dataset" name="param-dataset" onChange="changeDataset(this.value);">
|
|
<option value="diabetes.csv" selected>Diabetes</option>
|
|
<option value="breast-cancer-wisconsin.csv">Breast Cancer</option>
|
|
<option value="iris.csv">Iris</option>
|
|
<option value="SPECTF.csv">SPECTF</option>
|
|
<option value="blobs.csv">Gaussian Clusters</option>
|
|
<option value="empty">Upload File</option>
|
|
</select>
|
|
</td>
|
|
<td><button type="button" class="button" id="FactRes" onclick="FactoryReset()" data-toggle="tooltip" data-placement="right" title="Tip: Restart the entire web page/application.">Factory reset</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row"><label for="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></td>
|
|
<td><input id="param-perplexity" type="range" min="5" max="100" value="30", step="1" ></td>
|
|
<td><output for="param-perplexity" id="param-perplexity-value">30</output></td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row"><label for="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></td>
|
|
<td><input id="param-learningrate" type="range" min="1" max="150" value="1", step="1"></td>
|
|
<td><output for="param-learningrate" id="param-learningrate-value">1</output></td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row"><label for="param-maxiter" 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></td>
|
|
<td><input id="param-maxiter" type="range" min="10" max="1000" value="500", step="10"></td>
|
|
<td><output for="param-maxiter" id="param-maxiter-value" >500</output></td>
|
|
</tr>
|
|
<tr style="margin-top: -4px !important;">
|
|
<td scope="row" colspan="3">
|
|
<div id="hider2" title="Tip: wait for line chart to load (overall cost vs. iteration)."></div>
|
|
<div id="PlotCost"></div>
|
|
</td>
|
|
</tr>
|
|
<tr >
|
|
<td scope="row" style="padding-top: 0.8vh !important">
|
|
<input id="file-input" type="file" name="name" style="display: none;"/>
|
|
<button type="button" class="button" onclick='loadAnalysis();' data-toggle="tooltip" data-placement="right" title="Tip: load previously executed analysis in .txt format.">Load exec.</button>
|
|
</td>
|
|
<td style="padding-top: 0.8vh !important"><label data-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.">
|
|
<input id="downloadDists" checked type="checkbox" >
|
|
Cache distances
|
|
</label>
|
|
</td>
|
|
<td style="padding-top: 0.8vh !important">
|
|
<button type="button" class="button" onclick="SaveAnalysis()" data-toggle="tooltip" data-placement="right" title="Tip: save/store previously executed analysis in .txt format.">Store exec.</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row" colspan="3"><button id="ExecuteBut" class="btn btn-primary btn-block" onclick="getData();" title="Tip: initialize a new t-SNE investigation or start a previous analysis, in case load execution is activated." value="Execute new t-SNE analysis"><i class="fas fa-running fa-lg"></i>Execute new t-SNE analysis</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="panel panel-default med-bottomProv" style="margin-bottom:+1.4vh">
|
|
<div class="panel-heading">
|
|
<h2 class="panel-title" style="display:inline-block" data-toggle="tooltip" data-placement="right" title="Tip: a feature of this tool that supports clusters (and points) exploration. Checking the neighborhood preservation between the entire projection's average and a selection driven by the user. You can also find the best projections based on a lasso selection of points (with optimize selection).">Projections Provenance</h2>
|
|
<div id="textToChange" style="display:inline-block">[Sorting:</div>
|
|
<select id="param-SortM-view" name="param-SortM-view" onchange="ReSort(false)">
|
|
<option value="1" selected>Quality Metrics Average (QMA)</option>
|
|
<option value="2">Neighborhood Hit (NH)</option>
|
|
<option value="3">Trustworthiness (T)</option>
|
|
<option value="4">Continuity (C)</option>
|
|
<option value="5">Stress (S)</option>
|
|
<option value="6">Shepard Diagram Correlation (SDC)</option>
|
|
</select>
|
|
]
|
|
<div style="display:inline-block; float:right">
|
|
<button type="button" class="buttonOptimize" onclick='OptimizePoints();' style="padding: 5px 5px 5px 5px" data-toggle="tooltip" data-placement="right" title="Tip: find the best projections for the selected points">Optimize Selection</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="ProjectionsVisual"></div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default med-bottom-neigh">
|
|
<div class="panel-heading">
|
|
<h2 class="panel-title" style="display:inline-block" data-toggle="tooltip" data-placement="right" title="Tip: a feature of this tool that supports clusters (and points) exploration. Checking the neighborhood preservation between the entire projection's average and a selection driven by the user.">Neighborhood Preservation </h2>
|
|
[Visualization:
|
|
<select id="param-NB-view" name="param-NB-view" onchange="LineBar()">
|
|
<option value="1" selected>Bar Chart</option>
|
|
<option value="2">Difference Bar Chart</option>
|
|
<option value="3">Line Plot</option>
|
|
<option value="4">Difference Line Plot</option>
|
|
</select>
|
|
]
|
|
<div id="knnBarChartDetails"style="display:inline-block; float:right">
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="knnBarChart"></div>
|
|
<div id="hider"></div>
|
|
</div>
|
|
</div>
|
|
<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-lg-3">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h2 class="panel-title" data-toggle="tooltip" data-placement="right" title="Tip: in this panel the user can adapt the visual encodings of the main visualization view. Furthermore, the dimension correlation capturing points thresholds are situated in this panel. For the main view, there is also an annotation functionality available.">Visual Mapping</h2>
|
|
</div>
|
|
<div class="panel-body" id="commBtn">
|
|
<table class="table table-borderless">
|
|
<tbody>
|
|
<tr>
|
|
<td scope="row"><label for="male" data-toggle="tooltip" data-placement="right" title="Tip: density in the high-dimensional space taken from the t-SNE itself.">Density</label>
|
|
<select id="param-neighborHood" name ="param-neighborHood" onchange="setReInitialize(true);">
|
|
<option selected="selected" value="color">Color</option>
|
|
<option value="size">Size</option>
|
|
</select>
|
|
</td>
|
|
<td rowspan="3"><svg id="legend4"></svg></td>
|
|
<td></td>
|
|
<td rowspan="5"><svg id="legend1"></svg></td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row">
|
|
<output for="param-neighborHood" id="param-neighborHood-value " ></output>
|
|
<label for="male" data-toggle="tooltip" data-placement="right" title="Tip: remaining cost of each point throughout the entire projection.">Remaining cost</label>
|
|
<label id="selectionLabel" data-toggle="tooltip" data-placement="right" title="Tip: change between size/radius and color encodings.">Size</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row"><label for="male" data-toggle="tooltip" data-placement="right" title="Tip: adapt the selection of points in the two-dimensional space. The options are a simple distance measurement between point and line or using the KNN algorithm.">Correl.</label>
|
|
<select id="param-correlationMeasur" name ="param-correlationMeasur" onchange="setReInitializeDistanceCorrelation(true);">
|
|
<option selected="selected" value="1">Distance</option>
|
|
<option value="2">KNN</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row">
|
|
<label for="param-corr" id="param-corrLabel" data-toggle="tooltip" data-placement="right" title="Tip: percentage of all points taken into account by Dimension Correlation.">Correl. threshold (%)</label>
|
|
<label for="param-corr2" id="param-corrLabel2" data-toggle="tooltip" data-placement="right" style="display: none;">K-value nearest neighbor</label>
|
|
</td>
|
|
<td>
|
|
<input id="param-corr" type="range" min="0" max="100" value="50", step="1" onchange="CalculateCorrel(true, 1);">
|
|
<input id="param-corr2" type="range" min="1" max="250" value="10", step="1" onchange="CalculateCorrel(true, 2);" style="display: none">
|
|
</td>
|
|
<td>
|
|
<output for="param-corr" id="param-corr-value">50</output>
|
|
<output for="param-corr2" id="param-corr-value2" style="display: none">10</output>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row"><label for="param-lim" data-toggle="tooltip" data-placement="right" title="Tip: x*times the actual radius (increases/decreases points' radius).">Point radius scaling</label></td>
|
|
<td><input id="param-lim" type="range" min="1" max="4" value="3", step="0.5" onchange="setReInitialize(false);"></td>
|
|
<td><output for="param-lim" id="param-lim-value">3</output></td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row">
|
|
<input id="controls" type="checkbox">
|
|
Disable annotator</input>
|
|
</td>
|
|
<td style="text-align:center;"><button class="btn btn-default" style="padding: 2px 10px 2px 10px !important;" onclick="deleteAnnotations();" ><i class="fas fa-comment-slash fa-lg"></i>Erase</button></td>
|
|
<td colspan="2"><button class="btn btn-default" style="padding: 2px 10px 2px 10px !important;" onclick="BringBackAnnotations();" ><i class="fas fa-eye fa-lg"></i>Reveal</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row">
|
|
<textarea type="text" id="comment" name="textforAnnotator" placeholder="Write a comment."></textarea>
|
|
</td>
|
|
<td style="text-align:center;"><div id="toggleAnnotator"><button class="btn btn-default" style="padding: 2px 10px 2px 10px !important;" onclick="setAnnotator();" ><i class="fas fa-comment fa-lg"></i>Attach</button></div></td>
|
|
<td colspan="2"><div id="continue"><button class="btn btn-default active" style="padding: 2px 10px 2px 10px !important;" onclick="setContinue();" ><i class="fas fa-chart-line fa-lg"></i>Analysis</button></div></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3" style="margin-top:-10px">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h2 class="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 target label set a * mark after the appropriate dimension.">Overview</h2><div id="datasetDetails" title="Tip: the number of dimensions/features and instances of a data set." style="display:inline-block; float:right"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="panel-body">
|
|
<div class="col-lg-6">
|
|
<div id="overviewRect"></div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div style="display:block" id="CategoryName"></div>
|
|
<div class="legend" id = "legend2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-lg-offset-6" style="margin-top:-10px">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h2 class="panel-title" data-toggle="tooltip" data-placement="right" title="Tip: various functionalities depending on the user. These modes enable different interactions in the main visualization view.">Interaction Modes (M)</h2>
|
|
</div>
|
|
<div class="panel-body" id="resetAllFilters">
|
|
<table class="table table-borderless centerTable">
|
|
<tbody>
|
|
<tr>
|
|
<td scope="row"><button class="btn btn-info active" onclick="setLayerProj();" style="margin-left: -1px !important" ><i class="fas fa-mouse-pointer fa-lg" data-toggle="tooltip" data-placement="right" title="Tip: in this mode the user can zoom in and out in the main visualization view and when hovering on a particular point he/she receives the exact data set's instance dimensions."></i>Points exploration</button></td>
|
|
<td><button class="btn btn-info" onclick="setLayerComp();" style="margin-left: -1.4px"><i class="far fa-object-group fa-lg" data-toggle="tooltip" data-placement="right" title="Tip: lasso selection in the main visualization view." ></i>Group selection</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td scope="row"><button class="btn btn-info" onclick="setLayerSche();" style="margin-left: -2px !important"><i class="fas fa-draw-polygon fa-lg" data-toggle="tooltip" data-placement="right" title="Tip: draw a shape (polylines) and check the related dimensions correlations for your drawing/shape. With the left click you set one point and the right click you confirm the drawing for further analysis."></i>Dimension correl.</button></td>
|
|
<td><button class="btn btn-info" onclick="setReset();"><i class="fas fa-trash-alt fa-lg" data-toggle="tooltip" data-placement="right" title="Tip: reset all filters applied in the visualizations without losing the execution."></i>Reset all filters</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3" style="margin-top:-10px">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h2 class="panel-title" data-toggle="tooltip" data-placement="right" style="display:inline-block" title="Tip: a view related to the overall quality of the projection. If the points/values belong to the diagonal, then the distances are preserved in both spaces. If values are closer to N-D distances, then the visualization is too compressed. If values are closer to 2-D distances, then the visualization is too spread out.">Shepard Heatmap</h2>
|
|
<div style="display:inline-block; float:right">
|
|
[Visualization:
|
|
<select id="param-SH-view" name="param-SH-view" onchange="ShepardHeatMap()">
|
|
<option value="1" selected>Heatmap</option>
|
|
<option value="2">Diagram</option>
|
|
</select>
|
|
]
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<svg id="sheparheat"></svg>
|
|
</div>
|
|
<div class="col-lg-2">
|
|
<svg id="legend3"></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-lg-offset-6" style="margin-top:-10px">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h2 class="panel-title" style="display:inline-block" data-toggle="tooltip" data-placement="right" title="Tip: user-driven shape investigation of the most correlated dimensions.">Dimension Correlation</h2>
|
|
<div class="col-lg-8"></div>
|
|
<div class="col-lg-4">
|
|
<div class="param" style="display:inline-block; float:right; margin-top:-23px; margin-right: -18px">
|
|
<label for="param-corlim" style="display:inline-block; float: right" data-toggle="tooltip" data-placement="right" title="Tip: the minimum acceptable visible correlation. Default is 0, so the tool accepts all the correlations.">Min Correl.: #<output for="param-corlim" id="param-corlim-value" title="Tip: minimum visible correlation (range: 0.0 to 1.0)." 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>
|
|
<div class="panel-body">
|
|
<svg id="correlation"></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3">
|
|
|
|
<div class="col-lg-3" id="extra-information" style="width: 24.8vw">
|
|
<div class="panel panel-default right-side-hist">
|
|
<div class="panel-heading">
|
|
<h2 class="panel-title" style="display:inline-block;" data-toggle="tooltip" data-placement="right" title="Tip: the density and remaining cost distributions are important to look at along with the main visualization view individual values.">Density and Remaining Cost</h2>
|
|
<div class="col-lg-7"></div>
|
|
<div class="col-lg-5">
|
|
<div class="param" style="display:inline-block; float:right; margin-top:-23px; margin-right: -18px">
|
|
<label for="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 Cost: #<output for="param-costlim" id="param-costlim-value" title="Tip: minimum visible cost rate (range: 0.1 to 1.0)." style="display:inline-block; float:right">1.0</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>
|
|
<div class="panel-body">
|
|
<div id="costHist"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-lg-offset-6" style="margin-top:-1.5vh">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h2 class="panel-title" data-toggle="tooltip" data-placement="right" title="Tip: for every selection the tool runs a local Principal Component Analysis (PCA) algorithm and dynamically adapts and shows the top 8 dimensions in an order from left to right. This sorting from left to right presents the most related (with high variance) features of the data set to the least important (low variance). It also works with local selections of points!">Adaptive Parallel Coordinates Plot</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="PCP" class="parcoords"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer" style="margin-top: -25px">
|
|
<hr>
|
|
<p class="text-muted credit no-top-margin no-bottom-margin">
|
|
© ISOVIS group 2019–2020
|
|
</p>
|
|
<p class="text-muted credit no-top-margin no-bottom-margin">
|
|
Last updated: June 15, 2020
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load the core visualization script. -->
|
|
<script src="./js/tsne_vis.js"></script>
|
|
|
|
<script>
|
|
|
|
function render() {
|
|
myResponsiveComponent({
|
|
width: document.body.clientWidth,
|
|
height: document.body.clientHeight,
|
|
});
|
|
}
|
|
|
|
render();
|
|
|
|
window.addEventListener('resize', render);
|
|
|
|
// Tooltip
|
|
$(document).ready(function(){
|
|
$("[rel='tooltip']").tooltip();
|
|
});
|
|
|
|
$(document).ready(function(){
|
|
$("#ExecuteBut").click(function(){
|
|
var mode = document.getElementById('param-EX-view').value
|
|
mode = parseInt(mode)
|
|
|
|
if (mode == 1) {
|
|
$("#myModal").modal('show');
|
|
$('.modal-backdrop').removeClass("modal-backdrop");
|
|
}
|
|
});
|
|
});
|
|
|
|
function closeModalFun () {
|
|
$('#myModal').modal('hide');
|
|
}
|
|
|
|
$("#cost").html('(Ov. Cost: ?)');
|
|
$("#datasetDetails").html('(Num. of Dim. and Ins.: ?)');
|
|
$("#CategoryName").html('No labels');
|
|
$("#knnBarChartDetails").html('(Num. 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-corr2').bind('input', function () { $('#param-corr-value2').text($('#param-corr2').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 active", "btn btn-default");
|
|
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[1].className = current[1].className.replace("btn btn-info active", "btn btn-info");
|
|
this.className += " active";
|
|
});
|
|
}
|
|
|
|
/* 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>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|