fix responsiveness at first panel

Former-commit-id: cac9459442
master
parent 17d75ed34c
commit 23a34d2ec2
  1. 1000
      betas.txt
  2. 1000
      cost_per_iter.txt
  3. 1000
      cost_per_point.txt
  4. 82
      css/style.css
  5. 163
      index.html
  6. 3
      js/data_form_handler.js
  7. 78
      js/tsne_vis.js
  8. BIN
      result.dat

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -1,104 +1,75 @@
/* Custom styling */
/* Main html/body configurations */
html, body {
max-width: 100%;
max-width: 100% !important;
font-family: sans-serif !important;
font-size: 15px !important;
/*overflow-x: hidden;
overflow-y: hidden;*/
font-size: calc(0.35em + 1vmin) !important;
}
.container-fluid {
margin-top: 8px;
}
.btn{
font-size: 15px !important;
h2 {
font-size: calc(0.5em + 1vmin) !important;
}
#param-correlation {
flex: 1;
display: flex;
flex-direction: column;
select {
font-size: calc(0.35em + 1vmin) !important;
}
#param-correlation > .param {
display: flex;
margin: 5px 0px;
button {
font-size: calc(0.35em + 1vmin) !important;
}
#param-correlation > .param > label {
width: 200px;
text-align: left;
padding: 4px 0 0 0px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
cursor: default;
.container-fluid {
margin-top: 15px;
}
#param-correlation > .param > input[type='range'] {
width: 60%;
margin-right: 10px;
text-align: left;
.table {
padding: 0 !important;
margin: 0 !important;
}
#param-correlation > .param > select {
flex: 0 0 45%;
width: 100%;
text-align: left;
table td {
vertical-align: middle !important;
}
#param-correlation > .param > output {
flex: 1;
text-align: left;
padding:5px 0;
vertical-align: middle;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
cursor: default;
input[type='file'] {
color: transparent; /* Hides your "No File Selected" */
width: 95px;
}
/* Control panels on the left side are styled */
#control-panel {
#param-correlation {
flex: 1;
display: flex;
flex-direction: column;
}
#control-panel > .param {
#param-correlation > .param {
display: flex;
margin: 5px 0px;
}
#control-panel > .param > label {
#param-correlation > .param > label {
width: 200px;
text-align: left;
padding: 4px 0 0 8px;
padding: 4px 0 0 0px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
cursor: default;
}
#control-panel > .param > input[type='range'] {
#param-correlation > .param > input[type='range'] {
width: 60%;
margin-right: 10px;
text-align: left;
}
#control-panel > .param > select {
#param-correlation > .param > select {
flex: 0 0 45%;
width: 100%;
text-align: left;
}
#control-panel > .param > output {
#param-correlation > .param > output {
flex: 1;
text-align: left;
padding:5px 0;
@ -267,8 +238,6 @@ svg#legend3 {
}
#hider2 {
height: 3vw;
width: 8.4vw;
margin-left: -5px;
text-align: left;
background-color: white;
@ -445,7 +414,6 @@ svg#legend3 {
text-decoration: none;
display: inline-block;
font-size: 14px;
margin-left:10px;
}
/* Load and Save Analysis Buttons Styling */

