added comments, fixed schema investigation

css/style.css

@@ -149,7 +149,7 @@ cursor: default;
 
 
 /* Legend of the Overview t-SNE canvas */
- div#legend3 {
+ div#legend2 {
    height: 11vw;
    width: 11vw;
    text-align: left;
@@ -182,7 +182,7 @@ text.label {
 }
 
 /* Styling of the ShepardHeatmap */
-svg#legend4 {
+svg#legend3 {
   height: 11vw;
   width: 11vw;
   text-align: left;
@@ -327,7 +327,7 @@ rect {
 /* Styling of the main SVG behind canvas */
 #SvgAnnotator {
   position: absolute; 
-  z-index: 3;
+  z-index: 1;
 }
 
 #toggleAnnotator {

index.html

@@ -53,7 +53,7 @@
                         <canvas id = "tSNEcanvas"></canvas>
                     </div>
                     <div class="col-md-2">
-                        <div class="legend" id = "legend3"></div>
+                        <div class="legend" id = "legend2"></div>
                     </div>
                 </div>
               </div>
@@ -109,7 +109,7 @@
                   <svg id="sheparheat"></svg>
                 </div>
                 <div class="col-md-2">
-                  <svg id="legend4"></svg>
+                  <svg id="legend3"></svg>
                 </div>
               </div>
             </div>
@@ -258,7 +258,7 @@
       $('#param-maxiter').bind('input', function () { $('#param-maxiter-value').text($('#param-maxiter').val()); });
 
       // Get the container element
-      var btnContainer = document.getElementById("commBtn");
+      var btnContainer = document.getElementById("commBtn"); //Add a new comment button
 
       // Get all buttons with class="btn" inside the container
       var btns = btnContainer.getElementsByClassName("btn");
@@ -271,7 +271,7 @@
       }
 
       // Get the container element
-      var btnContainer2 = document.getElementById("resetAllFilters");
+      var btnContainer2 = document.getElementById("resetAllFilters"); //resetAllFilters button
 
       // Get all buttons with class="btn" inside the container
       var btns2 = btnContainer2.getElementsByClassName("btn");
@@ -292,7 +292,7 @@
         if ( document.getElementById('cost').hasChildNodes() ) {
           
           // Clear legend for the shepardHeatmap
-          var svgLegend = d3.select("#legend4");
+          var svgLegend = d3.select("#legend3");
           svgLegend.selectAll("*").remove();
 
           // Clear the SheapHeardmap before refreshing

js/data_form_handler.js

@@ -3,7 +3,7 @@ function changeDataset(value) {
 
     var format = value.split("."); // Get the data set's format.
 
-    if (format[value.split(".").length-1] != "csv") { // This is for a new file.
+    if (format[value.split(".").length-1] != "csv") { // This is a function that handles a new file, which users can upload.
       d3.select("#data").select("input").remove();
       d3.select("#data")
         .append("input")