D3 Examples - Confusion Matrix

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confusion Matrix</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
</head>
<body>
​
    <div id="dataView"></div>
    <div style="display:inline-block; float:left" id="container"></div>
    <div style="display:inline-block; float:left" id="legend"></div>
​
    <script src="main.js"></script>
​
    <script>
​
        var confusionMatrix = [
            [169, 10],
            [7, 46]
        ];
​
        var tp = confusionMatrix[0][0];
        var fn = confusionMatrix[0][1];
        var fp = confusionMatrix[1][0];
        var tn = confusionMatrix[1][1];
​
        var p = tp + fn;
        var n = fp + tn;
​
        var accuracy = (tp+tn)/(p+n);
        var f1 = 2*tp/(2*tp+fp+fn);
        var precision = tp/(tp+fp);
        var recall = tp/(tp+fn);
​
        accuracy = Math.round(accuracy * 100) / 100
        f1 = Math.round(f1 * 100) / 100
        precision = Math.round(precision * 100) / 100
        recall = Math.round(recall * 100) / 100
​
        var computedData = [];
        computedData.push({"F1":f1, "PRECISION":precision,"RECALL":recall,"ACCURACY":accuracy});
​
        var labels = ['Class A', 'Class B'];
        Matrix({
            container : '#container',
            data      : confusionMatrix,
            labels    : labels,
            start_color : '#ffffff',
            end_color : '#e67e22'
        });
​
        // rendering the table
         var table = tabulate(computedData, ["F1", "PRECISION","RECALL","ACCURACY"]);
​
    </script>
</body>
​
    