Changed layout / design to w3.css

Added data model
2023-02-02 07:10:28 +01:00
parent db0fb72947
commit 2da901832f
4 changed files with 361 additions and 15 deletions
--- a/main.html
+++ b/main.html
@@ -3,27 +3,37 @@
 <html>
 <head>
   <meta charset- "UTF-8" />
-   <meta name="viewport" content="width=device-width, initial-scale=1" />
+   <meta name="description" content="Visualization of video lecture taxonomy">
+   <meta name="keywords" content="video, taxonomy, quality, properties, instruction, visualization">
+   <meta name="author" content="Martin Putzlocher">
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' href='./css/w3.css'>
+    <link rel='stylesheet' href='./css/w3-colors-signal.css'>
+
   <title>Video Taxonomy Visualization</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>

   <script>
-   let data = [
-   {
-      ins: 0, // instructional principle
-      vis: 0, // visibility / audio
-      seg: 0, // segmentation
-      act: 0, // activity
-      int: 0, // interactivity
-      dyn: 0, // dynamic drawing
-      tra: 0  // translatability
-   }
-   ]
+   let data = new Map();
+   data.set("INS", 0); // instructional principle
+   data.set("VIS", 2); // visibility / audio
+   data.set("SEG", 3); // segmentation
+   data.set("ACT", 4); // activity
+   data.set("INT", 5); // interactivity
+   data.set("DYN", 1); // dynamic drawing
+   data.set("TRA", 2); // translatability

+   function loadNewRadarChar(chrtelement, data) {
+
+
+   }
   </script>
 </head>
 <body>
-   <h1>Video lectures taxonomy</h1>
+   <h1 class="w3-container w3-green">Video lectures taxonomy</h1>
+
+
+
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>

   <script>
@@ -31,10 +41,10 @@
      var chartId = new Chart(chrt, {
         type: 'radar',
         data: {
-            labels: ["INS", "VIS", "SEG", "ACT", "INT", "DYN", "TRA"],
+            labels: Array.from(data.keys()),
            datasets: [{
               label: "Title of video",
-               data: [1, 2, 3, 5, 4, 3, 4],
+               data: Array.from(data.values()),
               backgroundColor: "rgba(128,128,128,0.5)",
               pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold', 'maroon'],
               borderColor: ['black'],
@@ -51,6 +61,7 @@
            }
         },
      });
+
   </script>
 </body>
 </html>