Fixed the kNN barchart

Former-commit-id: 21930948db

css/style.css

@@ -108,7 +108,17 @@ cursor: default;
 
 .right-side-star {
   margin-left:12px;
-  margin-top: -50px;
+  margin-top: -5px;
+}
+
+#left-side-param{
+  margin-top: -115px;
+}
+
+#left-side-visual{
+  margin-top: -160px;
+  margin-left: 15px;
+  margin-right: -5px;
 }
 
 /* Styling of the main canvas */
@@ -132,11 +142,10 @@ cursor: default;
 /* A little styling for knn's bar chart */
 #knnBarChart {
   width: 50vw !important;
-  height: 4.2vw !important;
+  height: 5.5vw !important;
-  margin-top: 7.2vw !important;
+  border: 1px solid black !important;
-  border: 1px solid black;
+  margin-top: 0.2vw;
-  position: absolute;
+  position: absolute !important;
-  display: block;
 }
 
 /* Styling of the main SVG behind canvas */
@@ -362,7 +371,7 @@ rect {
  }
 /* Margins for the extra-information panel and the kNNInfo */
 #extra-information {
-  margin-top: 32px;
+  margin-top: -5px;
   margin-left: 5px;
 }
 
@@ -396,3 +405,24 @@ rect {
   width: 100%;
   height: 90vh;
 }
+
+/* kNN barchart color box (legend)*/
+ul {
+  margin: 20px;
+}
+
+.input-color {
+  position: relative;
+}
+.input-color input {
+  padding-left: 20px;
+}
+.input-color .color-box {
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  background-color: #ccc;
+  position: absolute;
+  left: 5px;
+  top: 5px;
+}

data/bank-additional_s.csv

@@ -1,4 +1,4 @@
-age;job;marital;education;default;housing;loan;contact;month;day_of_week;duration;campaign;pdays;previous;poutcome;emp.var.rate;cons.price.idx;cons.conf.idx;euribor3m;nr.employed;y*
+age;job;marital;education;default;housing;loan;contact;month;day_of_week;duration;campaign;pdays;previous;poutcome;emp.var.rate;cons.price.idx;cons.conf.idx;euribor3m;nr.employed;Outcome*
 30;blue-collar;married;basic.9y;no;yes;no;cellular;may;fri;487;2;999;0;nonexistent;-1.8;92.893;-46.2;1.313;5099.1;no
 39;services;single;high.school;no;no;no;telephone;may;fri;346;4;999;0;nonexistent;1.1;93.994;-36.4;4.855;5191;no
 25;services;married;high.school;no;yes;no;telephone;jun;wed;227;1;999;0;nonexistent;1.4;94.465;-41.8;4.962;5228.1;no

index.html

@@ -18,6 +18,7 @@
     <script src="./modules/d3-tip/tip.js"></script>
     <script src="./modules/d3-legend/d3-legend.min.js"></script>
     <script src="./modules/d3-lasso/lasso.js"></script>
+    <script src="./modules/plotly/plotly_min.js"></script>
     
     <script src="./modules/papa/papaparse.min.js"></script>
     <script src="./modules/jquery/jquery.min.js"></script>
@@ -131,7 +132,7 @@
           </div>
         <div class="row">
           <div class="col-md-3">
-            <div class="panel panel-default">
+            <div class="panel panel-default" id="left-side-param">
                 <div class="panel-heading">
                   <h2 class="panel-title">t-SNE Parameters</h2>
                 </div>
@@ -140,8 +141,10 @@
                   <div class="param">
                       <label id="data" for="param-dataset">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="bank-additional_s.csv">Bank Marketing</option>
                         <option value="winequality-red.csv">Red Wine - Quality</option>
-                        <option value="iris.csv" selected>Iris</option>
+                        <option value="iris.csv">Iris</option>
                         <option value="mnist.csv" >Mnist</option>
                         <option value="Frogs_MFCCs_s.csv" >Frogs</option> 
                         <option value="empty">Upload New File</option>
@@ -199,7 +202,7 @@
       </div>
       <div class="row">
         <div class="col-md-3">
-            <div class="panel panel-default">
+            <div class="panel panel-default" id="left-side-visual">
                 <div class="panel-heading">
                     <h2 class="panel-title">Visual Mapping Parameters</h2>
                 </div>
@@ -238,7 +241,9 @@
               </div>
         </div>
         <div class = col-md-6>
