PeterEdmond/EoQ_Supporting_Files
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Made borders much thicker, and changed the grey colour to be lighter

Browse Source
This commit is contained in:
Peter Edmond 2025-05-14 22:47:40 +01:00
parent c37f9bc71b
commit 3831d04d2f
3 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
IndexUsingJS.html
View File

@ -51,9 +51,9 @@
} }
</style> </style>
</head> </head>
<body onload="drawtriangle('#svg1','Roles','#316443',[0.5,0.6,0.5],'red', { x: 0, y: 350 },-0.7); <body onload="let amber = '#ffbf00'; 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','Actions','#aeaeae',[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: 32 },1.4); drawtriangle('#svg1','Approach','#d76a23',[0.3,0.6,0.5],amber,{ x: 185, y: 31 },1.4);
drawtriangleinverted('#svg1','Impact','#9f84b8',[0.7,0.6,0.8],'green',{ x: 185, y: 244},2.4); drawtriangleinverted('#svg1','Impact','#9f84b8',[0.7,0.6,0.8],'green',{ x: 185, y: 244},2.4);
makeSvgRightClickable('svg1'); makeSvgRightClickable('svg1');
"> ">

6
drawtriangle.js
View File

@ -112,7 +112,7 @@ svg.append("polygon")
.attr("points", outerPoints.map(p => p.join(",")).join(" ")) .attr("points", outerPoints.map(p => p.join(",")).join(" "))
.attr("fill","none") .attr("fill","none")
.attr("stroke", colour) // Outer line color .attr("stroke", colour) // Outer line color
.attr("stroke-width", 3); // Thin outer line .attr("stroke-width", 9); // Thicker outer line
// Put label in bottom centre of triangle // Put label in bottom centre of triangle
const bottomLeft = outerPoints[1]; const bottomLeft = outerPoints[1];
@ -126,7 +126,7 @@ svg.append("text")
.attr("y", midY - 15) // Alter for correct height .attr("y", midY - 15) // Alter for correct height
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("fill", textcolour) /// My Colour .attr("fill", textcolour) /// My Colour
.attr("font-size", "24px") .attr("font-size", "22px")
.attr("font-weight", "bold") .attr("font-weight", "bold")
.text(`${text}`); .text(`${text}`);
@ -136,7 +136,7 @@ svg.append("text")
.attr("y", midY -60) .attr("y", midY -60)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("fill", "black") // 🎨 customize color .attr("fill", "black") // 🎨 customize color
.attr("font-size", "22px") .attr("font-size", "24px")
.attr("font-weight", "bold") .attr("font-weight", "bold")
.attr("font-family", "Courier New, monospace") .attr("font-family", "Courier New, monospace")
.text(`${mean}`); .text(`${mean}`);

6
drawtriangleinverted.js
View File

@ -114,7 +114,7 @@ svg.append("polygon")
.attr("points", outerPoints.map(p => p.join(",")).join(" ")) .attr("points", outerPoints.map(p => p.join(",")).join(" "))
.attr("fill","none") .attr("fill","none")
.attr("stroke", colour) // Outer line color .attr("stroke", colour) // Outer line color
.attr("stroke-width", 3); // Thin outer line .attr("stroke-width", 9); // Thicker outer line
// Put label in bottom centre of triangle (adjust for flat top) // Put label in bottom centre of triangle (adjust for flat top)
const bottomLeft = outerPoints[0]; const bottomLeft = outerPoints[0];
@ -128,7 +128,7 @@ svg.append("text")
.attr("y", midY + 30) // Adjust for correct height (moved to bottom) .attr("y", midY + 30) // Adjust for correct height (moved to bottom)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("fill", textcolour) // My Colour .attr("fill", textcolour) // My Colour
.attr("font-size", "24px") .attr("font-size", "22px")
.attr("font-weight", "bold") .attr("font-weight", "bold")
.text(`${text}`); .text(`${text}`);
@ -138,7 +138,7 @@ svg.append("text")
.attr("y", midY + 80) .attr("y", midY + 80)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("fill", "black") // 🎨 customize color .attr("fill", "black") // 🎨 customize color
.attr("font-size", "22px") .attr("font-size", "24px")
.attr("font-weight", "bold") .attr("font-weight", "bold")
.attr("font-family", "Courier New, monospace") .attr("font-family", "Courier New, monospace")
.text(`${mean}`); .text(`${mean}`);