TestViz2Script.js

var population = 10000;
        var prevalence = 0.5;
        var sensitivity = 0.8;
        var specificity = 0.8;

        function updateDiagram() {
            // Calculating values based on prevalence, sensitivity, and specificity
            var positive = population * prevalence;
            var negative = population - positive;

            var truePositive = positive * sensitivity;
            var falseNegative = positive - truePositive;

            var trueNegative = negative * specificity;
            var falsePositive = negative - trueNegative;

            // Update Confusion Matrix
            document.getElementById("truePositive").textContent = Math.round(truePositive);
            document.getElementById("falsePositive").textContent = Math.round(falsePositive);
            document.getElementById("trueNegative").textContent = Math.round(trueNegative);
            document.getElementById("falseNegative").textContent = Math.round(falseNegative);
            document.getElementById("totalPositive").textContent = Math.round(truePositive + falsePositive);
            document.getElementById("totalNegative").textContent = Math.round(trueNegative + falseNegative);
            document.getElementById("totalDisease").textContent = Math.round(positive);
            document.getElementById("totalNoDisease").textContent = Math.round(negative);

            // Calculate metrics based on Confusion Matrix
            var calculatedSensitivity = truePositive / (truePositive + falseNegative);
            var calculatedSpecificity = trueNegative / (trueNegative + falsePositive);
            var PPV = truePositive / (truePositive + falsePositive);
            var NPV = trueNegative / (trueNegative + falseNegative);

       


          
          // Update calculations
document.getElementById("calculations").innerHTML = `
    <tr>
        <td>Sensitivity</td>
        <td>${truePositive.toFixed()} / (${truePositive.toFixed()} + ${falseNegative.toFixed()}) = ${sensitivity.toFixed(2)}</td>
    </tr>
    <tr>
        <td>Specificity</td>
        <td>${trueNegative.toFixed()} / (${trueNegative.toFixed()} + ${falsePositive.toFixed()}) = ${specificity.toFixed(2)}</td>
    </tr>
    <tr>
        <td>Positive Predictive Value (PPV)</td>
        <td>${truePositive.toFixed()} / (${truePositive.toFixed()} + ${falsePositive.toFixed()}) = ${PPV.toFixed(2)}</td>
    </tr>
    <tr>
        <td>Negative Predictive Value (NPV))</td>
        <td>${trueNegative.toFixed()} / (${trueNegative.toFixed()} + ${falseNegative.toFixed()}) = ${NPV.toFixed(2)}</td>
    </tr>
`;

          

            // Update PPV and NPV visualizations
            document.getElementById('PPVBar').value = PPV;
            document.getElementById('NPVBar').value = NPV;
            document.getElementById('PPVValue').textContent = PPV.toFixed(2);
            document.getElementById('NPVValue').textContent = NPV.toFixed(2);


//new code

    var relativeSize = document.getElementById('relativePopulationSize').checked;
    var diseaseCanvasSize, nonDiseaseCanvasSize;
    if (relativeSize) {
        diseaseCanvasSize = prevalence;
        nonDiseaseCanvasSize = 1 - prevalence;
    } else {
        diseaseCanvasSize = nonDiseaseCanvasSize = 0.5;  // Same size for both
    }
    drawPieChart("diseaseCanvas", [truePositive, falseNegative], ["red", "pink"], diseaseCanvasSize);
    drawPieChart("nonDiseaseCanvas", [trueNegative, falsePositive], ["green", "yellow"], nonDiseaseCanvasSize);   



            updateROC();
        }



       function updateROC() {
      var TPR = sensitivity; 
      var FPR = 1 - specificity; 

      var canvas = document.getElementById('ROCCanvas');
      var ctx = canvas.getContext('2d');

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.beginPath();
      ctx.moveTo(0, canvas.height);
      ctx.lineTo(canvas.width, 0);
      ctx.stroke();

      ctx.beginPath();
      ctx.arc(FPR * canvas.width, (1 - TPR) * canvas.height, 5, 0, 2 * Math.PI, false);
      ctx.fill();

      // Add labels
      ctx.font = '14px Arial';
      ctx.fillText('1 - Specificity', canvas.width / 2, canvas.height - 5);
      ctx.save();
      ctx.rotate(-Math.PI / 2);
      ctx.textAlign = 'center';
      ctx.fillText('Sensitivity', -canvas.height / 2, 15);
      ctx.restore();
  }


        
function drawPieChart(canvasId, data, colors, relativeSize) {
    var canvas = document.getElementById(canvasId);
    canvas.width = canvas.height = 200;  // Keeping the canvas size constant
    var ctx = canvas.getContext("2d");
    var total = data.reduce((a, b) => a + b, 0);
    
    var angleStart = 0;

    // The center of the pie chart should be the center of the canvas
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;

    // Radius of pie chart relative to the size of the canvas
    var radius = relativeSize * centerX;

    for (var i in data) {
        ctx.beginPath();
        // Draw the pie chart around the center of the canvas
        ctx.arc(centerX, centerY, radius, angleStart, angleStart + Math.PI * 2 * (data[i] / total), false);
        ctx.lineTo(centerX, centerY);
        ctx.fillStyle = colors[i];
        ctx.fill();
        angleStart += Math.PI * 2 * (data[i] / total);
    }
}


//nee 








//nee

        function setupSliders() {
            var prevalenceRange = document.getElementById('prevalenceRange');
            var prevalenceValue = document.getElementById('prevalenceValue');
            prevalenceValue.textContent = prevalenceRange.value;
            prevalenceRange.oninput = function() {
                prevalenceValue.textContent = this.value;
                prevalence = this.value / 100;
                updateDiagram();
            }

            var sensitivityRange = document.getElementById('sensitivityRange');
            var sensitivityValue = document.getElementById('sensitivityValue');
            sensitivityValue.textContent = sensitivityRange.value;
            sensitivityRange.oninput = function() {
                sensitivityValue.textContent = this.value;
                sensitivity = this.value / 100;
                updateDiagram();
            }

            var specificityRange = document.getElementById('specificityRange');
            var specificityValue = document.getElementById('specificityValue');
            specificityValue.textContent = specificityRange.value;
            specificityRange.oninput = function() {
                specificityValue.textContent = this.value;
                specificity = this.value / 100;
                updateDiagram();
            }
        }

        document.getElementById('relativePopulationSize').addEventListener('change', updateDiagram);

        setupSliders();
        updateDiagram();