From 314b1bd626565b3db29113d879917315b5c2ad2b Mon Sep 17 00:00:00 2001
From: Angelos Chatzimparmpas <angelos.chatzimparmpas@gmail.com>
Date: Fri, 15 Feb 2019 14:36:25 +0100
Subject: [PATCH] added save/load exec and factory reset buttons and
 functionalities

---
 css/style.css            |  18 +-
 data/winequality-red.csv |   2 +-
 index.html               |  34 ++--
 js/tsne_vis.js           | 355 +++++++++++++++++++++++++++++++--------
 4 files changed, 315 insertions(+), 94 deletions(-)

diff --git a/css/style.css b/css/style.css
index b40dad7..fec494b 100755
--- a/css/style.css
+++ b/css/style.css
@@ -3,7 +3,7 @@
 /* Main html/body configurations */
 html, body {
     max-width: 100%;
-    font: serif;
+    font-family: sans-serif !important;
 }
 
 .container-fluid {
@@ -197,7 +197,6 @@ rect {
 
 .axis text {
   font-size: 9pt;
-  font-family: Consolas, courier;
   fill: #000;
 }
 
@@ -209,7 +208,7 @@ rect {
 
 .d3-tip {
   line-height: 1;
-  font: 14px sans-serif;
+  font-size: 14px;
   padding: 12px;
   background: rgba(0, 0, 0, 0.8);
   color: rgb(185, 185, 185);
@@ -360,4 +359,17 @@ rect {
 
 #kNNInfo {
   margin-top: 35px;
+}
+
+/* Load and Save Analysis Buttons Styling */
+.button {
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 14px;
+  margin-left:10px;
+}
+
+#FactRes{
+  color: red;
 }
\ No newline at end of file
diff --git a/data/winequality-red.csv b/data/winequality-red.csv
index 629bfd2..955bff3 100644
--- a/data/winequality-red.csv
+++ b/data/winequality-red.csv
@@ -1,4 +1,4 @@
-"fixed acidity";"volatile acidity";"citric acid";"residual sugar";"chlorides";"free sulfur diox";"total sulfur diox";"density";"pH";"sulphates";"alcohol";"quality*"
+"fix ac";"vol ac";"cit ac";"res sugar";"chlor";"f sul diox";"t sul diox";"dens";"pH";"sulph";"alc";"quality*"
 7.4;0.7;0;1.9;0.076;11;34;0.9978;3.51;0.56;9.4;5
 7.8;0.88;0;2.6;0.098;25;67;0.9968;3.2;0.68;9.8;5
 7.8;0.76;0.04;2.3;0.092;15;54;0.997;3.26;0.65;9.8;5
diff --git a/index.html b/index.html
index 439d62d..29fd0c0 100755
--- a/index.html
+++ b/index.html
@@ -46,7 +46,7 @@
           <div class="col-md-3">
             <div class="panel panel-default">
               <div class="panel-heading">
-                  <h3 class="panel-title">t-SNE Overview</h3>
+                  <h2 class="panel-title">t-SNE Overview</h2>
               </div>
               <div class="row">
                 <div class="panel-body">
@@ -81,13 +81,13 @@
           <div class="col-md-2" style="width: 21.499999995%">
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <h3 class="panel-title">Select Different Modes</h3>
+                    <h2 class="panel-title">Select Different Modes</h2>
                 </div>
                 <div class="panel-body">
                   <div id="resetAllFilters" style="margin-bottom: 40px">
-                      <button class="btn btn-info btn-block active" onclick="setLayerProj();">Layer: t-SNE projection</button>
-                      <button class="btn btn-info btn-block" onclick="setLayerComp();">Layer: kNN limiter and data features comparison</button>
-                      <button class="btn btn-info btn-block" onclick="setLayerSche();">Layer: Schema investigation</button>
+                      <button class="btn btn-info btn-block active" onclick="setLayerProj();">t-SNE points exploration</button>
+                      <button class="btn btn-info btn-block" onclick="setLayerComp();">Points selection and data features comparison</button>
+                      <button class="btn btn-info btn-block" onclick="setLayerSche();">Schema investigation</button>
                   </div>
                       <button class="btn btn-info btn-block" onclick="setReset();">Reset all filters</button>
                   <label style="margin-top: 15px">
@@ -102,7 +102,7 @@
           <div class="col-md-3">
             <div class="panel panel-default">
               <div class="panel-heading">
-                <h3 class="panel-title">Shepard Heatmap</h3>
+                <h2 class="panel-title">Shepard Heatmap</h2>
               </div>
             <div class="panel-body">
               <div class="row">
@@ -124,7 +124,7 @@
           <div class="col-md-3">
             <div class="panel panel-default">
                 <div class="panel-heading">
-                  <h3 class="panel-title">t-SNE Parameters</h3>
+                  <h2 class="panel-title">t-SNE Parameters</h2>
                 </div>
               <div class="panel-body">
                 <div id="control-panel" data-sr="enter left over 8s">
@@ -137,6 +137,7 @@
                     <option value="Frogs_MFCCs_s.csv" >Frogs</option> 
                     <option value="empty">Add New File</option>
                   </select>
+                  <button type="button" class="button" id="FactRes" onclick="FactoryReset()">Factory reset</button>
                     </div>
                     <div class="param">
                   <label for="param-perplexity">Perplexity</label>
@@ -159,19 +160,20 @@
                       <option value="euclideanDist" selected>Euclidean distance</option>
                       <option value="jaccardDist">Jaccard dissimilarity</option>
                   </select>
-                  <output for="param-distance" id="param-distance-value"></output>
+                  <input id="file-input" type="file" name="name" style="display: none;" />
+                  <button type="button" class="button" onclick='loadAnalysis();'>Load Execut.</button>
                     </div>
                     <div class="param">
                   <label for="param-transform">Data transform</label>
                   <select id="param-transform" name="param-transform">
                       <option value="noTrans" selected>No transform</option>
                       <option value="logTrans">Log10</option>
-                      <option value="asinhTrans">asinh</option>
+                      <option value="asinhTrans">Asinh</option>
                       <option value="binTrans">Binarize</option>
                   </select>
-                  <output for="param-transform" id="param-transform-value"></output>
+                  <button type="button" class="button" onclick="SaveAnalysis()">Save Execut.</button>
                     </div>
-                    <p><div id="run-button"><button class="btn btn-primary btn-block" onclick="getData();">Run New t-SNE</button></div></p>
+                    <p><div id="run-button"><button id="ExecuteBut" class="btn btn-primary btn-block" onclick="getData();" value="Execute new t-SNE analysis">Execute new t-SNE analysis</button></div></p>
                 </div>
               </div>
             </div>
@@ -184,7 +186,7 @@
         <div class="col-md-3">
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <h3 class="panel-title">Visual Mapping Parameters</h3>
+                    <h2 class="panel-title">Visual Mapping Parameters</h2>
                 </div>
                 <div class="row">
                   <div class="panel-body">
@@ -197,14 +199,14 @@
                         </select>
                         <output for="param-neighborHood" id="param-neighborHood-value"></output>
                         <label for="male">Final Cost (Kullback-Leibler)</label>
-                        <label id="selectionLabel" style="margin-top:4px">Vice versa</label>
+                        <label id="selectionLabel" style="margin-top:4px">Size</label>
                         <div id="param-correlation">
                           <div class="param">
                             <label for="param-corr">Correlation threshold</label>
                             <input id="param-corr" type="range" min="0" max="750" value="150", step="25" onchange="CalculateCorrel();">
                             <output for="param-corr" id="param-corr-value">150</output>
                           </div>
-                          Visualization annotating form: <textarea type="text" id="comment" name="textforAnnotator" style="margin-top:4px" placeholder="Please, provide your comment."></textarea>
+                          Annotation: <textarea type="text" id="comment" name="textforAnnotator" style="margin-top:4px" placeholder="Please, provide your comment."></textarea>
                         </div>
                         <div id="commBtn">
                           <div class="param" style="margin-top:4px">
@@ -226,7 +228,7 @@
         <div class="col-md-3" id="extra-information" style="width: 24.5999995%">
             <div class="panel panel-default">
               <div class="panel-heading">
-                  <h3 class="panel-title">t-SNE and Data Set's Extra Information</h3>
+                  <h2 class="panel-title">t-SNE and Data Set's Additional Information</h2>
               </div>
               <div class="panel-body">
                 <div id="cost"></div>
@@ -236,7 +238,7 @@
             </div>
             <div class="panel panel-default" id="kNNInfo">
                 <div class="panel-heading">
-                    <h3 class="panel-title">kNN Barchart Information</h3>
+                    <h2 class="panel-title">k Nearest Neighborhood Cluster Purity Preservation</h2>
                 </div>
                 <div class="panel-body">
                   <div id="kNNDetails"></div>
diff --git a/js/tsne_vis.js b/js/tsne_vis.js
index 0c29925..0c8c615 100755
--- a/js/tsne_vis.js
+++ b/js/tsne_vis.js
@@ -1,6 +1,8 @@
 // t-SNE.js object and other global variables
 
-var k; var points = []; var all_fields; var pointsbeta = []; var KNNEnabled = true; 
+var k; var points = []; var all_fields; var pointsbeta = []; var KNNEnabled = true; var cost = []; var ParametersSet = []; var overallCost;
+// form controls
+var input;
 // These are the dimensions for the square shape of the main panel\
 var dimensions = document.getElementById('modtSNEcanvas').offsetWidth;
 var prevRightClick; var ColorsCategorical; var Category;
@@ -12,21 +14,148 @@ var format; var new_file; var opt; var step_counter; var final_dataset; var max_
 var points2d = []; var ArrayContainsDataFeatures = []; var ArrayContainsDataFeaturesCleared = [];
 var InitialStatePoints = [];
 
+function FactoryReset(){
+  lassoEnable();
+  flag = false;
+  d3.selectAll("#modtSNEcanvas_svg_Schema > *").remove(); 
+  d3.selectAll("#SvgAnnotator > *").remove(); 
+  Arrayx = [];
+  Arrayy = [];
+  XYDistId = [];
+  Arrayxy = [];
+  DistanceDrawing1D = [];
+  allTransformPoints = [];
+  p;
+  pFinal = [];
+  paths;
+  path;
+  ArrayLimit = [];
+  minimum;
+  correlationResults = [];
+  ArrayContainsDataFeaturesLimit = [];
+  prevRightClick = false;
+  for (var i=0; i < InitialStatePoints.length; i++){
+    InitialStatePoints[i].selected = true;
+    InitialStatePoints[i].starplot = false;
+  }
+  redraw(InitialStatePoints);
+
+  d3.selectAll("#correlation > *").remove(); 
+  d3.selectAll("#modtSNEcanvas_svg > *").remove();
+  d3.selectAll("#modtSNEcanvas_svg_Schema > *").remove(); 
+  d3.selectAll("#SvgAnnotator > *").remove(); 
+  d3.selectAll("#sheparheat > *").remove(); 
+  d3.selectAll("#knnBarChart > *").remove(); 
+
+  var oldcanvOver = document.getElementById('tSNEcanvas');
+  var contxOver = oldcanvOver.getContext('experimental-webgl');
+  contxOver.clear(contxOver.COLOR_BUFFER_BIT);
+
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color(0xffffff);
+
+  d3.selectAll("#legend1 > *").remove();
+  d3.selectAll("#legend3 > *").remove();
+  d3.selectAll("#legend4 > *").remove();
+
+  lassoEnable();
+
+  Arrayx = [];
+  Arrayy = [];
+  XYDistId = [];
+  Arrayxy = [];
+  DistanceDrawing1D = [];
+  allTransformPoints = [];
+  p;
+  pFinal = [];
+  paths;
+  path;
+  ArrayLimit = [];
+  minimum;
+  correlationResults = [];
+  ArrayContainsDataFeaturesLimit = [];
+
+  document.getElementById("param-dataset").value = "iris.csv";
+  document.getElementById('file-input').value = "";
+  document.getElementById("ExecuteBut").innerHTML = "Execute new t-SNE analysis";
+  
+  $("#cost").html("");
+  $("#datasetDetails").html("");
+  $("#kNNDetails").html("");
+
+  document.getElementById("param-perplexity-value").value = 30;
+  document.getElementById("param-learningrate-value").value = 10;
+  document.getElementById("param-maxiter-value").value = 500;
+  document.getElementById("param-lim-value").value = 2;
+  document.getElementById("param-corr-value").value = 150;
+  document.getElementById("param-neighborHood").value = "color";
+  document.getElementById('selectionLabel').innerHTML = 'Size';
+  document.getElementById("param-distance").value = "euclideanDist";
+  document.getElementById("param-transform").value = "noTrans";
+  
+  
+
+}
+
+function loadAnalysis(){
+  document.getElementById('file-input').click();
+  document.getElementById("ExecuteBut").innerHTML = "Execute previous t-SNE analysis";
+}
+
 function getfile(file){
   new_file = file;   //uploaded file data
 }
 
+function fetchVal(callback) {
+  var file, fr;
+  file = input.files[0];
+  fr = new FileReader();
+  fr.onload = function (e) {
+    lines = e.target.result;
+    callback(lines);
+};  
+  fr.readAsText(file);
+}
+
 // Parse data
 var getData = function() {
-  // form controls
-    var value = document.getElementById("param-dataset").value;
-
-    format = document.getElementById("param-dataset").value.split("."); //get the actual format
-    if (format[value.split(".").length-1] == "csv") {
-      parseData("./data/"+value);
-    }else{
-      parseData(new_file, init);
-    }
+  
+        if (typeof window.FileReader !== 'function') {
+          alert("The file API isn't supported on this browser yet.");
+        }
+        
+        var value;
+        input = document.getElementById("file-input");
+        if (!input) {
+          alert("Um, couldn't find the fileinput element.");
+        }
+        else if (!input.files) {
+          alert("This browser doesn't seem to support the `files` property of file inputs.");
+        }
+        else if (!input.files[0]) {
+          value = document.getElementById("param-dataset").value;
+          format = document.getElementById("param-dataset").value.split("."); //get the actual format
+          if (format[value.split(".").length-1] == "csv") {
+            parseData("./data/"+value);
+          }else{
+            parseData(new_file, init);
+          }
+        }
+        else {
+        fetchVal(function(lines){
+          AnalaysisResults = JSON.parse(lines); 
+          length = (AnalaysisResults.length - 7) / 2;
+          ParametersSet = AnalaysisResults.slice(length*2+1, length*2+7);
+          value = document.getElementById("param-dataset").value = ParametersSet[0];
+          format = document.getElementById("param-dataset").value.split("."); //get the actual format
+          if (format[value.split(".").length-1] == "csv") {
+            parseData("./data/"+value);
+          }else{
+            parseData(new_file, init);
+          }
+         
+      });
+      }
 };
 
 function parseData(url) {
@@ -65,7 +194,7 @@ function parseData(url) {
             }
           });
           function doStuff(results_all){
-          init(results.data, results_all, results.meta.fields);
+            init(results.data, results_all, results.meta.fields);
           }
         }
     });
