EoQ_Supporting_Files/draw3axis.js

112 lines
2.7 KiB
JavaScript

function drawGraph() {
let ValA = 0.8;
let ValB = 0.4;
let ValC = 0.6;
createSVGgraphic("#Q1","FeatureA", "FeatureB", "FeatureC", ValA, ValB, ValC);
createSVGgraphic("#Q2","ConceptA", "ConceptB", "ConceptC", 0.2, 0.8, 0.8);
}
function createSVGgraphic(divID,FA,FB,FC,VA,VB,VC) {
const svg = d3.select(divID);
const width = +svg.attr("width");
const height = +svg.attr("height");
const radius = 150;
const center = { x: width / 2, y: height / 2 };
// Define axes with A at the top (rotate -90 degrees)
const axes = [
{ name: FA, angle: 0 },
{ name: FB, angle: 120 },
{ name: FC, angle: 240 }
];
axes.forEach(d => d.angle = (d.angle - 90) * Math.PI / 180);
// Sample data: [0-1] scale
const values = [VA, VB, VC];
// Draw axis lines
svg.append("g")
.attr("class", "axis")
.selectAll("line")
.data(axes)
.join("line")
.attr("x1", center.x)
.attr("y1", center.y)
.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 = 5;
for (let i = 1; i <= levels; i++) {
const r = (radius / levels) * i;
const points = axes.map(d => {
return [
center.x + r * Math.cos(d.angle),
center.y + r * Math.sin(d.angle)
];
});
svg.append("polygon")
.attr("class", "grid")
.attr("points", points.map(p => p.join(",")).join(" "));
}
// Draw axis ticks
const tickLength = 5;
axes.forEach(axis => {
for (let i = 1; i <= levels; i++) {
const r = (radius / levels) * i;
const angle = axis.angle;
const x1 = center.x + r * Math.cos(angle);
const y1 = center.y + r * Math.sin(angle);
// Perpendicular tick
const perpAngle = angle + Math.PI / 2;
const x2 = x1 + tickLength * Math.cos(perpAngle);
const y2 = y1 + tickLength * Math.sin(perpAngle);
svg.append("line")
.attr("x1", x1)
.attr("y1", y1)
.attr("x2", x2)
.attr("y2", y2)
.attr("class", "tick");
}
});
// Convert values to coordinates
const valuePoints = axes.map((d, i) => {
const r = radius * values[i];
return [
center.x + r * Math.cos(d.angle),
center.y + r * Math.sin(d.angle)
];
});
// Draw data area
svg.append("polygon")
.attr("class", "area")
.attr("points", valuePoints.map(p => p.join(",")).join(" "))
// Add axis labels
svg.selectAll(".label")
.data(axes)
.join("text")
.attr("class", "label")
.attr("x", d => center.x + (radius + 20) * Math.cos(d.angle))
.attr("y", (d,i) => {
if (i === 0) { //adjust for 1st access, rather than using d.name
return center.y + (radius + 20) * Math.sin(d.angle)
} else
return center.y + (radius + 20 + 30) * Math.sin(d.angle)
})
.text(d => d.name);
}