improved visualization

index.html

@@ -32,15 +32,16 @@
           <h1>AI Media Technology Landscape <span class="counter-text">(<span id="count-total">0</span> Produkte)</span></h1>
         </div>
       </div>
+      <div class="row" id="row-products"></div>
       <div class="row-legend">
         <h2>Legende</h2>
+        <div>Was ist der Output des Produktes?</div>
         <div class="legend-item"><div class="mediatype-video">Video</div> </div>
         <div class="legend-item"><div class="mediatype-audio">Audio</div> </div>
         <div class="legend-item"><div class="mediatype-text">Text</div> </div>
         <div class="legend-item"><div class="mediatype-mixed">Gemischt</div> </div>
         <div class="legend-item"><div class="mediatype-other">Sonstiges</div> </div>
       </div>
-      <div class="row" id="row-products"></div>
   </div>
 
   <!-- Bootstrap core JavaScript -->

js/scripts.js

 $( document ).ready(function() {
+    // switches for displaying various information
+    var showProductCount = false;
+    var showLegend = true;
+    var showNavbar = false;
+    var showTitle = false;
+    // configuration files
     var requestCategories = $.getJSON( "json/categories.json" );
     var requestProducts = $.getJSON( "json/products.json" );
     
@@ -71,6 +77,28 @@ $( document ).ready(function() {
                 $("#" + currentCategory + " span.count-product").html(parseInt($("#" + currentCategory + " span.count-product").html(), 10)+1);
             });
         });
+
+        // show or hide various information
+        if (showProductCount){
+            $(".counter-text").show();
+        } else{
+            $(".counter-text").hide();
+        };
+        if(showLegend){
+            $(".row-legend").show();
+        } else{
+            $(".row-legend").hide();
+        };
+        if (showNavbar){
+            $("nav").show();
+        } else{
+            $("nav").hide();
+        }
+        if (showTitle){
+            $("h1").show();
+        } else{
+            $("h1").hide();
+        }
     })
     .fail(function() {
         // Executed if at least one request fails