ISOVIS
/
t-viSNE
8
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

responsiveness

Browse Source 
Former-commit-id: 6a4fd403db
master
Angelos Chatzimparmpas 4 years ago
parent 23a34d2ec2
commit 2ab18b74b3
4 changed files with 355 additions and 333 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      README.md
  2. 102
      css/style.css
  3. 324
      index.html
  4. 260
      js/tsne_vis.js

2
README.md
Unescape View File

@ -4,7 +4,7 @@
This Git repository contains the code that accompanies the research paper "t-viSNE: Interactive Assessment and Interpretation of t-SNE Projections". The details of the experiments and the research outcome are described in [the paper](https://doi.org/10.1109/TVCG.2020.2986996).
**Note:** t-viSNE is optimized to work better for the 2560x1440 resolution (1440p/QHD (Quad High Definition)). Any other resolution might need manual adjustment of your browser's zoom level to work properly.
**Note:** t-viSNE is optimized to work better for standard resolutions (such as 1440p/QHD (Quad High Definition) and 1080p). Any other resolution might need manual adjustment of your browser's zoom level to work properly.
**Note:** The tag `paper-version` matches the implementation at the time of the paper's publication. The current version might look significantly different depending on how much time has passed since then.

102
css/style.css
Unescape View File

@ -2,8 +2,9 @@
html, body {
max-width: 100% !important;
margin-top: -5px !important;
font-family: sans-serif !important;
font-size: calc(0.35em + 1vmin) !important;
font-size: calc(0.32em + 1vmin) !important;
}
h2 {
@ -29,8 +30,19 @@ button {
table td {
vertical-align: middle !important;
padding: 2 !important;
margin: 0 !important;
}
.centerTable {
text-align: center;
}
.centerTable td {
padding: 8 !important;
}
input[type='file'] {
color: transparent; /* Hides your "No File Selected" */
width: 95px;
@ -63,6 +75,14 @@ input[type='file'] {
text-align: left;
}
#param-corlim {
width: 55% !important;
}
#param-costlim {
width: 85% !important;
}
#param-correlation > .param > select {
flex: 0 0 45%;
width: 100%;
@ -86,11 +106,7 @@ cursor: default;
.right-side-hist {
margin-left:-2px;
margin-top: 1px;
}
.right-side-PCP {
margin-top: -57px;
margin-top: -0.5vh;
}
#left-side-visual{
@ -101,7 +117,7 @@ cursor: default;
/* Styling of the main canvas */
#modtSNEcanvas {
width: 50vw !important;
height: 42.8vw !important;
height: 66vh !important;
border: 1px solid black;
position: absolute;
margin-left: -15px;
@ -112,6 +128,10 @@ cursor: default;
fill: steelblue;
}
.panel-body {
padding: 5px !important;
}
.bounding-rect {
stroke: red;
stroke-width: 1;
@ -121,7 +141,7 @@ cursor: default;
#overviewRect {
border: 1px solid black;
width: 11vw;
height: 11vw;
height: 13vh;
position: absolute;
z-index: 1;
}
@ -129,46 +149,48 @@ cursor: default;
/* A little styling for knn's bar chart */
#knnBarChart {
width: 48.7vw !important;
height: 2.8vw;
position: absolute !important;
z-index: 1;
}
#hider {
width: 48.7vw !important;
height: 3vw;
background-color: white;
position: absolute !important;
z-index: 2;
}
.med-bottom {
margin-top: 6.7vw;
.med-bottom-neigh {
margin-left: -16px;
margin-top: 67vh;
position: absolute;
width: 50.1vw !important;
height: 5.4vw !important;
height: 14.5vh !important;
}
.med-bottomProv {
margin-top: 6.7vw;
margin-left: -16px;
width: 50.1vw !important;
height: 6.4vw !important;
height: 16vh !important;
}
#comment {
width: 8vw !important;
height: 2.5vh !important;
}
/* Styling of the main SVG behind canvas */
#modtSNEcanvas_svg {
width: 50vw ;
height: 42.8vw ;
margin-top: 17.5vh;
height: 66vh !important;
opacity: 1.0;
margin-top: 178px;
position:absolute;
z-index: 2;
}
#modtSNEcanvas_svg_Schema {
width: 50vw;
height: 42.8vw;
height: 66vh !important;
opacity: 1.0;
position:absolute;
margin-left: -15px;
@ -181,50 +203,52 @@ circle.swatch{
/* Legend of the Overview t-SNE canvas */
#legend2 {
height: 9vw;
width: 11vw;
height: 11vh;
width: 10.5vw;
text-align: left;
overflow: auto;
margin-left: -6px;
margin-top: 2px;
}
/* Legend of the Overview t-SNE canvas */
#legend1 {
height: 7vw;
width: 5vw;
margin-top: -5px;
height: 19vh;
margin-top: -0.5vh;
width: 5.5vw;
text-align: left;
}
/* Legend of the Overview t-SNE canvas */
#legend4 {
height: 7vw;
height: 13.5vh;
width: 7vw;
margin-left: -20px;
margin-top: -10px;
margin-top: -1.5vh;
text-align: left;
}
/* Styling of the ShepardHeatmap */
#sheparheat {
width: 11vw;
height: 11vw;
width: 10.65vw;
height: 10.65vw;
position: absolute;
}
/* Number of Points font-size */
text.legendtitle {
font-size: 15px;
font-size: calc(0.35em + 0.8vmin) !important;
}
/* Number of Points font-size */
text.label {
font-size: 15px;
font-size: calc(0.35em + 0.8vmin) !important;
}
/* Styling of the ShepardHeatmap */
svg#legend3 {
height: 8vw;
width: 11vw;
height: 19.2vh;
width: 10.65vw;
margin-top: 2px;
font-size: calc(0.35em + 1vmin) !important;
text-align: left;
overflow: auto;
}
@ -326,8 +350,7 @@ svg#legend3 {
/* This is for the Correlation bar chart */
#correlation{
margin-left: -20px;
margin-top: -20px;
margin-left: -0.5vw;
}
.y.axis line {
@ -382,14 +405,13 @@ svg#legend3 {
#selectionLabel{
border: 1px solid black;
padding: 5px 5px 5px 5px;
padding: 1px 1px 1px 1px;
}
#PCP{
margin-left:-15px;
margin-top:0px;
width: 23.2vw;
height: 11.6vw;
width: 22.6vw;
height: 17vh;
}
.parent-row{
@ -469,7 +491,7 @@ ul {
#costHist {
width: 6vw;
height: 9.55vw;
height: 16.5vh;
}
#loader {

324
index.html
Unescape View File

@ -49,8 +49,8 @@
<div id="myModal" class="w3-modal">
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
<header class="w3-container w3-blue">
<h3 style="display:inline-block; font-size: 16px; margin-top: 15px; margin-left: 10px; margin-bottom:15px">t-SNE Grid Search Resulting Diverse Projections</h3>
[Sorting Projections According to Metric:
<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>
@ -77,8 +77,8 @@
<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.">Parameters</h2>
[Mode:
<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>
@ -87,7 +87,7 @@
<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">
<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>
@ -118,39 +118,39 @@
<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>
<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">
<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 execution</button>
<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><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.">
<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>
<button type="button" class="button" onclick="SaveAnalysis()" data-toggle="tooltip" data-placement="right" title="Tip: save/store previously executed analysis in .txt format.">Store execution</button>
<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" style="margin-right: 10px"></i>Execute new t-SNE analysis</button></td>
<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-md-6">
<div class="panel panel-default med-bottomProv" style="margin-top:0.2px; margin-bottom:+14px">
<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.">Projections Provenance</h2>
<div id="textToChange" style="display:inline-block">[Sorting Projections According to Metric:</div>
<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>
@ -166,9 +166,27 @@
</div>
<div class="panel-body">
<div id="ProjectionsVisual"></div>
<div id="ProjectionsMetrics"></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>
@ -176,34 +194,92 @@
<canvas id = "modtSNEcanvas" ></canvas>
</div>
</div>
<div class="col-md-2" style="width: 24.999999995%">
<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: various functionalities depending on the user. These modes enable different interactions in the main visualization view.">Interaction Modes</h2>
</div>
<div class="panel-body">
<div id="resetAllFilters" style="margin-bottom: 20px">
<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>t-SNE Points Exploration</button>
<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>
<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 Correlation</button>
</div>
<button class="btn btn-info" onclick="setReset();" style="margin-left: 225px"><i class="fas fa-trash-alt fa-lg" style="margin-right: 10px" data-toggle="tooltip" data-placement="right" title="Tip: reset all filters applied in the visualizations without losing the execution."></i>Reset Filters</button>
<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>
<div class="row">
<div class="col-md-3" style="margin-top:-4px">
<div class="panel panel-default" style="padding-bottom: 35px;">
<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 feature of a data set that corresponds to classes set a * mark after this feature.">Overview</h2><div id="datasetDetails"style="display:inline-block; float:right"></div>
<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-md-6">
<div class="col-lg-6">
<div id="overviewRect"></div>
</div>
<div class="col-md-6">
<div class="col-lg-6">
<div style="display:block" id="CategoryName"></div>
<div class="legend" id = "legend2"></div>
</div>
@ -211,114 +287,48 @@
</div>
</div>
</div>
<div class="col-md-3 col-md-offset-6">
<div class="panel panel-default" style="margin-top: -200px">
<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 mappings of the main visualization view.">Visual Mapping</h2>
</div>
<div class="row">
<div class="panel-body">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="param" style="padding: 5px 0 5px 0">
<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);" style="display:inline-block;margin-left: 60px">
<option selected="selected" value="color">Color-encoding</option>
<option value="size">Size-encoding</option>
</select>
</div>
<div class="param" style="padding: 0px 0 0px 0" >
<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" style="margin-top:4px; margin-left: 15px" data-toggle="tooltip" data-placement="right" title="Tip: change between size/radius and color encodings.">Size-encoding</label>
</div>
<div class="param" style="padding: 20px 0 5px 0; margin-top: 5px;" >
<label for="male" data-toggle="tooltip" data-placement="right" title="Tip: adapt the selection of points in the two-dimensional space: from a simple distance measurement between point and line to KNN algorithm, and vice versa.">Correlation measurement</label>
<select id="param-correlationMeasur" name ="param-correlationMeasur" onchange="setReInitializeDistanceCorrelation(true);" style="display:inline-block;margin-left: 32px">
<option selected="selected" value="1">Distance</option>
<option value="2">KNN</option>
</select>
</div>
<div class="param">
<div class="row" style="margin-top: 10px;">
<div class="col-md-6">
<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.">Correlation threshold (%)</label>
<label for="param-corr2" id="param-corrLabel2" data-toggle="tooltip" data-placement="right" style="display: none;">K-value (KNN)</label>
</div>
<div class="col-md-5">
<input id="param-corr" type="range" min="0" max="100" value="50", step="1" onchange="CalculateCorrel(true, 1);" style="margin-left: -20px;">
<input id="param-corr2" type="range" min="1" max="250" value="10", step="1" onchange="CalculateCorrel(true, 2);" style="margin-left: -20px; display: none">
</div>
<div class="col-md-1">
<output for="param-corr" id="param-corr-value" style="margin-left: -20px;">50</output>
<output for="param-corr2" id="param-corr-value2" style="margin-left: -20px; display: none">10</output>
</div>
</div>
</div>
<div class="param">
<div class="row" style="margin-top: 30px">
<div class="col-md-6">
<label for="param-lim" data-toggle="tooltip" data-placement="right" title="Tip: x*times the actual radius (increase/decrease points radius).">Points radius scaling</label>
</div>
<div class="col-md-5">
<input id="param-lim" type="range" min="1" max="4" value="3", step="0.5" onchange="setReInitialize(false);" style="margin-left: -20px;">
</div>
<div class="col-md-1">
<output for="param-lim" id="param-lim-value" style="margin-left: -20px;">3</output>
</div>
</div>
</div>
</div>
<div class="col-md-1">
<svg id="legend1" style = "margin-left: -30px"></svg>
</div>
<div class="col-md-2">
<svg id="legend4" style = "margin-left: -10px"></svg>
</div>
</div>
<div class="annotationAllClass" style="margin-top: 20px">
<label style="padding-bottom: 0px">
<input id="controls" type="checkbox" style="margin-top: 18px">
Hide annotations' controllers</input>
<button class="btn btn-default" onclick="BringBackAnnotations();" style="display:inline-block; float:right; margin-left:178px"><i class="fas fa-eye fa-lg" style="margin-right: 10px"></i>Reveal annotations</button>
</label>
<div id="param-correlation">
Annotation: <textarea type="text" id="comment" name="textforAnnotator" placeholder="Please, provide your comment."></textarea>
</div>
<div id="commBtn">
<div class="param" style="margin-top:10px">
<div id="toggleAnnotator" style= "margin-left: -120px"><button class="btn btn-default" onclick="setAnnotator();" style="display:inline-block; float:left; margin-left: 120px" ><i class="fas fa-comment fa-lg" style="margin-right: 10px"></i>Add annotation</button></div>
<div id="continue"></div><button class="btn btn-default active" onclick="setContinue();" style="display:inline-block; float:middle; margin-left: 6px"><i class="fas fa-chart-line fa-lg" style="margin-right: 10px"></i>Continue the analysis</button></div>
<button class="btn btn-default" onclick="deleteAnnotations();" style="display:inline-block; float:right; margin-top: -45px" ><i class="fas fa-comment-slash fa-lg" style="margin-right: 10px"></i>Delete annotations</button>
</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-md-3" style="margin-top:-4px">
<div class="panel panel-default" style="padding-bottom : 70px">
<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.">Shepard Heatmap</h2>
<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>Shepard Heatmap</option>
<option value="2">Shepard Diagram</option>
<option value="1" selected>Heatmap</option>
<option value="2">Diagram</option>
</select>
]
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="col-lg-6">
<svg id="sheparheat"></svg>
</div>
<div class="col-md-2">
<div class="col-lg-2">
<svg id="legend3"></svg>
</div>
</div>
@ -326,10 +336,10 @@
</div>
</div>
<div class="col-md-3 col-md-offset-6" style="margin-top: -2px">
<div class="panel panel-default right-side-cor">
<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="param" style="display:inline-block; margin-top:-5px; float:right"><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. Visible Correlation: #<output for="param-corlim" id="param-corlim-value" style="display:inline-block; float:right">0.0</output></label>
<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="param" style="display:inline-block; margin-top:-2.2vh; float:right"><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 Correlation: #<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>
@ -340,16 +350,16 @@
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="col-lg-3">
<div class="col-md-3" id="extra-information" style="width: 24.8vw">
<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: 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>
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="param" style="display:inline-block; float:right; margin-top:-21.5px; 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. Visible Cost Rate: #<output for="param-costlim" id="param-costlim-value" style="display:inline-block; float:right">1</output></label>
<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>
@ -359,43 +369,19 @@
</div>
</div>
</div>
</div>
<div class = col-md-6>
<div class="panel panel-default med-bottom" style="margin-top:+172px">
<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="hider"></div>
<div id="knnBarChart"></div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default right-side-PCP">
<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).">Adaptive Parallel Coordinates Plot</h2>
<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">
<div class="footer" style="margin-top: -25px">
<hr>
<p class="text-muted credit no-top-margin no-bottom-margin">
&copy; ISOVIS group 2019&ndash;2020
@ -414,7 +400,7 @@
function render() {
myResponsiveComponent({
width: document.body.clientWidth,
height: document.body.clientHeight
height: document.body.clientHeight,
});
}
@ -476,11 +462,11 @@
// 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 active", "btn btn-info");
current[1].className = current[1].className.replace("btn btn-info active", "btn btn-info");
this.className += " active";
});
}