-              <svg id="knnBarChart"></svg>
+              <div id="knnBarChart">
+                <div id="plotlyBarChart"></div>
+              </div>
         </div>
         <div class="col-md-3" id="extra-information" style="width: 24.6vw">
             <div class="panel panel-default">
@@ -253,20 +258,15 @@
                 <div id="CategoryName"></div>
               </div>
             </div>
-            <div class="panel panel-default" id="kNNInfo">
-                <div class="panel-heading">
-                    <h2 class="panel-title">k Nearest Neighborhood Cluster Purity Preservation</h2>
-                </div>
-                <div class="panel-body">
-                  <div id="kNNDetails"></div>
-                </div>
-              </div>
           </div>
       </div>
     </div>
 
     <script>
 
+      $("#cost").html('Uknown iteration and cost values.');
+      $("#datasetDetails").html('Uknown number of features and instances.');
+      $("#CategoryName").html('No specific classification.');
       /* 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()); });

js/tsne_vis.js

@@ -24,6 +24,9 @@ var Category; var ColorsCategorical;
 // This is for the removal of the distances cache. 
 var returnVal = false;
 
+// This variable is for the kNN Bar Chart in order to store the first execution.
+var inside = 0;
+
 // Schema Investigation 
 // svgClick = Click a left mouse click in order to add a point.
 // prevRightClick = When right click is pressed prevent any other action. Lock the current schema.
@@ -742,6 +745,7 @@ function computeDistances(data, distFunc, transFunc) {
 // Function that updates embedding
 function updateEmbedding(AnalysisResults) {
 
+  inside = 0;
   points = [];
   points2d = [];
   if (AnalysisResults == ""){ // Check if the embedding does not need to load because we had a previous analysis uploaded.
@@ -1305,10 +1309,10 @@ var zoomer = d3v3.behavior.zoom()
 // 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 = 320 - main_margin.top - main_margin.bottom;
+  main_height = 475 - main_margin.top - main_margin.bottom;
 // Margin of the mini barchart
 var mini_margin = {top: 8, right: 10, bottom: 30, left: 10},
-  mini_height = 320 - mini_margin.top - mini_margin.bottom;
+  mini_height = 475 - mini_margin.top - mini_margin.bottom;
   mini_width = 100 - mini_margin.left - mini_margin.right;
 
 // Create the svg correlation component
@@ -1583,11 +1587,11 @@ function CalculateCorrel(){ // Calculate the correlation is a function which has
       for (var j = 0; j < correlationResults.length; j++) {
         for (var i = 0; i < SignStore.length; i++) {
           if (SignStore[i][1]*(-1) == correlationResults[j][1]) {
-            correlationResults[j][1] = parseInt(correlationResults[j][1] * 100) * (-1); // Give the negative sign if needed and multiply by 100
+            correlationResults[j][1] = (correlationResults[j][1]).toFixed(2) * (-1); // Give the negative sign if needed and multiply by 100
             correlationResults[j].push(j);
           }
           if (SignStore[i][1] == correlationResults[j][1]) {
-            correlationResults[j][1] = parseInt(correlationResults[j][1] * 100); // Give a positive sign and multiply by 100
+            correlationResults[j][1] = (correlationResults[j][1]).toFixed(2); // Give a positive sign and multiply by 100
             correlationResults[j].push(j);
           }
         }
@@ -1692,8 +1696,8 @@ function drawBarChart(){ // Draw the horizontal barchart with the correlations.
   /////////////////////// Update scales ///////////////////////
   /////////////////////////////////////////////////////////////
   //Update the scales
-  main_xScale.domain([-100, 100]);
+  main_xScale.domain([-1, 1]);
-  mini_xScale.domain([-100, 100]);     
+  mini_xScale.domain([-1, 1]);     
   main_yScale.domain(correlationResultsFinal.map(function(d) { return d[0]; }));
   mini_yScale.domain(correlationResultsFinal.map(function(d) { return d[0]; }));
 
@@ -2117,11 +2121,12 @@ var IDS = [];
 RadarChart("#starPlot", wrapData, colors, IDS, radarChartOptions);
 
 function BetatSNE(points){ // Run the main visualization
-
+inside = inside + 1;
 if (points.length) { // If points exist (at least 1 point)
 
     selectedPoints = [];
     var findNearestTable = [];
+    var findNearestTableCombination = [];
     for (let m=0; m<points.length; m++){
       if (points[m].selected == true){
           selectedPoints.push(points[m]); // Add the selected points in to a new variable
@@ -2140,12 +2145,10 @@ if (points.length) { // If points exist (at least 1 point)
       var vh = viewport[1] * 0.042;
 
       var maxKNN = document.getElementById("param-perplexity-value").value; // Specify the amount of k neighborhoods that we are going to calculate. According to "perplexity."
-
       selectedPoints.sort(function(a, b) { // Sort the points according to ID.
         return parseFloat(a.id) - parseFloat(b.id);
       });
     
-      $("#kNNDetails").html("Purity of the cluster was checked for k values starting from " + (1) + " to " + maxKNN + "."); // Print on the screen the number of k values of kNN which we present!
       for (k=maxKNN; k>0; k--){ // Start from the maximum k value and go to the minimum (k=2).
 
         findNearest = 0;
@@ -2223,46 +2226,64 @@ if (points.length) { // If points exist (at least 1 point)
             if (isNaN(findNearest)){
               findNearest = 0; // If kNN is fully uncorrelated then we say that the value is 0.
             }
-            findNearestTable.push(findNearest * vh * 2); // These values are multiplied by the height of the viewport because we need to draw the bins of the barchart representation
+            findNearestTable.push(findNearest.toFixed(2)); // These values are multiplied by the height of the viewport because we need to draw the bins of the barchart representation
       }
          
       findNearestTable.reverse();
 
-      var barPadding = 5; // Leave some space between the bars
+      var kValuesLegend = [];
-          d3v3.select("#knnBarChart").selectAll("rect").remove();
+      for (var i=1; i<=maxKNN; i++){
-
+        kValuesLegend.push(i);
-      var svg2 = d3v3.select('#knnBarChart') // Create the barchart for the kNN
-        .attr("class", "bar-chart");
-
-      vw = dimensions;
-      var barWidth = (vw / findNearestTable.length); // Bar width.
-
-      var knnBarChartSVG = svg2.selectAll("rect") // Draw the barchart!
-        .data(findNearestTable)
-        .enter()
-        .append("rect")
-        .attr("y", function(d) {
-            return Math.round(vh*2 - d)
-        })
-        .attr("height", function(d) {
-          return d;
-        })
-        .attr("width", barWidth - barPadding)
-        .attr("transform", function (d, i) {
-            var translate = [barWidth * i, 0];
-            return "translate("+ translate +")";
-        });
-      // Here we have the code for the starplot
-      d3.select("#starPlot").selectAll('g').remove(); // Remove the starplot if there was one before
-
-      var coun = 0;
-      for (var i=0; i < selectedPoints.length; i++){
-        if (selectedPoints[i].starplot == true){ // Count the selected points
-          coun = coun + 1;
-        } 
       }
-
+      if (inside == 1){
-      
+        StoreInitialFindNearestTable = findNearestTable;
+      }
+        var trace1 = {
+          x: kValuesLegend, 
+          y: StoreInitialFindNearestTable, 
+          name: 'Entire Projection', 
+          type: 'bar',
+          marker: {
+            color: 'rgb(0,0,0)'
+          }
+        };
+        var trace2 = {
+          x: kValuesLegend, 
+          y: findNearestTable, 
+          name: 'Lasso Selected Cluster', 
+          type: 'bar',
+          marker: {
+            color: 'rgb(0, 187, 187)'
+          }
+        };
+        var LimitXaxis = Number(maxKNN) + 1;
+        var data = [trace1, trace2];
+        var layout = {
+          barmode: 'group',autosize: false,
+          width: dimensions*0.99,
+          height: vh*2.1,
+          margin: {
+            l: 30,
+            r: 30,
+            b: 20,
+            t: 20,
+            pad: 4
+          },
+          xaxis: {range: [0, LimitXaxis]},
+          yaxis: {range: [0, 1]}};
+        
+        Plotly.newPlot('knnBarChart', data, layout, {displayModeBar:false},{staticPlot: true});
+
+              
+        // Here we have the code for the starplot
+        d3.select("#starPlot").selectAll('g').remove(); // Remove the starplot if there was one before
+
+        var coun = 0;
+        for (var i=0; i < selectedPoints.length; i++){
+          if (selectedPoints[i].starplot == true){ // Count the selected points
+            coun = coun + 1;
+          } 
+        }
 
       if(selectedPoints.length <= 10 && coun > 0){ // If points > 10 then do not draw! If points = 0 then do not draw!