@@ -110,6 +239,12 @@ function setReset(){
 }
 
 function setReInitialize(){
+  if (document.getElementById('selectionLabel').innerHTML == 'Size'){
+    document.getElementById('selectionLabel').innerHTML = 'Color';
+  } else{
+    document.getElementById('selectionLabel').innerHTML = 'Size';
+  }
+
   for (var i=0; i < InitialStatePoints.length; i++){
     InitialStatePoints[i].selected = true;
   }
@@ -277,6 +412,9 @@ function setAnnotator(){
     var correlationResults = [];
     var ArrayContainsDataFeaturesLimit = [];
 
+
+
+
 // function that executes after data is successfully loaded
 function init(data, results_all, fields) {
 
@@ -285,6 +423,7 @@ function init(data, results_all, fields) {
     d3.selectAll("#modtSNEcanvas_svg_Schema > *").remove(); 
     d3.selectAll("#SvgAnnotator > *").remove(); 
     d3.selectAll("#sheparheat > *").remove(); 
+    d3.selectAll("#knnBarChart > *").remove(); 
 
     var oldcanvOver = document.getElementById('tSNEcanvas');
     var contxOver = oldcanvOver.getContext('experimental-webgl');
@@ -328,16 +467,6 @@ function init(data, results_all, fields) {
     final_dataset = data;
     dataFeatures = results_all;
     var object;
-    for (let k = 0; k < dataFeatures.length; k++){
-      ArrayContainsDataFeatures.push(Object.values(dataFeatures[k]).concat(k));
-      object = [];
-      Object.values(dataFeatures[k]).forEach(function(dataFeature){
-        if(typeof(dataFeature) == "number"){
-          object.push(dataFeature);
-        }
-      });
-      ArrayContainsDataFeaturesCleared.push(object);
-    }
 
     all_labels = [];
     dataFeatures.filter(function(obj) { 
@@ -352,6 +481,18 @@ function init(data, results_all, fields) {
       }
 
     });
+
+    for (let k = 0; k < dataFeatures.length; k++){
+      ArrayContainsDataFeatures.push(Object.values(dataFeatures[k]).concat(k));
+      object = [];
+      Object.values(dataFeatures[k]).forEach(function(dataFeature){
+          if(typeof(dataFeature) == "number"){
+            object.push(dataFeature);
+          }
+      });
+      ArrayContainsDataFeaturesCleared.push(object);
+    }
+
     
     var valCategExists = 0;
     for (var i=0; i<Object.keys(dataFeatures[0]).length; i++){
@@ -373,7 +514,28 @@ function init(data, results_all, fields) {
       }
     }
     for(var i = 0; i < final_dataset.length; i++) {final_dataset[i].beta = tsne.beta[i]; beta_all[i] = tsne.beta[i];}
-    runner = setInterval(step, 0);
+
+    if (typeof window.FileReader !== 'function') {
+      alert("The file API isn't supported on this browser yet.");
+    }
+    
+    input = document.getElementById("file-input");
+    if (!input) {
+      alert("Um, couldn't find the fileinput element.");
+    }
+    else if (!input.files) {
+      alert("This browser doesn't seem to support the `files` property of file inputs.");
+    }
+    else if (!input.files[0]) {
+      AnalaysisResults = [];
+      runner = setInterval(step, 0);
+    }
+    else {
+      fetchVal(function(lines){
+        AnalaysisResults = JSON.parse(lines); 
+        updateEmbedding(AnalaysisResults);
+    });
+    }
 }
 
 // initialize distance matrix
@@ -493,7 +655,8 @@ function computeDistances(data, distFunc, transFunc) {
 }
 
 // function that updates embedding
-function updateEmbedding() {
+function updateEmbedding(AnalaysisResults) {
+  if (AnalaysisResults == ""){
     var Y = tsne.getSolution(); // here we get the solution from the actual t-sne 
     var xExt = d3.extent(Y, d => d[0]);
     var yExt = d3.extent(Y, d => d[1]);
@@ -506,16 +669,27 @@ function updateEmbedding() {
     var y = d3.scaleLinear()
             .domain(maxExt)
             .range([10, +dimensions-10]);
-
-    for(var i = 0; i < final_dataset.length; i++) {
-
-      x_position[i] = x(Y[i][0]);
-      y_position[i] = y(Y[i][1]);
-          points[i] = {id: i, x: x_position[i], y: y_position[i], beta: final_dataset[i].beta, cost: final_dataset[i].cost, selected: true, DimON: null, starplot: false};
-          points2d[i] = {id: i, x: x_position[i], y: y_position[i], selected: true};
-          points[i] = extend(points[i], ArrayContainsDataFeaturesCleared[i]);
-          points[i] = extend(points[i], dataFeatures[i]);
-      }
+      for(var i = 0; i < final_dataset.length; i++) {
+
+        x_position[i] = x(Y[i][0]);
+        y_position[i] = y(Y[i][1]);
+            points[i] = {id: i, x: x_position[i], y: y_position[i], beta: final_dataset[i].beta, cost: final_dataset[i].cost, selected: true, DimON: null, starplot: false};
+            points2d[i] = {id: i, x: x_position[i], y: y_position[i], selected: true};
+            points[i] = extend(points[i], ArrayContainsDataFeaturesCleared[i]);
+            points[i] = extend(points[i], dataFeatures[i]);
+        }
+    } else{
+      points = AnalaysisResults.slice(0,dataFeatures.length);
+      points2d = AnalaysisResults.slice(dataFeatures.length,2*dataFeatures.length);
+      overallCost = AnalaysisResults.slice(dataFeatures.length*2,dataFeatures.length*2+1);
+      ParametersSet = AnalaysisResults.slice(dataFeatures.length*2+1, dataFeatures.length*2+7);
+      $("#cost").html("Number of Iteration: " + ParametersSet[3] + ", Overall Cost: " + overallCost);
+      $('#param-perplexity-value').text(ParametersSet[1]);
+      $('#param-learningrate-value').text(ParametersSet[2]);
+      $('#param-maxiter-value').text(ParametersSet[3]);
+      document.getElementById("param-distance").value = ParametersSet[4];
+      document.getElementById("param-transform").value = ParametersSet[5];
+    }
     InitialStatePoints = points;
     function extend(obj, src) {
     for (var key in src) {
@@ -523,11 +697,9 @@ function updateEmbedding() {
     }
       return obj;
     }
-      if (step_counter == max_counter){
         ShepardHeatMap();
         OverviewtSNE(points);
         BetatSNE(points);
-      }
 }
 
 function ShepardHeatMap () {
@@ -694,7 +866,7 @@ d3.tsv("./modules/heat.tsv").then(function(data) {
 
   heatleg.append("g")
     .attr("class", "legendLinear")
-    .attr("transform", "translate(0,10)");
+    .attr("transform", "translate(0,14)");
 
   var legend = d3.legendColor()
     .labelFormat(d3.format(",.0f"))
@@ -709,19 +881,19 @@ d3.tsv("./modules/heat.tsv").then(function(data) {
 
 // perform single t-SNE iteration
 function step() {
-    step_counter++;
-    if(step_counter <= max_counter) {
-  var cost = tsne.step();
-  cost_each = cost[1];
-  for(var i = 0; i < final_dataset.length; i++) final_dataset[i].cost = cost_each[i];
-  $("#cost").html("Number of Iteration: " + tsne.iter + ", Overall Cost: " + cost[0].toFixed(3));
-    }
-    else {
-        clearInterval(runner);
-    }
-    if (step_counter == max_counter){
-      updateEmbedding();
-    }
+      step_counter++;
+      if(step_counter <= max_counter) {
+          cost = tsne.step();
+          cost_each = cost[1];
+          for(var i = 0; i < final_dataset.length; i++) final_dataset[i].cost = cost_each[i];
+          $("#cost").html("Number of Iteration: " + tsne.iter + ", Overall Cost: " + cost[0].toFixed(3));
+        }
+        else {
+            clearInterval(runner);
+        }
+        if (step_counter == max_counter){
+          updateEmbedding(AnalaysisResults);
+        }
 }
 
 function resize(canvas) {
@@ -1092,7 +1264,7 @@ function CalculateCorrel(){
   if (flag == false){
     alert("Please, draw a schema first!");
   } else{
-    var correlLimit = document.getElementById("param-corr-value").value;
+  var correlLimit = document.getElementById("param-corr-value").value;
   correlLimit = parseInt(correlLimit);
 
     allTransformPoints = [];
@@ -1224,7 +1396,6 @@ function CalculateCorrel(){
 
     var SignStore = [];
     correlationResults = [];
-
     const arrayColumn = (arr, n) => arr.map(x => x[n]);
     for (var temp = 0; temp < ArrayContainsDataFeaturesLimit[0].length - 2; temp++) {
       var tempData = new Array(
@@ -1577,7 +1748,7 @@ function brushmove() {
 //Create a gradient 
 function createGradient(idName, endPerc) {
 
-  var colorsBarChart = ['#7f3b08','#b35806','#e08214','#fdb863','#fee0b6','#d8daeb','#b2abd2','#8073ac','#542788','#2d004b']
+  var colorsBarChart = ['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061'];
 
   colorsBarChart.reverse();
 
@@ -2059,8 +2230,8 @@ function BetatSNE(points){
  var ColSizeSelector = document.getElementById("param-neighborHood").value;
 
  if (ColSizeSelector == "color") {
-  var max = (d3.max(final_dataset,function(d){ return d.beta; }));
-  var min = (d3.min(final_dataset,function(d){ return d.beta; }));
+  var max = (d3.max(points,function(d){ return d.beta; }));
+  var min = (d3.min(points,function(d){ return d.beta; }));
   // colors
   var colorbrewer = ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"];
   var calcStep = (max-min)/7;
@@ -2068,11 +2239,11 @@ function BetatSNE(points){
     .domain(d3.range(0, max+calcStep, calcStep))
     .range(colorbrewer);
 
-  var maxSize1 = (d3.max(final_dataset,function(d){ return d.cost; }));
-  var minSize1 = (d3.min(final_dataset,function(d){ return d.cost; }));
+  var maxSize1 = (d3.max(points,function(d){ return d.cost; }));
+  var minSize1 = (d3.min(points,function(d){ return d.cost; }));
   var rscale1 = d3.scaleLinear()
     .domain([minSize1, maxSize1])
-    .range([3,10]);
+    .range([5,12]);
 
   var colorScale = d3.scaleLinear()
     .domain(d3.range(0, max+calcStep, calcStep))
@@ -2103,14 +2274,14 @@ function BetatSNE(points){
     svg.select(".legendLinear")
       .call(legend);
 } else {
-var max = (d3.max(final_dataset,function(d){ return d.cost; }));
-var min = (d3.min(final_dataset,function(d){ return d.cost; }));
+var max = (d3.max(points,function(d){ return d.cost; }));
+var min = (d3.min(points,function(d){ return d.cost; }));
 
-var maxSize2 = (d3.max(final_dataset,function(d){ return d.beta; }));
-var minSize2 = (d3.min(final_dataset,function(d){ return d.beta; }));
+var maxSize2 = (d3.max(points,function(d){ return d.beta; }));
+var minSize2 = (d3.min(points,function(d){ return d.beta; }));
 var rscale2 = d3.scaleLinear()
   .domain([minSize2, maxSize2])
-  .range([3,10]);
+  .range([5,12]);
 
 var colorbrewer = ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"];
 var calcStep = (max-min)/9;
@@ -2189,13 +2360,14 @@ clearThree(scene);
 var limitdist = document.getElementById("param-lim-value").value;
 limitdist = parseFloat(limitdist).toFixed(1);
 
-let pointsMaterial = [];
+let pointsMaterial;
 let factorPlusSize;
-let pointsGeometry = [];
+let geometry = new THREE.Geometry();
 for (var i=0; i<points.length; i++) {
-  pointsGeometry[i] = new THREE.Geometry();
+  let pointsGeometry = new THREE.Geometry();
   let vertex = new THREE.Vector3((((points[i].x/dimensions)*2) - 1)*dimensions, (((points[i].y/dimensions)*2) - 1)*dimensions*-1, 0);
-  pointsGeometry[i].vertices.push(vertex);
+  pointsGeometry.vertices.push(vertex);
+  geometry.vertices.push(vertex);
   if (points[i].selected == false){
     var color = new THREE.Color("rgb(211, 211, 211)");
   } else if (points[i].DimON != null) {
@@ -2223,8 +2395,8 @@ for (var i=0; i<points.length; i++) {
   if (ColSizeSelector == "color") {
     let sizePoint = rscale1(points[i].cost);
     factorPlusSize = limitdist * sizePoint;
-    pointsGeometry[i].colors.push(color);
-    pointsMaterial[i] = new THREE.PointsMaterial({
+    pointsGeometry.colors.push(color);
+    pointsMaterial = new THREE.PointsMaterial({
       sizeAttenuation: false,
       size: Number(factorPlusSize.toFixed(1)),
       vertexColors: THREE.VertexColors,
@@ -2234,8 +2406,8 @@ for (var i=0; i<points.length; i++) {
   } else{
     let sizePoint = rscale2(points[i].beta);
     factorPlusSize = limitdist * sizePoint;
-    pointsGeometry[i].colors.push(color);
-    pointsMaterial[i] = new THREE.PointsMaterial({
+    pointsGeometry.colors.push(color);
+    pointsMaterial = new THREE.PointsMaterial({
       sizeAttenuation: false,
       size: Number(factorPlusSize.toFixed(1)),
       vertexColors: THREE.VertexColors,
@@ -2243,8 +2415,8 @@ for (var i=0; i<points.length; i++) {
       transparent: true
     });
   }
-  console.log(Number(factorPlusSize.toFixed(1)));
-  var particles = new THREE.Points(pointsGeometry[i], pointsMaterial[i]);
+  var particlesDuplic = new THREE.Points(geometry, pointsMaterial);
+  var particles = new THREE.Points(pointsGeometry, pointsMaterial);
   scene.add(particles);
 }
 
@@ -2386,7 +2558,7 @@ function mouseToThree(mouseX, mouseY) {
 function checkIntersects(mouse_position) {
   let mouse_vector = mouseToThree(...mouse_position);
   raycaster.setFromCamera(mouse_vector, camera);
-  let intersects = raycaster.intersectObject(particles);
+  let intersects = raycaster.intersectObject(particlesDuplic);
   if (intersects[0]) {
     if (ColSizeSelector == "color"){
       points = points.sort(function(a, b) {
@@ -2556,4 +2728,39 @@ function hideTooltip() {
       viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
     }
     return [viewPortWidth, viewPortHeight];
- }
\ No newline at end of file
+ }
+
+ function download(contentP, Parameters, fileName, contentType) {
+  var a = document.createElement("a");
+  var file = new Blob([contentP], {type: contentType});
+  a.href = URL.createObjectURL(file);
+  a.download = fileName;
+  a.click();
+}
+
+var measureSaves = 0;
+
+function SaveAnalysis(){
+  measureSaves = measureSaves + 1;
+  let dataset = document.getElementById("param-dataset").value;
+  let perplexity = document.getElementById("param-perplexity-value").value;
+  let learningRate = document.getElementById("param-learningrate-value").value;
+  let IterValue = document.getElementById("param-maxiter-value").value;
+  let parDist = document.getElementById("param-distance").value;
+  let parTrans = document.getElementById("param-transform").value;
+  let Parameters = [];
+  Parameters.push(dataset);
+  Parameters.push(perplexity);
+  Parameters.push(learningRate);
+  Parameters.push(IterValue);
+  Parameters.push(parDist);
+  Parameters.push(parTrans);
+  AllData = [];
+  if (cost[0] != undefined){
+    AllData = points.concat(points2d).concat(cost[0].toFixed(3)).concat(Parameters);
+  } else{
+    AllData = points.concat(points2d).concat(overallCost).concat(Parameters);
+  }
+
+  download(JSON.stringify(AllData), JSON.stringify(Parameters),'Analysis'+measureSaves+'.txt', 'text/plain');
+}
\ No newline at end of file