Use this exercise to understand your preferences and how others complement your strengths.
First, fill in the "You" column in the table below with your color scores from the last assessment. Then press the Plot button. Your object's shape and location show your strengths. Areas outside your object show where others can fill gaps.
Next, plot the scores of one or two others. Compare their shapes to yours to see how their strengths match your gaps. Differences in preferences can cause conflicts if not understood and valued.
| Color | You | Other 1 | Other 2 |
|---|---|---|---|
| Blue | |||
| Gold | |||
| Green | |||
| Orange |
Each circle shows steps of five points, starting with 0 in the middle and going up to 50 on the outside. Based on the usual way we score things, for any color, the highest score you can get is 48. We've changed the scores you gave to fit this scale. If you used percentages instead of raw scores, the chart will remain the same.
const canvas = document.getElementById("chartCanvas"); const ctx = canvas.getContext("2d");
function getMaxScore(setNumber) { const scores = [ parseFloat(document.getElementById("orange" + setNumber).value) || 0, parseFloat(document.getElementById("blue" + setNumber).value) || 0, parseFloat(document.getElementById("gold" + setNumber).value) || 0, parseFloat(document.getElementById("green" + setNumber).value) || 0 ]; const totalScore = scores.reduce((a, b) => a + b, 0); if (totalScore > 120) { { alert("Total score cannot exceed 120!"); return; } return Math.max(...scores); } }
function drawRings() { const centerX = canvas.width / 2; const centerY = canvas.height / 2; const maxRadius = canvas.width / 2; const increment = maxRadius / 10; // 10 rings for (let i = 1; i <= 10; i++) { ctx.beginPath(); ctx.arc(centerX, centerY, i * increment, 0, 2 * Math.PI); ctx.strokeStyle = "#666666aa"; ctx.lineWidth = 1; ctx.stroke(); } } function drawBackgroundColors() { const centerX = canvas.width / 2; const centerY = canvas.height / 2; const maxRadius = canvas.width / 2; // Upper Right - Orange ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, maxRadius, -Math.PI / 2, 0); ctx.closePath(); ctx.fillStyle = "#ff6600aa"; ctx.fill(); // Lower Right - Blue ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, maxRadius, 0, Math.PI / 2); ctx.closePath(); ctx.fillStyle = "#336699aa"; ctx.fill(); // Lower Left - Gold ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, maxRadius, Math.PI / 2, Math.PI); ctx.closePath(); ctx.fillStyle = "#cc9900aa"; ctx.fill(); // Upper Left - Green ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, maxRadius, Math.PI, 1.5 * Math.PI); ctx.closePath(); ctx.fillStyle = "#339966aa"; ctx.fill(); } function drawChart(setNumber) { // Clear the canvas // ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw background colors for quadrants drawBackgroundColors(); // Draw concentric rings drawRings(); const maxScoreForSingleColor = 48; const maxTotalScore = 120; const maxPossibleScore = 50; let orangeValue = parseFloat(document.getElementById("orange" + setNumber + "").value) || 0; let blueValue = parseFloat(document.getElementById("blue" + setNumber + "").value) || 0; let goldValue = parseFloat(document.getElementById("gold" + setNumber + "").value) || 0; let greenValue = parseFloat(document.getElementById("green" + setNumber + "").value) || 0; // Calculate scaling factor const highestScore = Math.max(orangeValue, blueValue, goldValue, greenValue); const scalingFactor = maxScoreForSingleColor / highestScore; // Adjust scores with the scaling factor orangeValue *= scalingFactor; blueValue *= scalingFactor; goldValue *= scalingFactor; greenValue *= scalingFactor; // Display rescaled scores //document.getElementById("rescaledOrange").textContent = orangeValue.toFixed(0); //document.getElementById("rescaledBlue").textContent = blueValue.toFixed(0); //document.getElementById("rescaledGold").textContent = goldValue.toFixed(0); //document.getElementById("rescaledGreen").textContent = greenValue.toFixed(0); // Convert scores to percentages based on the maximum possible score of 50 orangeValue = (orangeValue / maxPossibleScore) * 100; blueValue = (blueValue / maxPossibleScore) * 100; goldValue = (goldValue / maxPossibleScore) * 100; greenValue = (greenValue / maxPossibleScore) * 100; // Calculate coordinates const centerX = canvas.width / 2; const centerY = canvas.height / 2; const maxRadius = canvas.width / 2; const orangeCoord = { x: centerX + Math.cos(Math.PI / 4) * (orangeValue / 100) * maxRadius, y: centerY - Math.sin(Math.PI / 4) * (orangeValue / 100) * maxRadius }; const blueCoord = { x: centerX - Math.cos((3 * Math.PI) / 4) * (blueValue / 100) * maxRadius, y: centerY + Math.sin((3 * Math.PI) / 4) * (blueValue / 100) * maxRadius }; const goldCoord = { x: centerX + Math.cos((3 * Math.PI) / 4) * (goldValue / 100) * maxRadius, y: centerY + Math.sin((3 * Math.PI) / 4) * (goldValue / 100) * maxRadius }; const greenCoord = { x: centerX - Math.cos(Math.PI / 4) * (greenValue / 100) * maxRadius, y: centerY - Math.sin(Math.PI / 4) * (greenValue / 100) * maxRadius }; // Draw filled quadrilateral shape with 50% transparent light gray ctx.beginPath(); ctx.moveTo(orangeCoord.x, orangeCoord.y); ctx.lineTo(blueCoord.x, blueCoord.y); ctx.lineTo(goldCoord.x, goldCoord.y); ctx.lineTo(greenCoord.x, greenCoord.y); ctx.closePath(); ctx.fillStyle = "rgba(170, 170, 170, 0.5)"; // 50% transparent light gray ctx.fill(); // Draw the border of the shape with 2 pixels width ctx.lineWidth = 2; ctx.strokeStyle = "#000"; // Black border ctx.stroke(); } function plotData() { let dataSets = []; // Check if data is present for each person if(document.getElementById("blue1").value || document.getElementById("gold1").value || document.getElementById("green1").value) { dataSets.push(1); } if(document.getElementById("blue2").value || document.getElementById("gold2").value || document.getElementById("green2").value) { dataSets.push(2); } if(document.getElementById("blue3").value || document.getElementById("gold3").value || document.getElementById("green3").value) { dataSets.push(3); } // Call drawChart for each dataSet dataSets.forEach(setNumber => { drawChart(setNumber); }); }
// Initial rendering drawBackgroundColors(); drawRings();
function resetData() { // Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height); drawBackgroundColors(); drawRings();
// Clear the data from the table inputs for (let i = 1; i <= 3; i++) { document.getElementById("orange" + i).value = ""; document.getElementById("blue" + i).value = ""; document.getElementById("gold" + i).value = ""; document.getElementById("green" + i).value = ""; } }