Interactive Confusion Matrix for Data Visualization

Question

Interactive Confusion Matrix for Data Visualization

3.4k views Asked by Ninja At 23 November 2024 at 12:20

I have plotted a ROC Curve using a scatter plot from Google developers. The code is enter image description here

and the output is

enter image description here

I want to make it interactive by showing a confusion matrix when a user clicks on the points in the scatter plot (All the points have a corresponding confusion matrix).

I found this :https://developers.google.com/chart/interactive/docs/gallery/controls#overview

but here the pie chart changes as per whatever the variable is but I want the table contents to be updated as soon as a user clicks on the data point.

Sample of table can be:

enter image description here

I want to know how can we relate the data points of the scatter plot to the table data of table.

Thanks a lot.

Original Q&A

There are 1 answers

**nbering** · Accepted Answer · 2015-06-22 12:41:50

I would use a custom tooltip and render your confusion matrices in a column of the DataTable.

https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

Here's an interactive demo with something like what you might like. Note that after converting the array to a data table I add role and html properties to the tooltip column.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {
      packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['FPR', 'TPR', 'Tooltip'],
        [0.934911, 0.98659,
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.852071, 0.978927, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.715976, 0.94636,
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.594675, 0.925287, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.402367, 0.812261, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.186391, 0.695402, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.12426, 0.564134,
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.056123, 0.390805, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.029586, 0.247126, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>'],
        [0.011834, 0.074713, 
          '<table><tr><td>n=165</td><th>Predicted:<br/>NO</th><th>Predicted:<br/>YES</th></tr><tr><th>Actual:<br/>NO</th><td>TN = 50</td><td>FP = 10</td></tr><th>Actual:<br/>YES</th><td>FN = 5</td><td>TP = 100</td></tr></table></div>']
      ]);

      data.setColumnProperty(2, 'role', 'tooltip');
      data.setColumnProperty(2, 'html', true);
      var options = {
        title: 'ROC Curve',
        hAxis: {
          title: 'False Positive Rate',
          minValue: 0,
          maxValue: 1
        },
        vAxis: {
          title: 'True Positive Rate',
          minValue: 0,
          maxValue: 1
        },
        legend: 'none',
        tooltip: {
          isHtml: true
        }
      };
      var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="chart_div" style="width:900px;height:500px;"></div>
</body>

</html>

TechQA.

Interactive Confusion Matrix for Data Visualization

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in GOOGLE-VISUALIZATION

Related Questions in DATA-VISUALIZATION

Related Questions in CONFUSION-MATRIX

Popular Questions

Popular Tags

Trending Questions