Separated out the graphing code into a separate js file.

2025-05-03 19:06:42 +01:00
parent 4ec9b62d2c
commit 95574d6fd3
8 changed files with 590 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>3-Axis Radar Chart with Ticks</title>
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <script src="./draw3axis.js"></script>
+  <style>
+    body {
+      font-family: sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: white;
+    }
+
+    svg {
+      background: white;
+      display: block;
+      margin: auto;
+    }
+
+    .axis line {
+      stroke: black;
+      stroke-width: 1.5px;
+    }
+
+    line.tick {
+      stroke: black;
+      stroke-width: 1;
+    }
+
+    polygon.grid {
+      fill: none;
+      stroke: rgba(200, 200, 200, 0.5); /* light grey with 50% opacity */
+      stroke-dasharray: 2,2;
+    }
+
+    .area {
+      fill: rgba(70, 130, 180, 0.3); /* steelblue with transparency */
+      stroke: rgba(70, 130, 180, 0.6);
+      stroke-width: 2;
+    }
+
+    .label {
+      font-size: 12px;
+      font-weight: bold;
+      text-anchor: middle;
+    }
+  </style>
+</head>
+<body onload="drawGraph()">
+<h1>Concepts</h1>
+<svg id="Q1" width="400" height="400"></svg>
+<h1>Features</h1>
+<svg id="Q2" width="400" height="400"></svg>
+
+
+
+</body>
+</html>
+
+