用于数据可视化的交互式混淆矩阵

Question

我使用 Google 开发人员的散点图绘制了 ROC 曲线。代码是

输出为

我想通过在用户单击散点图中的点时显示混淆矩阵来使其具有交互性（所有点都有相应的混淆矩阵）。

我找到了这个：https://developers.google.com/chart/interactive/docs/gallery/controls#overview

但这里的饼图会根据变量的变化而变化，但我希望 table 内容在用户单击数据点后立即更新。

table 的样本可以是：

我想知道如何将散点图的数据点与 table 的 table 数据相关联。

非常感谢。

Answer 1

我会使用自定义工具提示并在 DataTable 的列中呈现您的混淆矩阵。

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

这里有一个 interactive demo，其中包含您可能喜欢的内容。请注意，在将数组转换为数据 table 之后，我将角色和 html 属性添加到工具提示列。

<!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>

用于数据可视化的交互式混淆矩阵

Interactive Confusion Matrix for Data Visualization

html

javascript

data-visualization

google-visualization

confusion-matrix