@ -4,6 +4,8 @@
<!-- Ignore Favicon -> Solved the warning in console of the browser. -->
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>t-viSNE</title>
<!-- Three.js and Lodash libraries-->
<script src='./modules/three.js-r101/three.js'></script>
<script src='./modules/lodash/lodash.js'></script>
@ -72,79 +74,75 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<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: control t-SNE algorithm and its parameters.">t-SNE Parameters</h2>
<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:
<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()">
<select id="param-EX-view" name="param-EX-view" data-toggle="tooltip" data-placement="right" title="Tip: the option of changing between grid search (generating 500 projections) and a single set of parameters (1 projection)." onchange="ExecuteMode()">
<option value="1" selected>Grid Search</option>
<option value="2">Single Set</option>
</select>
]
<div id="cost" style="display:inline-block; margin-top:3px; float:right"></div>
<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">
<div id="control-panel" data-sr="enter left over 8s">
<div class="param">
<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>
<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="SPECTF.csv">SPECTF</option>
<option value="blobs.csv">Gaussian Clusters</option>
<option value="empty">Upload New File</option>
</select>
<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>
</div>
<div class="param">
<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" >
<output for="param-perplexity" id="param-perplexity-value">30</output>
</div>
<div class="param">
<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>
<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>
<div class="param">
<div class="row">
<div class="col-md-3">
<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>
</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>
<table class="table table-borderless">
<tbody>
<tr>
<td scope="row"><label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided (only numerical values supported) or upload a new file (do not forget to use * for the target label).">Data sets</label></td>
<td>
<select id="param-dataset" name="param-dataset" onChange="changeDataset(this.value);">
<option value="diabetes.csv" selected>Diabetes</option>
<option value="breast-cancer-wisconsin.csv">Breast Cancer</option>
<option value="iris.csv">Iris</option>
<option value="SPECTF.csv">SPECTF</option>
<option value="blobs.csv">Gaussian Clusters</option>
<option value="empty">Upload File</option>
</select>
</td>
<td><button type="button" class="button" id="FactRes" onclick="FactoryReset()" data-toggle="tooltip" data-placement="right" title="Tip: Restart the entire web page/application.">Factory reset</button></td>
</tr>
<tr>
<td scope="row"><label for="param-perplexity" data-toggle="tooltip" data-placement="right" title="Tip: perplexity is a measure for information that is defined as 2 to the power of the Shannon entropy. The perplexity of a fair die with k sides is equal to k. In t-SNE, the perplexity may be viewed as a knob that sets the number of effective nearest neighbors. (Source: https://lvdmaaten.github.io/tsne/).">Perplexity</label></td>
<td><input id="param-perplexity" type="range" min="5" max="100" value="30", step="1" ></td>
<td><output for="param-perplexity" id="param-perplexity-value">30</output></td>
</tr>
<tr>
<td scope="row"><label for="param-learningrate" data-toggle="tooltip" data-placement="right" title="Tip: if the learning rate is too high, the data may look like a ‘ball’ with any point approximately equidistant from its nearest neighbours. If the learning rate is too low, most points may look compressed in a dense cloud with few outliers. If the cost function gets stuck in a bad local minimum increasing the learning rate may help. (Source: https://scikit-learn.org/stable/modules/generated/sklearn.manifold.TSNE.html).">Learning rate</label></td>
<td><input id="param-learningrate" type="range" min="1" max="150" value="1", step="1"></td>
<td><output for="param-learningrate" id="param-learningrate-value">1</output></td>
</tr>
<tr>
<td scope="row"><label for="param-maxiter" data-toggle="tooltip" data-placement="right" title="Tip: maximum number of iterations for the optimization. Should usually be around 250. (Source: https://scikit-learn.org/stable/modules/generated/sklearn.manifold.TSNE.html).">Max iterations</label></td>
<td><input id="param-maxiter" type="range" min="10" max="1000" value="500", step="10"></td>
<td><output for="param-maxiter" id="param-maxiter-value" >500</output></td>
</tr>
<tr>
<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>
</div>
</div>
</div>
<div class="param" style="margin-top: -10px">
<input id="file-input" type="file" name="name" style="display: none;" />
<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">
<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" >
Distances cached on "Store execution"
</td>
</tr>
<tr>
<td scope="row">
<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>
</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.">
<input id="downloadDists" checked type="checkbox" >
Cache distances
</label>
</div>
</div>
<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>
</div>
</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>
</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>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@ -198,7 +196,7 @@
<div class="col-md-3" style="margin-top:-4px">
<div class="panel panel-default" style="padding-bottom: 35px;">
<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.">t-SNE 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 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>
</div>
<div class="row">
<div class="panel-body">
@ -395,10 +393,35 @@
</div>
</div>
</div>
-->
</div>
<div class="footer">
<hr>
<p class="text-muted credit no-top-margin no-bottom-margin">
&copy; ISOVIS group 2019&ndash;2020
</p>
<p class="text-muted credit no-top-margin no-bottom-margin">
Last updated: June 15, 2020
</p>
</div>
</div>
<!-- Load the core visualization script. -->
<script src="./js/tsne_vis.js"></script>
<script>
function render() {
myResponsiveComponent({
width: document.body.clientWidth,
height: document.body.clientHeight
});
}
render();
window.addEventListener('resize', render);
// Tooltip
$(document).ready(function(){
$("[rel='tooltip']").tooltip();
@ -420,10 +443,10 @@
$('#myModal').modal('hide');
}
$("#cost").html('(Unknown Overall Cost)');
$("#datasetDetails").html('(Unknown Number of Dimensions and Instances)');
$("#CategoryName").html('No Classification');
$("#knnBarChartDetails").html('(Number of Selected Points: 0/0)');
$("#cost").html('(Ov. Cost: ?)');
$("#datasetDetails").html('(Num. of Dim. and Ins.: ?)');
$("#CategoryName").html('No labels');
$("#knnBarChartDetails").html('(Num. of Selected Points: 0/0)');
/* This script is used in order to give functionalities to the different buttons provide through the front-end. */
$('#param-lim').bind('input', function () { $('#param-lim-value').text($('#param-lim').val()); });
$('#param-corr').bind('input', function () { $('#param-corr-value').text($('#param-corr').val()); });
@ -462,9 +485,6 @@
});
}
</script>
<script>
/* On resize refresh the shepardHeatmap */
window.onresize = function(event) {
if ( document.getElementById('cost').hasChildNodes() ) {
@ -505,9 +525,6 @@
}
</script>
<!-- Load the core visualization script. -->
<script src="./js/tsne_vis.js"></script>
</body>
</html>

@ -9,10 +9,11 @@ function changeDataset(value) {
d3.select("#data")
.append("input")
.attr("type", "file")
.style("font-size", "10px")
.style("font-size", 'calc(0.35em + 0.9vmin)')
.on("change", function() {
var file = d3.event.target.files[0];
getfile(file);
$("#data").html(file.name);
})
} else {
$("#data").html('Data sets'); // Print on the screen the classification label.

@ -61,6 +61,13 @@ 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'
@ -2627,6 +2634,8 @@ function init(data, results_all, fields) {
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("#PlotCost").style("z-index", 1);
// Clear the previously drawn main visualization canvas.
@ -2639,9 +2648,9 @@ function init(data, results_all, fields) {
d3.selectAll("#legend3 > *").remove();
d3.selectAll("#legend4 > *").remove();
$("#datasetDetails").html('(Unknown Number of Dimensions and Instances)');
$("#CategoryName").html('No Classification');
$("#knnBarChartDetails").html('(Number of Selected Points: 0/0)');
$("#datasetDetails").html('(Num. of Dim. and Ins.: ?)');
$("#CategoryName").html('No labels');
$("#knnBarChartDetails").html('(Num. of Selected Points: 0/0)');
// Enable again the lasso interaction.
lassoEnable();
@ -2854,6 +2863,8 @@ function computeDistances(data, distFunc, transFunc) {
function OverallCostLineChart(){
d3.select("#hider2").style("z-index", -1);
d3.select("#hider2").style("width", 0);
d3.select("#hider2").style("height", 0);
d3.select("#PlotCost").style("z-index", 2);
var trace1 = {
@ -2874,27 +2885,30 @@ function OverallCostLineChart(){
var layout = {
showlegend: false,
width: 215,
height: 80,
xaxis:{title: 'Iterations',
titlefont: {
size: 12,
color: 'black'
}},
yaxis:{title: 'Ov. Cost',
titlefont: {
size: 12,
color: 'black'
}},
width: overallWidth/4.6,
height: overallHeight/14.3,
xaxis:{title: 'Iteration',
titlefont: {
family: "sans-serif",
size: '12',
color: 'black'
}},
yaxis:{title: 'Ov. cost',
titlefont: {
family: "sans-serif",
size: '12',
color: 'black'
},
y: 0.1,},
margin: {
l: 40,
l: 32,
r: 15,
b: 30,
t: 5
},
};
Plotly.newPlot('PlotCost', data, layout,{displayModeBar:false}, {staticPlot: true});
Plotly.newPlot('PlotCost', data, layout,{displayModeBar:false}, {staticPlot: true}, {responsive: true});
}
// Function that updates embedding
@ -2948,7 +2962,7 @@ function updateEmbedding(AnalysisResults) {
ArrayWithCostsList = AnalysisResults.slice(2*dataFeatures.length+length+10, 2*dataFeatures.length+length+11);
Iterations = IterationsList[0];
ArrayWithCosts = ArrayWithCostsList[0];
$("#cost").html("(Overall Cost: " + overallCost + ")");
$("#cost").html("(Ov. Cost: " + overallCost + ")");
$('#param-perplexity-value').text(ParametersSet[1]);
$('#param-learningrate-value').text(ParametersSet[2]);
$('#param-maxiter-value').text(ParametersSet[3]);
@ -2962,7 +2976,7 @@ function updateEmbedding(AnalysisResults) {
ArrayWithCostsList = AnalysisResults.slice(2*length+8, 2*length+9);
Iterations = IterationsList[0];
ArrayWithCosts = ArrayWithCostsList[0];
$("#cost").html("(Overall Cost: " + overallCost + ")");
$("#cost").html("(Ov. Cost: " + overallCost + ")");
$('#param-perplexity-value').text(ParametersSet[1]);
$('#param-learningrate-value').text(ParametersSet[2]);
$('#param-maxiter-value').text(ParametersSet[3]);
@ -3216,7 +3230,7 @@ function ShepardHeatMap () {
var legend = d3.legendColor() // Legend color and title!
.labelFormat(d3.format(",.0f"))
.cells(9)
.title("Number of Points")
.title("Num. of Points")
.scale(colorScale);
heatleg.select(".legendLinear")
@ -3399,33 +3413,33 @@ function step() {
if (sliderTrigger) {
if (sliderInsideTrigger) {
if (cost_overall[activeProjectionNumberProv][step_counter-1].toFixed(3) < 0) {
$("#cost").html("(Overall Cost: 0.000)");
$("#cost").html("(Ov. Cost: 0.000)");
ArrayWithCosts.push(0);
Iterations.push(step_counter);
} else {
$("#cost").html("(Overall Cost: " + cost_overall[activeProjectionNumberProv][step_counter-1].toFixed(3) + ")");
$("#cost").html("(Ov. Cost: " + cost_overall[activeProjectionNumberProv][step_counter-1].toFixed(3) + ")");
ArrayWithCosts.push(cost_overall[activeProjectionNumberProv][step_counter-1].toFixed(3));
Iterations.push(step_counter);
}
} else {
if (cost_overall[activeProjectionNumber][step_counter-1].toFixed(3) < 0) {
$("#cost").html("(Overall Cost: 0.000)");
$("#cost").html("(Ov. Cost: 0.000)");
ArrayWithCosts.push(0);
Iterations.push(step_counter);
} else {
$("#cost").html("(Overall Cost: " + cost_overall[activeProjectionNumber][step_counter-1].toFixed(3) + ")");
$("#cost").html("(Ov. Cost: " + cost_overall[activeProjectionNumber][step_counter-1].toFixed(3) + ")");
ArrayWithCosts.push(cost_overall[activeProjectionNumber][step_counter-1].toFixed(3));
Iterations.push(step_counter);
}
}
} else {
if (cost_overall[activeProjectionNumber][step_counter-1].toFixed(3) < 0) {
$("#cost").html("(Overall Cost: 0.000)");
$("#cost").html("(Ov. Cost: 0.000)");
ArrayWithCosts.push(0);
Iterations.push(step_counter);
} else {
$("#cost").html("(Overall Cost: " + cost_overall[activeProjectionNumber][step_counter-1].toFixed(3) + ")");
$("#cost").html("(Ov. Cost: " + cost_overall[activeProjectionNumber][step_counter-1].toFixed(3) + ")");
ArrayWithCosts.push(cost_overall[activeProjectionNumber][step_counter-1].toFixed(3));
Iterations.push(step_counter);
}
@ -3469,7 +3483,7 @@ function OverviewtSNE(points){ // The overview t-SNE function
}
}
}
$("#datasetDetails").html("(Number of Dimensions: " + (Object.keys(dataFeatures[0]).length - valCategExists) + ", Number of Instances: " + final_dataset.length + ")"); // Print on the screen the number of features and instances of the data set, which is being analyzed.
$("#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.
} else {
@ -3675,7 +3689,7 @@ function CostHistogram(points){
size: 14,
color: 'black'
}},
yaxis:{title: 'Number of Points (log)',
yaxis:{title: 'Num. of Points (log)',
type: "log",
titlefont: {
size: 14,
@ -5915,7 +5929,7 @@ function LineBar() {
pad: 4
},
xaxis: {range: [0, LimitXaxis],
title: 'Number of neighbors',
title: 'Num. of neighbors',
titlefont: {
size: 12,
color: 'black'
@ -5972,7 +5986,7 @@ function LineBar() {
pad: 4
},
xaxis: {range: [0, LimitXaxis],
title: 'Number of neighbors',
title: 'Num. of neighbors',
titlefont: {
size: 12,
color: 'black'
@ -6020,7 +6034,7 @@ function LineBar() {
pad: 4
},
xaxis: {range: [0, LimitXaxis],
title: 'Number of neighbors',
title: 'Num. of neighbors',
titlefont: {
size: 12,
color: 'black'
@ -6034,7 +6048,7 @@ function LineBar() {
Plotly.newPlot('knnBarChart', data, layout, {displayModeBar:false}, {staticPlot: true});
}
$("#knnBarChartDetails").html("(Number of Selected Points: "+howManyPoints+"/"+dataFeatures.length+")");
$("#knnBarChartDetails").html("(Num. of Selected Points: "+howManyPoints+"/"+dataFeatures.length+")");
// If the checkbox is checked, display the output text
}

Binary file not shown.
Loading…
Cancel
Save