Latest updates

drawtriangle.js

@@ -32,6 +32,8 @@ axes.forEach(d => d.angle = (d.angle - 90) * Math.PI / 180);
 // Sample data: [0-1] scale
 // const values = [0.8, 0.1, 0.76]; Now passed in function args
 
+// Don't draw if class "no-axis"
+if (!svg.classed("no-axis")) {
 // Draw axis lines
 svg.append("g")
   .attr("class", "axis")
@@ -43,6 +45,9 @@ svg.append("g")
   .attr("x2", d => center.x + radius * Math.cos(d.angle))
   .attr("y2", d => center.y + radius * Math.sin(d.angle));
 
+}
+
+
 // Draw grid rings (polygons)
 const levels = 7;
 for (let i = 1; i <= levels; i++) {
@@ -60,9 +65,12 @@ for (let i = 1; i <= levels; i++) {
 
 
 // Draw axis ticks
-const tickLength = 5;
+let tickLength = 5;
+if (svg.classed("no-axis")) {
+    tickLength = 0;
+}
 axes.forEach(axis => {
-  for (let i = 1; i <= levels; i++) {
+  for (let i = 1; i <= levels -1 ; i++) {    // -1 to remove tick outside outline
     const r = (radius / levels) * i;
     const angle = axis.angle;
 
@@ -112,7 +120,7 @@ svg.append("polygon")
   .attr("points", outerPoints.map(p => p.join(",")).join(" "))
   .attr("fill","none")
   .attr("stroke", colour)               // Outer line color
-  .attr("stroke-width", 9);                // Thicker outer line
+  .attr("stroke-width", 5);                // Thicker outer line
 
 // Put label in bottom centre of triangle
 const bottomLeft = outerPoints[1];
@@ -121,33 +129,35 @@ const bottomRight = outerPoints[2];
 const midX = (bottomLeft[0] + bottomRight[0]) / 2;
 const midY = (bottomLeft[1] + bottomRight[1]) / 2;
 
+//Don't draw the label for 'no-text' class
+if (!svg.classed("no-text")){
 svg.append("text")
   .attr("x", midX)
-  .attr("y", midY - 15)   // Alter for correct height
+  .attr("y", midY - 10)   // Alter for correct height
   .attr("text-anchor", "middle")
   .attr("fill", textcolour)    /// My Colour
   .attr("font-size", "22px")
   .attr("font-weight", "bold")
   .text(`${text}`);
+}
 
 // And now a central number
+let bigy = midY-45;
+let bigfont = "36px";
+if (svg.classed("big-number")){
+    bigy = midY-85;
+    bigfont = "70px";
+}
 svg.append("text")
   .attr("x", midX)
-  .attr("y", midY -60)
+  .attr("y", bigy)
   .attr("text-anchor", "middle")
   .attr("fill", "black") // 🎨 customize color
-  .attr("font-size", "24px")
+  .attr("font-size", bigfont)
   .attr("font-weight", "bold")
   .attr("font-family", "Courier New, monospace")
   .text(`${mean}`);
 
-
-
-
-
-
-
-
 // Add axis labels
 /*
   svg.selectAll(".label")