Finished creating generic triangle and inverted triangle WITH offset to enable creation of 4 triangle graphics as specified

2025-05-13 22:59:56 +01:00
parent c11b0cee20
commit 6e64bd6f6e
3 changed files with 379 additions and 0 deletions
--- a/IndexUsingJS.html
+++ b/IndexUsingJS.html
@@ -0,0 +1,65 @@
+<!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="./drawtriangle.js"></script>
+  <script src="./drawtriangleinverted.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(215, 96, 35, 0.1); /* steelblue with transparency */
+    //  stroke: rgba(215, 96, 35, 0.6);
+    //  stroke-width: 2;
+    //}
+
+    .label {
+      font-size: 12px;
+      font-weight: bold;
+      text-anchor: middle;
+    }
+  </style>
+</head>
+<body onload="drawtriangle('#svg1','Roles','#316443',[0.5,0.6,0.5],'red', { x: 0, y: 350 },-0.7);
+    drawtriangle('#svg1','Actions','#6e6e6e',[0.1,0.6,0.5],'green',{ x: 370, y: 350 },2.3);
+    drawtriangle('#svg1','Approach','#d76a23',[0.3,0.6,0.5],'#ffbf00',{ x: 185, y: 30 },1.4);
+    drawtriangleinverted('#svg1','Impact','#9f84b8',[0.7,0.6,0.8],'green',{ x: 185, y: 244},2.4);
+    ">
+<svg id="svg1" width="1000" height="1000"></svg>
+
+<svg id="svg2" width="500" height="500"></svg>
+
+</body>
+</html>
+
+