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

Corrected 4 triangle structure and position to round up rather than down 0.6, and also to allow for border thickness

Browse Source
This commit is contained in:
Peter Edmond 2025-05-14 07:47:50 +01:00
parent 7a07ffebe4
commit c37f9bc71b
3 changed files with 66 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
IndexUsingJS.html
View File

@ -6,6 +6,7 @@
<script src="https://d3js.org/d3.v7.min.js"></script> <script src="https://d3js.org/d3.v7.min.js"></script>
<script src="./drawtriangle.js"></script> <script src="./drawtriangle.js"></script>
<script src="./drawtriangleinverted.js"></script> <script src="./drawtriangleinverted.js"></script>
<script src="./savesvg.js"></script>
<style> <style>
body { body {
@ -52,14 +53,14 @@
</head> </head>
<body onload="drawtriangle('#svg1','Roles','#316443',[0.5,0.6,0.5],'red', { x: 0, y: 350 },-0.7); <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','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); drawtriangle('#svg1','Approach','#d76a23',[0.3,0.6,0.5],'#ffbf00',{ x: 185, y: 32 },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');
"> ">
<svg id="svg1" width="1000" height="1000"></svg> <svg xmlns="http://www.w3.org/2000/svg" id="svg1" width="1000" height="1000"></svg>
<svg id="svg2" width="500" height="500"></svg> <svg xmlns="http://www.w3.org/2000/svg" id="svg2" width="500" height="500"></svg>
</body> </body>
</html> </html>

2
amber.html
View File

@ -132,7 +132,7 @@ const valuePoints = axes.map((d, i) => {
svg.append("polygon") svg.append("polygon")
.attr("class", "area") .attr("class", "area")
.attr("points", valuePoints.map(p => p.join(",")).join(" ")) .attr("points", valuePoints.map(p => p.join(",")).join(" "))
.attr("fill", "#ffbf00") // #d76a23 with 30% opacity (translucent) .attr("fill", "#ffbf00") // #ffbf00 with 30% opacity (translucent)
.attr("fill-opacity", 0.6) .attr("fill-opacity", 0.6)
.attr("stroke", "#ffbf00") // Outer line color .attr("stroke", "#ffbf00") // Outer line color
.attr("stroke-width", 2); // Thin outer line .attr("stroke-width", 2); // Thin outer line

67
index3axis.html
View File

@ -34,11 +34,11 @@
stroke-dasharray: 2,2; stroke-dasharray: 2,2;
} }
.area { //.area {
fill: rgba(70, 130, 180, 0.3); /* steelblue with transparency */ // fill: rgba(215, 96, 35, 0.1); /* steelblue with transparency */
stroke: rgba(70, 130, 180, 0.6); // stroke: rgba(215, 96, 35, 0.6);
stroke-width: 2; // stroke-width: 2;
} //}
.label { .label {
font-size: 12px; font-size: 12px;
@ -80,7 +80,7 @@ svg.append("g")
.attr("y2", d => center.y + radius * Math.sin(d.angle)); .attr("y2", d => center.y + radius * Math.sin(d.angle));
// Draw grid rings (polygons) // Draw grid rings (polygons)
const levels = 5; const levels = 7;
for (let i = 1; i <= levels; i++) { for (let i = 1; i <= levels; i++) {
const r = (radius / levels) * i; const r = (radius / levels) * i;
const points = axes.map(d => { const points = axes.map(d => {
@ -94,6 +94,7 @@ for (let i = 1; i <= levels; i++) {
.attr("points", points.map(p => p.join(",")).join(" ")); .attr("points", points.map(p => p.join(",")).join(" "));
} }
// Draw axis ticks // Draw axis ticks
const tickLength = 5; const tickLength = 5;
axes.forEach(axis => { axes.forEach(axis => {
@ -131,9 +132,60 @@ const valuePoints = axes.map((d, i) => {
svg.append("polygon") svg.append("polygon")
.attr("class", "area") .attr("class", "area")
.attr("points", valuePoints.map(p => p.join(",")).join(" ")) .attr("points", valuePoints.map(p => p.join(",")).join(" "))
.attr("fill", "rgba(215, 106, 35, 0.3)") // #d76a23 with 30% opacity (translucent)
.attr("stroke", "#d76a23") // Outer line color
.attr("stroke-width", 1); // Thin outer line
// Draw outer triangle border (goes to edge of chart)
const outerPoints = axes.map(d => [
center.x + radius * Math.cos(d.angle),
center.y + radius * Math.sin(d.angle)
]);
// Draw border separately (on top)
svg.append("polygon")
.attr("points", outerPoints.map(p => p.join(",")).join(" "))
.attr("fill","none")
.attr("stroke", "#d76a23") // Outer line color
.attr("stroke-width", 3); // Thin outer line
// Put label in bottom centre of triangle
const bottomLeft = outerPoints[1];
const bottomRight = outerPoints[2];
const midX = (bottomLeft[0] + bottomRight[0]) / 2;
const midY = (bottomLeft[1] + bottomRight[1]) / 2;
svg.append("text")
.attr("x", midX)
.attr("y", midY - 15) // Alter for correct height
.attr("text-anchor", "middle")
.attr("fill", "#d76a23") /// My Colour
.attr("font-size", "24px")
.attr("font-weight", "bold")
.text("Approach");
// And now a central number
svg.append("text")
.attr("x", midX)
.attr("y", midY -60)
.attr("text-anchor", "middle")
.attr("fill", "black") // 🎨 customize color
.attr("font-size", "22px")
.attr("font-weight", "bold")
.attr("font-family", "Courier New, monospace")
.text("-2.1");
// Add axis labels // Add axis labels
svg.selectAll(".label") /*
svg.selectAll(".label")
.data(axes) .data(axes)
.join("text") .join("text")
.attr("class", "label") .attr("class", "label")
@ -145,6 +197,7 @@ svg.selectAll(".label")
return center.y + (radius + 20 + 30) * Math.sin(d.angle) return center.y + (radius + 20 + 30) * Math.sin(d.angle)
}) })
.text(d => d.name); .text(d => d.name);
*/
</script> </script>
</body> </body>
</html> </html>