ISOVIS
/
t-viSNE
9
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity
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.
107 Commits
1 Branch
2 Tags
789 MiB
Tag: Branch: Tree: e6fb8d39c0
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e6fb8d39c0'
${ noResults }
t-viSNE/index.html

513 lines
34 KiB
Raw Normal View History Unescape

Initial commit
6 years ago
<html>
<head>
fixed css
6 years ago
<!-- Ignore Favicon -> Solved the warning in console of the browser. -->
Initial commit
6 years ago
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
added an overall cost plot and fixed some of the issues that we discussed on the previous meeting
6 years ago
<!-- Three.js and Lodash libraries-->
fixed css
6 years ago
<script src='./modules/three.js-r101/three.js'></script>
added an overall cost plot and fixed some of the issues that we discussed on the previous meeting
6 years ago
<script src='./modules/lodash/lodash.js'></script>
Initial commit
6 years ago
fixed css
6 years ago
<!-- Importing D3 minified versions v3 and v5. -->
<script src='./modules/d3v3/d3.min.js'></script>
<script src='./modules/d3/d3.min.js'></script>
fixed PCP
6 years ago
<!-- Importing additional modules such as PCP, annotator, tip, legend, lasso, papaParse, and Jquery. -->
fixed css
6 years ago
<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>
fixed size/color of points
6 years ago
<script src="./modules/d3-lasso/lasso.js"></script>
Fixed the kNN barchart
6 years ago
<script src="./modules/plotly/plotly_min.js"></script>
added an overall cost plot and fixed some of the issues that we discussed on the previous meeting
6 years ago
<script src="./modules/pcp/d3v3.parcoords.js"></script>
fixed css
6 years ago
<script src="./modules/papa/papaparse.min.js"></script>
<script src="./modules/jquery/jquery.min.js"></script>
Initial commit
6 years ago
fixed css
6 years ago
<!-- Basic scripts that we execute. -->
<script src="./js/tsne.js"></script>
<script src="./js/data_form_handler.js"></script>
fixed PCA
6 years ago
<script src="./modules/pca/pca.js"></script>
fixed css
6 years ago
<!-- CSS - Styling -->
update
5 years ago
<link rel="stylesheet" href="./css/w3.css">
fixed css
6 years ago
<link rel="stylesheet" href="./css/style.css"/>
<link rel="stylesheet" href="./css/bootstrap.min.css"/>
check?
6 years ago
<link rel="stylesheet" type="text/css" href="./css/d3.parcoords.css">
added an overall cost plot and fixed some of the issues that we discussed on the previous meeting
6 years ago
<link rel="stylesheet" href="./css/reset.css">
fixed local PCA and workflow
6 years ago
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous">
fixed css
6 years ago
<!-- Bootstrap -->
three plots NB
6 years ago
<script src="./modules/popper/popper.min.js"></script>
fixed size/color of points
6 years ago
<script src="./modules/bootstrap/bootstrap.min.js"></script>
fixed css
6 years ago
</head>
Initial commit
6 years ago
fixed css
6 years ago
<body>
update
5 years ago
<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">
<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>
fixed average
5 years ago
[Sorting Projections According to Metric:
update
5 years ago
<select id="param-SortMOver-view" name="param-SortMOver-view" style="color: black" onchange="ReSortOver()">
fixed average
5 years ago
<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>
update
5 years ago
</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>
fixed css
6 years ago
<div class="container-fluid">
<div class="row">
fixed local PCA and workflow
6 years ago
<div class="col-md-3">
<div class="panel panel-default" id="left-side-param">
<div class="panel-heading">
update
5 years ago
<h2 class="panel-title" style="display:inline-block" data-toggle="tooltip" data-placement="right" title="Tip: control t-SNE algorithm and its parameters.">t-SNE Parameters</h2>
[Mode:
<select id="param-EX-view" name="param-EX-view" data-toggle="tooltip" data-placement="right" title="Tip: change between grid search and a single set of parameters." onchange="ExecuteMode()">
<option value="1" selected>Grid Search</option>
<option value="2">Single Set</option>
</select>
]
<div id="cost" style="display:inline-block; margin-top:3px; float:right"></div>
fixed css
6 years ago
</div>
fixed local PCA and workflow
6 years ago
<div class="panel-body">
<div id="control-panel" data-sr="enter left over 8s">
<div class="param">
three plots NB
6 years ago
<label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">Data sets</label>
fixed local PCA and workflow
6 years ago
<select id="param-dataset" name="param-dataset" onChange="changeDataset(this.value);">
<option value="diabetes.csv" selected>Pima Indian Diabetes</option>
<option value="breast-cancer-wisconsin.csv">Breast Cancer Wisconsin</option>
<option value="iris.csv">Iris</option>
<option value="empty">Upload New File</option>
</select>
three plots NB
6 years ago
<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>
fixed local PCA and workflow
6 years ago
</div>
<div class="param">
three plots NB
6 years ago
<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>
<input id="param-perplexity" type="range" min="5" max="100" value="30", step="1" >
fixed local PCA and workflow
6 years ago
<output for="param-perplexity" id="param-perplexity-value">30</output>
</div>
<div class="param">
three plots NB
6 years ago
<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>
test
5 years ago
<input id="param-learningrate" type="range" min="1" max="150" value="1", step="1">
<output for="param-learningrate" id="param-learningrate-value">1</output>
</div>
fixed local PCA and workflow
6 years ago
<div class="param">
<div class="row">
<div class="col-md-3">
three plots NB
6 years ago
<label for="param-maxiter" style="padding: 25px 0 0 8px" data-toggle="tooltip" data-placement="right" title="Tip: maximum number of iterations for the optimization. Should usually be around 250. (Source: https://scikit-learn.org/stable/modules/generated/sklearn.manifold.TSNE.html)">Max iterations</label>
fixed local PCA and workflow
6 years ago
</div>
<div class="col-md-4" style="padding: 25px 0 0 0px">
<input id="param-maxiter" type="range" min="10" max="1000" value="500", step="10" >
</div>
<div class="col-md-1">
<output for="param-maxiter" id="param-maxiter-value" style="padding: 25px 0 0 0" >500</output>
</div>
<div class="col-md-4">
<div id="hider2"></div>
<div id="PlotCost"></div>
</div>
</div>
</div>
test
5 years ago
<div class="param" style="margin-top: -10px">
fixed local PCA and workflow
6 years ago
<input id="file-input" type="file" name="name" style="display: none;" />
test
5 years ago
<button type="button" class="button" onclick='loadAnalysis();' style="padding:15px 12px 15px 12px; margin-left:15px" data-toggle="tooltip" data-placement="right" title="Tip: load previously executed file in .txt format.">Load execution</button>
<button type="button" class="button" onclick="SaveAnalysis()" style="padding:15px 12px 15px 12px; margin-left:20px" data-toggle="tooltip" data-placement="right" title="Tip: save/store previously executed file in .txt format.">Store execution</button>
<div class="col-md-" style="margin-top: 14px; margin-left:15px">
three plots NB
6 years ago
<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" >
fixed local PCA and workflow
6 years ago
Distances cached on "Store execution"
</label>
</div>
</div>
test
5 years ago
<div class="row">
<div class="col-md-12" style="margin-top:10px">
<p><div id="run-button"><button id="ExecuteBut" class="btn btn-primary btn-block" onclick="getData();" value="Execute new t-SNE analysis" style="margin-top: 4px"><i class="fas fa-running fa-lg" style="margin-right: 10px"></i>Execute new t-SNE analysis</button></div></p>
</div>
</div>
fixed css
6 years ago
</div>
fixed local PCA and workflow
6 years ago
</div>
fixed css
6 years ago
</div>
</div>
<div class="col-md-6">
update
5 years ago
<div class="panel panel-default med-bottomProv" style="margin-top:0.2px; margin-bottom:+14px">
<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>
fixed average
5 years ago
<div id="textToChange" style="display:inline-block">[Sorting Projections According to Metric:</div>
update
5 years ago
<select id="param-SortM-view" name="param-SortM-view" onchange="ReSort(false)">
fixed average
5 years ago
<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>
update
5 years ago
</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 id="ProjectionsMetrics"></div>
</div>
</div>
fixed css
6 years ago
<svg id="SvgAnnotator"></svg>
<svg id="modtSNEcanvas_svg"></svg>
Fixed the different layers
6 years ago
<svg id="modtSNEcanvas_svg_Schema"></svg>
fixed css
6 years ago
<div id="modtSNEDiv">
distances cache
6 years ago
<canvas id = "modtSNEcanvas" ></canvas>
fixed css
6 years ago
</div>
</div>
fixed local PCA and workflow
6 years ago
<div class="col-md-2" style="width: 24.999999995%">
fixed css
6 years ago
<div class="panel panel-default">
<div class="panel-heading">
three plots NB
6 years ago
<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>
fixed css
6 years ago
</div>
<div class="panel-body">
fixed local PCA and workflow
6 years ago
<div id="resetAllFilters" style="margin-bottom: 20px">
three plots NB
6 years ago
<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>
Initial commit
6 years ago
</div>
three plots NB
6 years ago
<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>
fixed css
6 years ago
</div>
</div>
Initial commit
6 years ago
</div>
fixed css
6 years ago
</div>
<div class="row">
fixed local PCA and workflow
6 years ago
<div class="col-md-3" style="margin-top:-4px">
<div class="panel panel-default" style="padding-bottom: 35px;">
<div class="panel-heading">
three plots NB
6 years ago
<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.">t-SNE Overview</h2><div id="datasetDetails"style="display:inline-block; float:right"></div>
fixed local PCA and workflow
6 years ago
</div>
<div class="row">
<div class="panel-body">
<div class="col-md-6">
<div id="overviewRect"></div>
</div>
<div class="col-md-6">
<div style="display:block" id="CategoryName"></div>
<div class="legend" id = "legend2"></div>
</div>
</div>
</div>
fixed css
6 years ago
</div>
</div>
fixed local PCA and workflow
6 years ago
<div class="col-md-3 col-md-offset-6">
update
5 years ago
<div class="panel panel-default" style="margin-top: -200px">
fixed local PCA and workflow
6 years ago
<div class="panel-heading">
three plots NB
6 years ago
<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>
added an overall cost plot and fixed some of the issues that we discussed on the previous meeting
6 years ago
</div>
fixed local PCA and workflow
6 years ago
<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">
three plots NB
6 years ago
<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>
fixed local PCA and workflow
6 years ago
<select id="param-neighborHood" name ="param-neighborHood" onchange="setReInitialize(true);" style="display:inline-block;margin-left: 60px">
three plots NB
6 years ago
<option selected="selected" value="color">Color-encoding</option>
fixed local PCA and workflow
6 years ago
<option value="size">Size-encoding</option>
</select>
</div>
update
5 years ago
<div class="param" style="padding: 0px 0 0px 0" >
fixed local PCA and workflow
6 years ago
<output for="param-neighborHood" id="param-neighborHood-value " ></output>
three plots NB
6 years ago
<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>
fixed local PCA and workflow
6 years ago
</div>
update
5 years ago
<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>
fixed local PCA and workflow
6 years ago
<div class="param">
update
5 years ago
<div class="row" style="margin-top: 10px;">
fixed local PCA and workflow
6 years ago
<div class="col-md-6">
update
5 years ago
<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>
three plots NB
6 years ago
</div>
fixed local PCA and workflow
6 years ago
<div class="col-md-5">
update
5 years ago
<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">
fixed local PCA and workflow
6 years ago
</div>
<div class="col-md-1">
test
6 years ago
<output for="param-corr" id="param-corr-value" style="margin-left: -20px;">50</output>
update
5 years ago
<output for="param-corr2" id="param-corr-value2" style="margin-left: -20px; display: none">10</output>
fixed local PCA and workflow
6 years ago
</div>
</div>
</div>
<div class="param">
<div class="row" style="margin-top: 30px">
<div class="col-md-6">
three plots NB
6 years ago
<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>
fixed local PCA and workflow
6 years ago
</div>
<div class="col-md-5">
the final analyses
6 years ago
<input id="param-lim" type="range" min="1" max="4" value="3", step="0.5" onchange="setReInitialize(false);" style="margin-left: -20px;">
fixed local PCA and workflow
6 years ago
</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-2">
the final analyses
6 years ago
<svg id="legend1" style = "margin-left: -25px"></svg>
fixed local PCA and workflow
6 years ago
</div>
<div class="col-md-2">
test
5 years ago
<svg id="legend4" style = "margin-left: -50px"></svg>
fixed local PCA and workflow
6 years ago
</div>
</div>
update
5 years ago
<div class="annotationAllClass" style="margin-top: 20px">
fixed local PCA and workflow
6 years ago
<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>
fixed correlation issue
6 years ago
</div>
fixed local PCA and workflow
6 years ago
</div>
</div>
<div class="row">
<div class="col-md-3" style="margin-top:-4px">
test
5 years ago
<div class="panel panel-default" style="padding-bottom : 70px">
fixed local PCA and workflow
6 years ago
<div class="panel-heading">
update
5 years ago
<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>
<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>
</select>
]
</div>
fixed local PCA and workflow
6 years ago
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<svg id="sheparheat"></svg>
</div>
<div class="col-md-2">
<svg id="legend3"></svg>
</div>
</div>
</div>
Initial commit
6 years ago
</div>
fixed css
6 years ago
</div>
fixed local PCA and workflow
6 years ago
update
5 years ago
<div class="col-md-3 col-md-offset-6" style="margin-top: -2px">
fixed local PCA and workflow
6 years ago
<div class="panel panel-default right-side-cor">
<div class="panel-heading">
three plots NB
6 years ago
<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>
fixed local PCA and workflow
6 years ago
<input id="param-corlim" type="range" min="0" max="1" value="0.0", step="0.1" style="display:inline-block; float:right" onchange="CalculateCorrel(true);">
</div>
</div>
<div class="panel-body">
<svg id="correlation"></svg>
</div>
Fixed kNN
6 years ago
</div>
Initial commit
6 years ago
</div>
fixed local PCA and workflow
6 years ago
</div>
Initial commit
6 years ago
<div class="row">
fixed css
6 years ago
<div class="col-md-3">
fixed local PCA and workflow
6 years ago
<div class="col-md-3" id="extra-information" style="width: 24.8vw">
<div class="panel panel-default right-side-hist">
fixed css
6 years ago
<div class="panel-heading">
three plots NB
6 years ago
<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>
the final analyses
6 years ago
<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">
three plots NB
6 years ago
<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>
fixed local PCA and workflow
6 years ago
<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);">
the final analyses
6 years ago
</div>
</div>
fixed css
6 years ago
</div>
fixed local PCA and workflow
6 years ago
<div class="panel-body">
<div id="costHist"></div>
fixed css
6 years ago
</div>
fixed local PCA and workflow
6 years ago
</div>
</div>
Initial commit
6 years ago
</div>
fixed css
6 years ago
<div class = col-md-6>
update
5 years ago
<div class="panel panel-default med-bottom" style="margin-top:+172px">
added an overall cost plot and fixed some of the issues that we discussed on the previous meeting
6 years ago
<div class="panel-heading">
three plots NB
6 years ago
<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>
three plots NB
6 years ago
[Visualization:
<select id="param-NB-view" name="param-NB-view" onchange="LineBar()">
update
5 years ago
<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>
three plots NB
6 years ago
</select>
]
<div id="knnBarChartDetails"style="display:inline-block; float:right">
</div>
added an overall cost plot and fixed some of the issues that we discussed on the previous meeting
6 years ago
</div>
<div class="panel-body">
fixed an issue with kNN barchart
6 years ago
<div id="hider"></div>
fixed a small issue in interactions
6 years ago
<div id="knnBarChart"></div>
added an overall cost plot and fixed some of the issues that we discussed on the previous meeting
6 years ago
</div>
</div>
Initial commit
6 years ago
</div>
fixed local PCA and workflow
6 years ago
<div class="col-md-3">
<div class="panel panel-default right-side-PCP">
<div class="panel-heading">
three plots NB
6 years ago
<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>
fixed local PCA and workflow
6 years ago
</div>
<div class="panel-body">
<div id="PCP" class="parcoords"></div>
fixed css
6 years ago
</div>
fixed local PCA and workflow
6 years ago
</div>
Initial commit
6 years ago
</div>
</div>
</div>
fixed css
6 years ago
Initial commit
6 years ago
<script>
three plots NB
6 years ago
// Tooltip
$(document).ready(function(){
fixed bug with bootstrap and tooltips
6 years ago
$("[rel='tooltip']").tooltip();
three plots NB
6 years ago
});
Fixed the kNN barchart
6 years ago
update
5 years ago
$(document).ready(function(){
$("#ExecuteBut").click(function(){
var mode = document.getElementById('param-EX-view').value
mode = parseInt(mode)
test
5 years ago
update
5 years ago
if (mode == 1) {
$("#myModal").modal('show');
$('.modal-backdrop').removeClass("modal-backdrop");
}
});
});
function closeModalFun () {
$('#myModal').modal('hide');
}
test
5 years ago
$("#cost").html('(Unknown Overall Cost)');
any changes?
6 years ago
$("#datasetDetails").html('(Unknown Number of Dimensions and Instances)');
added the distributions
6 years ago
$("#CategoryName").html('No Classification');
added an overall cost plot and fixed some of the issues that we discussed on the previous meeting
6 years ago
$("#knnBarChartDetails").html('(Number of Selected Points: 0/0)');
fixed css
6 years ago
/* 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()); });
Initial commit
6 years ago
$('#param-corr').bind('input', function () { $('#param-corr-value').text($('#param-corr').val()); });
update
5 years ago
$('#param-corr2').bind('input', function () { $('#param-corr-value2').text($('#param-corr2').val()); });
added an overall cost plot and fixed some of the issues that we discussed on the previous meeting
6 years ago
$('#param-corlim').bind('input', function () { $('#param-corlim-value').text($('#param-corlim').val()); });
$('#param-costlim').bind('input', function () { $('#param-costlim-value').text($('#param-costlim').val()); });
Initial commit
6 years ago
$('#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()); });
fixed css
6 years ago
// Get the container element
added comments, fixed schema investigation
6 years ago
var btnContainer = document.getElementById("commBtn"); //Add a new comment button
fixed css
6 years ago
// 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");
fixed local PCA and workflow
6 years ago
current[0].className = current[0].className.replace("btn btn-default active", "btn btn-default");
fixed css
6 years ago
this.className += " active";
});
}
// Get the container element
added comments, fixed schema investigation
6 years ago
var btnContainer2 = document.getElementById("resetAllFilters"); //resetAllFilters button
fixed css
6 years ago
// 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");
fixed local PCA and workflow
6 years ago
current[0].className = current[0].className.replace("btn btn-info active", "btn btn-info");
fixed css
6 years ago
this.className += " active";
});
}
three plots NB
6 years ago
Initial commit
6 years ago
</script>
fixed css
6 years ago
<script>
/* On resize refresh the shepardHeatmap */
window.onresize = function(event) {
if ( document.getElementById('cost').hasChildNodes() ) {
// Clear legend for the shepardHeatmap
fixed width/height issues
6 years ago
//var svgLegend = d3.select("#legend3");
//svgLegend.selectAll("*").remove();
fixed css
6 years ago
// Clear the SheapHeardmap before refreshing
fixed width/height issues
6 years ago
//var svg = d3.select("#sheparheat");
//svg.selectAll("*").remove();
fixed css
6 years ago
// Call the ShepardHeatmap again to be redrawn
fixed width/height issues
6 years ago
//ShepardHeatMap();
2 new data sets
6 years ago
MainVisual();
fixed css
6 years ago
}
Initial commit
6 years ago
}
fixed css
6 years ago
/* 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');
}
Initial commit
6 years ago
}
}
}
fixed css
6 years ago
</script>
Initial commit
6 years ago
fixed css
6 years ago
<!-- Load the core visualization script. -->
<script src="./js/tsne_vis.js"></script>
Initial commit
6 years ago
</body>
fixed css
6 years ago
Initial commit
6 years ago
</html>