概要
差分グラフは、比較可能なデータが存在する 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 つのシンプルな縦棒グラフで、一つは古いデータ、もう一つは新しいデータ、そして差分を取っています。
もっと複雑な例として、一部の名前(特に、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
オプションを使用して新旧の棒の相対幅を制御できます。