0

Google 開発者の散布図を使用して ROC 曲線をプロットしました。コードはここに画像の説明を入力

そして出力は

ここに画像の説明を入力

ユーザーが散布図のポイントをクリックしたときに混同マトリックスを表示することで、インタラクティブにしたいと考えています (すべてのポイントには、対応する混同マトリックスがあります)。

私はこれを見つけました: https://developers.google.com/chart/interactive/docs/gallery/controls#overview

しかし、ここでは、変数が何であれ円グラフが変化しますが、ユーザーがデータポイントをクリックするとすぐにテーブルの内容が更新されるようにします。

テーブルのサンプルは次のとおりです。

ここに画像の説明を入力

散布図のデータ ポイントをテーブルのテーブル データに関連付ける方法を知りたいです。

どうもありがとう。

4

1 に答える 1

1

カスタム ツールチップを使用して、混同マトリックスを DataTable の列にレンダリングします。

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

これは、あなたが好きかもしれないようなインタラクティブなデモです。配列をデータ テーブルに変換した後、ロールと 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>
于 2015-06-22T12:41:50.020 に答える