差分チャート

概要

差分グラフは、比較可能なデータを含む 2 つのグラフ間の違いを強調するために設計されたグラフです。類似値間の変更を目立つようにすることで、データセット間のばらつきを明らかにできます。

差分グラフを作成するには、2 つのデータセットで computeDiff メソッドを呼び出して、差分を表す 3 つ目のデータセットを生成し、それを描画します。

差分グラフは、棒グラフ、縦棒グラフ、円グラフ、散布図で使用できます。

例

このセクションでは、差分グラフの種類ごとに例とコードサンプルを示します。

差分散布図

差分散布図を説明するために、2 つの薬を比較した 2 つのテストについて考えてみましょう。2 つのテストの結果と結果の差分チャートを次に示します。

この 2 つのグラフを見ると、何かが変化したことはわかりますが、正確にはわかりません。差分散布図では各データポイントの移動経路がわかりやすく示されます。

上の 3 つのグラフを構成する主な線は次のとおりです。

// Create the three charts: before, after, and diff.
var chartBefore = new google.visualization.ScatterChart(document.getElementById('chart_before_div'));
var chartAfter = new google.visualization.ScatterChart(document.getElementById('chart_after_div'));
var chartDiff = new google.visualization.ScatterChart(document.getElementById('chart_diff_div'));

// Draw the before and after charts.
chartBefore.draw(oldData);
chartAfter.draw(newData);

// Draw the diff chart.
var diffData = chartDiff.computeDiff(oldData, newData);
chartDiff.draw(diffData);

テールの不透明度は diff.oldData.opacity オプションで変更できます。新しいデータポイントの不透明度は diff.newData.opacity オプションで変更できます。

差分円グラフ

3 つのグラフすべてを生成するコードを以下に示します。

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var oldData = google.visualization.arrayToDataTable([
      ['Major', 'Degrees'],
      ['Business', 256070], ['Education', 108034],
      ['Social Sciences & History', 127101], ['Health', 81863],
      ['Psychology', 74194]]);

    var newData = google.visualization.arrayToDataTable([
      ['Major', 'Degrees'],
      ['Business', 358293], ['Education', 101265],
      ['Social Sciences & History', 172780], ['Health', 129634],
      ['Psychology', 97216]]);

    var options = { pieSliceText: 'none' };

    var chartBefore = new google.visualization.PieChart(document.getElementById('piechart_before'));
    var chartAfter = new google.visualization.PieChart(document.getElementById('piechart_after'));
    var chartDiff = new google.visualization.PieChart(document.getElementById('piechart_diff'));

    chartBefore.draw(oldData, options);
    chartAfter.draw(newData, options);

    var diffData = chartDiff.computeDiff(oldData, newData);
    chartDiff.draw(diffData, options);
  }
</script>
<span id='piechart_before' style='width: 450px; display: inline-block'></span>
<span id='piechart_after' style='width: 450px; display: inline-block'></span>
<br>
<span id='piechart_diff' style='width: 450px; position: absolute; left: 250px'></span>

円の相対的なサイズは diff.innerCircle.radiusFactor で、2 つの間の枠線は diff.innerCircle.borderFactor で、それぞれの透明度は diff.oldData.opacity と diff.newData.opacity で制御できます。最後に、diff.oldData.inCenter を使用して、最も古いデータが最新のデータを囲むように動作を逆にします。それぞれの例:

差分棒グラフと差分グラフ

差分棒グラフと差分縦棒グラフは、新しいデータを古いデータの上に重ねて表示されます。ここでは、2 つのシンプルな縦棒グラフ（1 つは古いデータ、もう 1 つは新しいデータ）を取り、これらのグラフを比較します。

より複雑な例として、一部の名前（特に Google ビジュアリゼーションのサマー インターンの名前）の人気が 1980 年代から現在までにどのように変化したかを見てみましょう（数は、赤ちゃんの名前のウィザードにより、数百万人の赤ちゃんに由来しています）。

4 つのグラフすべてを生成するコード:

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var oldData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 250],
      ['Rachel', 4200],
      ['Patrick', 2900],
      ['Eric', 8200]
    ]);

    var newData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 370],
      ['Rachel', 600],
      ['Patrick', 700],
      ['Eric', 1500]
    ]);

    var colChartBefore = new google.visualization.ColumnChart(document.getElementById('colchart_before'));
    var colChartAfter = new google.visualization.ColumnChart(document.getElementById('colchart_after'));
    var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
    var barChartDiff = new google.visualization.BarChart(document.getElementById('barchart_diff'));

    var options = { legend: { position: 'top' } };

    colChartBefore.draw(oldData, options);
    colChartAfter.draw(newData, options);

    var diffData = colChartDiff.computeDiff(oldData, newData);
    colChartDiff.draw(diffData, options);
    barChartDiff.draw(diffData, options);
  }
</script>

<span id='colchart_before' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_after' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='barchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>

差分の縦棒グラフと棒グラフでは、diff.newData.widthFactor オプションを使用して、古い棒と新しい棒の相対的な幅を制御できます。