260
js/tsne_vis.js
Unescape View File

@ -1,8 +1,46 @@
// t-SNE Visualization and global variables
//BACKEND_API_URL = "https://sheldon.lnu.se/t-viSNE/tsneGrid"
BACKEND_API_URL = "http://127.0.0.1:5000"
// This variable is used when a new file is upload by a user.
var new_file;
// Scale - Responsiveness
var overallWidth = 0, overallHeight = 0;
// Initialize the horizontal (correlations) barchart's variables
var svg, defs, gBrush, brush, main_xScale, mini_xScale, main_yScale, mini_yScale, main_xAxis, main_yAxis, mini_width, textScale, main_margin, mini_margin;
// Added only for the mouse wheel
var zoomer = d3v3.behavior.zoom()
.on("zoom", null);
function myResponsiveComponent(props) {
overallWidth = props.width;
overallHeight = props.height;
// Margin of the main barchart
main_margin = {top: 8, right: 10, bottom: 30, left: 100},
main_width = overallWidth/5.2 - main_margin.left - main_margin.right,
main_height = overallHeight/5.2 - main_margin.top - main_margin.bottom;
// Margin of the mini barchart
mini_margin = {top: 8, right: 10, bottom: 30, left: 10},
mini_height = overallHeight/5.2 - mini_margin.top - mini_margin.bottom;
mini_width = overallWidth/23 - mini_margin.left - mini_margin.right;
// Create the svg correlation component
svg = d3v3.select("#correlation").attr("class", "svgWrapper")
.attr("width", main_width + main_margin.left + main_margin.right + mini_width + mini_margin.left + mini_margin.right)
.attr("height", main_height + main_margin.top + main_margin.bottom)
.call(zoomer)
.on("wheel.zoom", scroll)
.on("mousedown.zoom", null)
.on("touchstart.zoom", null)
.on("touchmove.zoom", null)
.on("touchend.zoom", null);
}
// The basic variables in order to execute t-SNE (opt is perplexity and learning rate).
var tsne; var opt; var step_counter; var max_counter; var runner;
@ -16,6 +54,7 @@ var dists; var dists2d; var all_labels; var dist_list = []; var dist_list2d = []
// These are the dimensions for the Overview view and the Main view
var dim = document.getElementById('overviewRect').offsetWidth-2; var dimensions = document.getElementById('modtSNEcanvas').offsetWidth; var dimensionsY = document.getElementById('modtSNEcanvas').offsetHeight; var lassoFlag = false;
var dimh = document.getElementById('overviewRect').offsetHeight-2;
// Category = the name of the category if it exists. The user has to add an asterisk ("*") mark in order to let the program identify this feature as a label/category name.
// ColorsCategorical = the categorical colors (maximum value = 10).
@ -53,7 +92,7 @@ var ParametersSet = []; var overallCost; var input;
var ringNotes = []; var gAnnotationsAll = []; var AnnotationsAll = []; var draggable = [];
// These variables are set here in order to instatiate the very first Three.js scene.
var MainCanvas; var Child; var renderer; var fov = 18; var near = 10; var far = 7000; var camera; var scene;
var MainCanvas; var Child; var renderer; var fov = 10.2; var near = 10; var far = 7000; var camera; var scene;
// Initialize the Schema Investigation variables.
var Arrayx = []; var Arrayy = []; var XYDistId = []; var Arrayxy = []; var DistanceDrawing1D = []; var allTransformPoints = []; var p; var pFinal = []; var paths; var path; var ArrayLimit = [];
@ -61,13 +100,6 @@ var minimum; var correlationResults = []; var correlationResultsFinal = []; var
var results_all_global = []
var overallWidth = 0, overallHeight = 0;
function myResponsiveComponent(props) {
overallWidth = props.width;
overallHeight = props.height;
}
// This function is executed when the factory button is pressed in order to bring the visualization in the initial state.
function FactoryReset(){
var graphDiv = 'ProjectionsVisual'
@ -115,8 +147,8 @@ function OptimizePoints() {
}
// ajax the JSON to the server
$.post("http://127.0.0.1:5000/receiverOptimizer", JSON.stringify(FocusedIDs), function(){
$.get("http://127.0.0.1:5000/senderOptimizer", function( data ) {
$.post(BACKEND_API_URL+"/receiverOptimizer", JSON.stringify(FocusedIDs), function(){
$.get(BACKEND_API_URL+"/senderOptimizer", function( data ) {
dataReceivedFromServerOptimized = data
ReSort(false)
});
@ -135,7 +167,7 @@ function ReSort(flagInitialize) {
var width= dimensions*0.97;
var viewport = getViewport(); // Get the width and height of the main visualization
var vh = viewport[1] * 0.035;
var height= vh * 1.9;
var height= vh * 2.8;
var graphDiv = 'ProjectionsVisual'
@ -159,9 +191,9 @@ function ReSort(flagInitialize) {
metricsSorting = dataReceivedFromServerOptimized['metrics']
metrics = dataReceivedFromServerOptimized['metricsEntire']
if (FocusedIDs.length == points.length) {
document.getElementById("textToChange").innerHTML = "[Sorting Projections According to Metric:";
document.getElementById("textToChange").innerHTML = "[Sorting:";
} else {
document.getElementById("textToChange").innerHTML = "[Sorting Projections According to Metric for Current Selection:";
document.getElementById("textToChange").innerHTML = "[Sorting for Selection:";
}
} else {
if (!globalFlagCheck) {
@ -285,8 +317,8 @@ if(k >= 6) {
zmax:1,
colorscale: colorscaleValue,
colorbar: {
title: 'Met. Per.',
tickvals:[0,0.2,0.4,0.6,0.8,1],
title: 'Perform.',
tickvals:[0,0.5,1],
titleside:'right',
},
xaxis: 'x'+parseInt(k+1),
@ -596,7 +628,7 @@ if(k >= 6) {
margin: {
l: 10,
r: 10,
b: 15,
b: 37,
t: 2,
pad: 0
},
@ -831,15 +863,15 @@ function parseData(url) {
if (insideCall) {
init(results.data, results_all, results.meta.fields); // Call the init() function that starts everything!
} else {
$.post("http://127.0.0.1:5000/resetAll", JSON.stringify(''), function(){
$.post(BACKEND_API_URL+"/resetAll", JSON.stringify(''), function(){
});
var parametersLocal = []
parametersLocal.push(document.getElementById("param-perplexity-value").value)
parametersLocal.push(document.getElementById("param-learningrate-value").value)
parametersLocal.push(document.getElementById("param-maxiter-value").value)
parametersLocal.push(results_all)
$.post("http://127.0.0.1:5000/receiverSingle", JSON.stringify(parametersLocal), function(){
$.get("http://127.0.0.1:5000/senderSingle", function( data ) {
$.post(BACKEND_API_URL+"/receiverSingle", JSON.stringify(parametersLocal), function(){
$.get(BACKEND_API_URL+"/senderSingle", function( data ) {
dataReceivedFromServer = data
projections = dataReceivedFromServer['projections']
betas = dataReceivedFromServer['betas']
@ -856,7 +888,7 @@ function parseData(url) {
if (flagAnalysis) {
$('#myModal').modal('hide');
$.post("http://127.0.0.1:5000/resetAll", JSON.stringify(''), function(){
$.post(BACKEND_API_URL+"/resetAll", JSON.stringify(''), function(){
});
var parametersLocal = []
@ -864,8 +896,8 @@ function parseData(url) {
parametersLocal.push(document.getElementById("param-learningrate-value").value)
parametersLocal.push(document.getElementById("param-maxiter-value").value)
parametersLocal.push(results_all)
$.post("http://127.0.0.1:5000/receiverSingle", JSON.stringify(parametersLocal), function(){
$.get("http://127.0.0.1:5000/senderSingle", function( data ) {
$.post(BACKEND_API_URL+"/receiverSingle", JSON.stringify(parametersLocal), function(){
$.get(BACKEND_API_URL+"/senderSingle", function( data ) {
dataReceivedFromServer = data
projections = dataReceivedFromServer['projections']
betas = dataReceivedFromServer['betas']
@ -878,10 +910,10 @@ function parseData(url) {
});
} else {
// ajax the JSON to the server
$.post("http://127.0.0.1:5000/resetAll", JSON.stringify(''), function(){
$.post(BACKEND_API_URL+"/resetAll", JSON.stringify(''), function(){
});
$.post("http://127.0.0.1:5000/receiver", JSON.stringify(results_all), function(){
$.get("http://127.0.0.1:5000/sender", function( data ) {
$.post(BACKEND_API_URL+"/receiver", JSON.stringify(results_all), function(){
$.get(BACKEND_API_URL+"/sender", function( data ) {
dataReceivedFromServer = data
ReSortOver()
@ -994,11 +1026,12 @@ if (optionMetric == 1) {
zmin:0,
zmax:1,
colorbar: {
title: 'Normalized Metrics Performance',
title: 'Metrics performance (normalized)',
tickvals:[0,0.2,0.4,0.6,0.8,1],
titleside:'right',
},
xaxis: 'x'+parseInt(k+1),
yaxis: 'y'+parseInt(k+1),
})
} else {
@ -2373,10 +2406,10 @@ function setReInitializeDistanceCorrelation(flag){
function setReInitialize(flag){
if(flag){
// Change between color-encoding and size-encoding mapped to 1/sigma and KLD.
if (document.getElementById('selectionLabel').innerHTML == 'Size-encoding'){
document.getElementById('selectionLabel').innerHTML = 'Color-encoding';
if (document.getElementById('selectionLabel').innerHTML == 'Size'){
document.getElementById('selectionLabel').innerHTML = 'Color';
} else{
document.getElementById('selectionLabel').innerHTML = 'Size-encoding';
document.getElementById('selectionLabel').innerHTML = 'Size';
}
}
@ -2554,7 +2587,7 @@ function setAnnotator(){ // Set a new annotation on top of the main visualizatio
// Unchecked!
checkBox.checked = false;
// Print a message to the user.
alert("Cannot hide the annotators' controls because, currently, there are no annotations into the visual representation.")
alert("Cannot hide the annotator controls because there are no comments on top of the main visualization at the moment.")
}
});
@ -2563,7 +2596,7 @@ function setAnnotator(){ // Set a new annotation on top of the main visualizatio
$('#downloadDists').change(function() {
if(!this.checked) {
returnVal = confirm("Are you sure that you want to store the points and the parameters without the distances?");
returnVal = confirm("Are you sure that you want to store only the points and all the parameters without the distances?");
$(this).prop("checked", !returnVal);
}
});
@ -2612,7 +2645,7 @@ function MainVisual(){
// fields variable is all the features (columns) plus beta and cost strings.
function init(data, results_all, fields) {
$('#comment').attr('placeholder', "Please, provide your comment.");
$('#comment').attr('placeholder', "Write a comment.");
ArrayWithCosts = [];
Iterations = [];
VisiblePoints = [];
@ -2631,11 +2664,13 @@ function init(data, results_all, fields) {
//pcpInitialize();
d3.select("#hider").style("z-index", 2);
d3.select("#hider").style("width", "48.7vw");
d3.select("#hider").style("height", overallHeight/11.8);
d3.select("#knnBarChart").style("z-index", 1);
d3.select("#hider2").style("z-index", 2);
d3.select("#hider2").style("width", overallWidth/4.6);
d3.select("#hider2").style("height", overallHeight/14.3);
d3.select("#hider2").style("height", overallHeight/16);
d3.select("#PlotCost").style("z-index", 1);
// Clear the previously drawn main visualization canvas.
@ -2886,25 +2921,25 @@ function OverallCostLineChart(){
var layout = {
showlegend: false,
width: overallWidth/4.6,
height: overallHeight/14.3,
height: overallHeight/16,
xaxis:{title: 'Iteration',
titlefont: {
family: "sans-serif",
size: '12',
size: '11',
color: 'black'
}},
yaxis:{title: 'Ov. cost',
titlefont: {
family: "sans-serif",
size: '12',
size: '11',
color: 'black'
},
y: 0.1,},
margin: {
l: 32,
r: 15,
b: 30,
t: 5
b: 25,
t: 6
},
};
@ -3016,7 +3051,7 @@ function ShepardHeatMap () {
if (SHViewOptions == 1) {
// Set the margin of the shepard heatmap
var margin = { top: 35, right: 15, bottom: 15, left: 35 },
var margin = { top: 35, right: 15, bottom: 15, left: 40 },
dim2 = Math.min(parseInt(d3.select("#sheparheat").style("width")), parseInt(d3.select("#sheparheat").style("height")))
width = dim2- margin.left - margin.right,
height = dim2 - margin.top - margin.bottom,
@ -3132,18 +3167,18 @@ function ShepardHeatMap () {
.attr("x", 0)
.attr("y", function (d, i) { return i * gridSize * 2; })
.style("text-anchor", "end")
.style("font-size", "10px")
.style("font-size", "calc(0.35em + 0.5vmin)")
.attr("transform", "translate(-6," + gridSize / 4 + ")")
.attr("class","mono");
var tooltip2 = d3.select("body")
/*var tooltip2 = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "12")
.style("text-align","center")
.style("width","300px")
.style("height","50px")
.style("height","60px")
.style("padding","2px")
.style("background","lightsteelblue")
.style("border-radius","8px")
@ -3151,26 +3186,27 @@ function ShepardHeatMap () {
.style("pointer-events","centnoneer")
.style("color","black")
.style("visibility", "hidden")
.text("Hint: if values are closer to N-Dim. distances, then the visualization is too compressed.");
.text("Tip: if values are closer to N-D distances, then the visualization is too compressed.");*/
var title = svg.append("text") // Title = Input Distance
.attr("class", "mono")
.attr("x", -(gridSize * 8))
.attr("y", -26)
.style("font-size", "12px")
.attr("y", -28)
.style("font-size", "calc(0.35em + 0.75vmin)")
.attr("transform", "rotate(-90)")
.on("mouseover", function(){return tooltip2.style("visibility", "visible");})
.on("mousemove", function(){return tooltip2.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip2.style("visibility", "hidden");})
.text("N-Dimensional Distances");
.attr("title","Tip: if values are closer to N-D distances, then the visualization is too compressed.")
//.on("mouseover", function(){return tooltip2.style("visibility", "visible");})
//.on("mousemove", function(){return tooltip2.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
//.on("mouseout", function(){return tooltip2.style("visibility", "hidden");})
.text("N-D distances");
var tooltip1 = d3.select("body")
/*var tooltip1 = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "12")
.style("text-align","center")
.style("width","300px")
.style("height","50px")
.style("height","60px")
.style("padding","2px")
.style("background","lightsteelblue")
.style("border-radius","8px")
@ -3178,17 +3214,18 @@ function ShepardHeatMap () {
.style("pointer-events","centnoneer")
.style("color","black")
.style("visibility", "hidden")
.text("Hint: if values are closer to 2-Dim. distances, then the visualization is too spread out.");
.text("Tip: if values are closer to 2-D distances, then the visualization is too spread out.");*/
var title = svg.append("text") // Title = Output Distance
.attr("class", "mono")
.attr("x", gridSize * 2 )
.attr("x", gridSize * 2.5)
.attr("y", -20)
.on("mouseover", function(){return tooltip1.style("visibility", "visible");})
.on("mousemove", function(){return tooltip1.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip1.style("visibility", "hidden");})
.style("font-size", "12px")
.text("2-Dimensional Distances");
.attr("title","Tip: if values are closer to 2-D distances, then the visualization is too spread out.")
//.on("mouseover", function(){return tooltip1.style("visibility", "visible");})
//.on("mousemove", function(){return tooltip1.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
//.on("mouseout", function(){return tooltip1.style("visibility", "hidden");})
.style("font-size", "calc(0.35em + 0.75vmin)")
.text("2-D distances");
var dim2Labels = svg.selectAll(".dim2Label") // Label
.data(dim_2)
@ -3197,7 +3234,7 @@ function ShepardHeatMap () {
.attr("x", function(d, i) { return i * gridSize * 3.2; })
.attr("y", 0)
.style("text-anchor", "middle")
.style("font-size", "10px")
.style("font-size", "calc(0.35em + 0.5vmin)")
.attr("transform", "translate(" + gridSize / 4 + ", -6)")
.attr("class","mono");
@ -3229,8 +3266,10 @@ function ShepardHeatMap () {
var legend = d3.legendColor() // Legend color and title!
.labelFormat(d3.format(",.0f"))
.shapeWidth(14)
.shapeHeight(14)
.cells(9)
.title("Num. of Points")
.title("Num. of points")
.scale(colorScale);
heatleg.select(".legendLinear")
@ -3298,13 +3337,13 @@ function ShepardHeatMap () {
tip(svg.append("g"));
var tooltip2 = d3.select("body")
/*var tooltip2 = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "12")
.style("text-align","center")
.style("width","300px")
.style("height","50px")
.style("height","60px")
.style("padding","2px")
.style("background","lightsteelblue")
.style("border-radius","8px")
@ -3312,7 +3351,7 @@ function ShepardHeatMap () {
.style("pointer-events","centnoneer")
.style("color","black")
.style("visibility", "hidden")
.text("Hint: if values are closer to N-Dim. distances, then the visualization is too compressed.");
.text("Tip: if values are closer to N-D distances, then the visualization is too compressed.");
var tooltip1 = d3.select("body")
.append("div")
@ -3320,7 +3359,7 @@ function ShepardHeatMap () {
.style("z-index", "12")
.style("text-align","center")
.style("width","300px")
.style("height","50px")
.style("height","60px")
.style("padding","2px")
.style("background","lightsteelblue")
.style("border-radius","8px")
@ -3328,7 +3367,7 @@ function ShepardHeatMap () {
.style("pointer-events","centnoneer")
.style("color","black")
.style("visibility", "hidden")
.text("Hint: if values are closer to 2-Dim. distances, then the visualization is too spread out.");
.text("Tip: if values are closer to 2-D distances, then the visualization is too spread out.");*/
svg.append("rect")
.attr("x",0)
@ -3360,13 +3399,14 @@ function ShepardHeatMap () {
var title = svg.append("text") // Title = Input Distance
.attr("class", "mono")
.attr("x", -(gridSize * 8))
.attr("y", -26)
.style("font-size", "12px")
.attr("y", -28)
.style("font-size", "calc(0.35em + 0.8vmin)")
.attr("transform", "rotate(-90)")
.on("mouseover", function(){return tooltip2.style("visibility", "visible");})
.on("mousemove", function(){return tooltip2.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip2.style("visibility", "hidden");})
.text("N-Dimensional Distances");
.attr("title","Tip: if values are closer to N-D distances, then the visualization is too compressed.")
//.on("mouseover", function(){return tooltip2.style("visibility", "visible");})
//.on("mousemove", function(){return tooltip2.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
//.on("mouseout", function(){return tooltip2.style("visibility", "hidden");})
.text("N-D distances");
// Add X axis label:
@ -3374,17 +3414,18 @@ function ShepardHeatMap () {
.attr("text-anchor", "end")
.attr("x", width/2 + margin.left)
.attr("y", height + margin.top + 20)
.text("2-Dimensional Distances");
.text("2-D distances");
var title = svg.append("text") // Title = Output Distance
.attr("class", "mono")
.attr("x", gridSize * 2 )
.attr("x", gridSize * 2.5)
.attr("y", -20)
.style("font-size", "12px")
.on("mouseover", function(){return tooltip1.style("visibility", "visible");})
.on("mousemove", function(){return tooltip1.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip1.style("visibility", "hidden");})
.text("2-Dimensional Distances");
.style("font-size", "calc(0.35em + 0.75vmin)")
.attr("title","Tip: if values are closer to 2-D distances, then the visualization is too spread out.")
//.on("mouseover", function(){return tooltip1.style("visibility", "visible");})
//.on("mousemove", function(){return tooltip1.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
//.on("mouseout", function(){return tooltip1.style("visibility", "hidden");})
.text("2-D distances");
//var colors = ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"];
// Add dots
@ -3485,9 +3526,9 @@ function OverviewtSNE(points){ // The overview t-SNE function
}
$("#datasetDetails").html("(Num. of Dim.: " + (Object.keys(dataFeatures[0]).length - valCategExists) + ", Num. of Ins.: " + final_dataset.length + ")"); // Print on the screen the number of features and instances of the data set, which is being analyzed.
if (Category == undefined){
$("#CategoryName").html("Classification label: No category"); // Print on the screen the classification label.
$("#CategoryName").html("Target label: N/A"); // Print on the screen the classification label.
} else {
$("#CategoryName").html("Classification label: "+Category.replace('*','')); // Print on the screen the classification label.
$("#CategoryName").html("Target label: "+Category.replace('*','')); // Print on the screen the classification label.
}
//Make an SVG Container
@ -3524,7 +3565,7 @@ if (format[0] == "diabetes"){
// CREATE THE SVG
var svg = d3.select('#overviewRect').append('svg')
.attr('width', dim)
.attr('height', dim)
.attr('height', dimh)
.append('g');
// CREATE THE GROUP
@ -3595,7 +3636,7 @@ var theRect = theGroup.append('rect')
.attr("id", function(d){return d.id;})
.attr("r", 2)
.attr("cx", function(d){return ((d.x/dimensions)*dim);})
.attr("cy", function(d){return ((d.y/dimensionsY)*dim);});
.attr("cy", function(d){return ((d.y/dimensionsY)*dimh);});
}
updateRect();
}
@ -3675,8 +3716,8 @@ function CostHistogram(points){
barmode: "overlay",
bargroupgap: points.length,
autosize: false,
width: 560,
height: 250,
width: overallWidth/4.4,
height: overallHeight/6,
margin: {
l: 50,
r: 20,
@ -3684,15 +3725,15 @@ function CostHistogram(points){
t: 10,
pad: 4
},
xaxis:{range: [0,1.01],title: 'Normalized bins from min to max values.',
xaxis:{range: [0,1.01],title: 'Bins (normalized)',
titlefont: {
size: 14,
size: 12,
color: 'black'
}},
yaxis:{title: 'Num. of Points (log)',
yaxis:{title: 'Num. of points (log)',
type: "log",
titlefont: {
size: 14,
size: 12,
color: 'black'
}}
};
@ -3771,33 +3812,6 @@ function handleLassoStart(lassoPolygon) { // Empty we do not need to reset anyth
redraw(points);*/
}
// Initialize the horizontal (correlations) barchart's variables
var svg, defs, gBrush, brush, main_xScale, mini_xScale, main_yScale, mini_yScale, main_xAxis, main_yAxis, mini_width, textScale;
// Added only for the mouse wheel
var zoomer = d3v3.behavior.zoom()
.on("zoom", null);
// Margin of the main barchart
var main_margin = {top: 8, right: 10, bottom: 30, left: 100},
main_width = 500 - main_margin.left - main_margin.right,
main_height = 350 - main_margin.top - main_margin.bottom;
// Margin of the mini barchart
var mini_margin = {top: 8, right: 10, bottom: 30, left: 10},
mini_height = 350 - mini_margin.top - mini_margin.bottom;
mini_width = 100 - mini_margin.left - mini_margin.right;
// Create the svg correlation component
svg = d3v3.select("#correlation").attr("class", "svgWrapper")
.attr("width", main_width + main_margin.left + main_margin.right + mini_width + mini_margin.left + mini_margin.right)
.attr("height", main_height + main_margin.top + main_margin.bottom)
.call(zoomer)
.on("wheel.zoom", scroll)
.on("mousedown.zoom", null)
.on("touchstart.zoom", null)
.on("touchmove.zoom", null)
.on("touchend.zoom", null);
function click(){ // This is the click of the Schema Investigation scenario
svgClick = d3.select('#modtSNEcanvas_svg_Schema'); // Selecte the svg element
@ -5397,7 +5411,7 @@ if (points.length) { // If points exist (at least 1 point)
svg.append("g")
.attr("class", "legendSize")
.attr("transform", "translate(45,20)");
.attr("transform", "translate(10,15)");
var SizeRange2 = [];
SizeRange2.push(0);
@ -5658,7 +5672,7 @@ if (points.length) { // If points exist (at least 1 point)
.labelFormat(d3.format(",.5f"))
.cells(7)
.labels([abbr_labels_cost[0],abbr_labels_cost[1],abbr_labels_cost[2],abbr_labels_cost[3],abbr_labels_cost[4],abbr_labels_cost[5],abbr_labels_cost[6]])
.title("Rem. Cost")
.title("Remaining Cost")
.scale(colorScale);
svg.select(".legendLinear")
@ -5920,12 +5934,12 @@ function LineBar() {
layout = {
barmode: 'group',autosize: false,
width: dimensions*0.97,
height: vh * 1.3,
height: overallHeight/11.8,
margin: {
l: 50,
r: 30,
b: 30,
t: 5,
t: 10,
pad: 4
},
xaxis: {range: [0, LimitXaxis],
@ -5977,12 +5991,12 @@ function LineBar() {
layout = {
barmode: 'group',autosize: false,
width: dimensions*0.97,
height: vh * 1.3,
height: overallHeight/11.8,
margin: {
l: 50,
r: 30,
b: 30,
t: 5,
t: 10,
pad: 4
},
xaxis: {range: [0, LimitXaxis],
@ -6025,12 +6039,12 @@ function LineBar() {
layout = {
barmode: 'group',autosize: false,
width: dimensions*0.97,
height: vh * 1.3,
height: overallHeight/11.8,
margin: {
l: 50,
r: 30,
b: 30,
t: 5,
t: 10,
pad: 4
},
xaxis: {range: [0, LimitXaxis],

Write Preview
Loading…
Cancel
Save