From db0fb729474233ffac49e7b678c6e6496341a701 Mon Sep 17 00:00:00 2001
From: Martin Putzlocher <m.putzlocher@stiftland-gymnasium.de>
Date: Tue, 31 Jan 2023 12:31:50 +0100
Subject: [PATCH] added video tax categories, opacity, datamodel

---
 main.html | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)
diff --git a/main.html b/main.html
index ca62ff3..ee27a29 100644
--- a/main.html
+++ b/main.html
@@ -4,23 +4,39 @@
 <head>
    <meta charset- "UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-   <title>chart.js</title>
+   <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
+   }
+   ]
+
+   </script>
 </head>
 <body>
    <h1>Video lectures taxonomy</h1>
    <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
-   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
+
    <script>
       var chrt = document.getElementById("chartId").getContext("2d");
       var chartId = new Chart(chrt, {
          type: 'radar',
          data: {
-            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
+            labels: ["INS", "VIS", "SEG", "ACT", "INT", "DYN", "TRA"],
             datasets: [{
-               label: "online tutorial subjects",
-               data: [20, 40, 33, 35, 30, 38],
-               backgroundColor: ['lightgrey'],
-               pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
+               label: "Title of video",
+               data: [1, 2, 3, 5, 4, 3, 4],
+               backgroundColor: "rgba(128,128,128,0.5)",
+               pointBackgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold', 'maroon'],
                borderColor: ['black'],
                borderWidth: 1,
                pointRadius: 6,
