Fark Grafikleri

Genel bakış

Fark grafiği, karşılaştırılabilir verilere sahip iki grafik arasındaki farkları vurgulamak için tasarlanmış bir grafiktir. Benzer değerler arasındaki değişiklikleri belirgin hale getirerek veri kümeleri arasındaki varyasyonları ortaya çıkarabilirler.

Fark grafiği oluşturmak için iki veri kümesiyle computeDiff yöntemini çağırarak farkı temsil eden üçüncü bir veri kümesi oluşturur ve bunu çizersiniz.

Fark grafikleri çubuk grafikler, sütun grafikleri, pasta grafikleri ve dağılım grafikleri için kullanılabilir.

Örnekler

Bu bölümde, her bir fark grafiği türü için örnekler ve kod örnekleri göreceksiniz.

Dağılım Grafikleri

Fark dağılım grafiğini göstermek için, her biri iki ilacı karşılaştıran bir çift denemeyi ele alalım. Aşağıda, iki denemenin sonuçlarını ve ortaya çıkan fark grafiğini görebilirsiniz:

Bu iki grafiği göz önünde bulundurursanız bir şeylerin değiştiğini söyleyebilirsiniz, ancak tam olarak neyin olduğunu söylemek zordur. Fark dağılım grafiği, her bir veri noktasının izlediği yolu göstererek bu durumu netleştirir.

Yukarıdaki üç grafiği oluşturan önemli satırlar şunlardır:

// 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 seçeneğiyle kuyrukların opaklığını, diff.newData.opacity seçeneğiyle yeni veri noktalarının opaklığını değiştirebilirsiniz:

Pasta Grafikleri

Üç grafiği de oluşturmak için gereken kodu aşağıda görebilirsiniz:

  <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 ile dairelerin göreli boyutunu, iki nokta arasındaki sınırı diff.innerCircle.borderFactor ile ve her birinin şeffaflığını diff.oldData.opacity ve diff.newData.opacity ile kontrol edebilirsiniz. Son olarak, davranışı ters çevirerek en eski verilerin en yeni verileri diff.oldData.inCenter ile sarmasını sağlayabilirsiniz. Her birine bir örnek:

Fark Çubuk ve Sütun Grafikleri

Fark çubuğu ve fark sütunu grafikleri, eski verilerin üzerine yeni veriler yerleştirir. Burada biri eski, biri yeni olmak üzere iki basit sütun grafiği alır ve bunları birbirinden ayırırız:

Daha karmaşık bir örnek için bazı adların (özellikle Google Görselleştirme yaz stajyerlerinin adları) 1980'lerden günümüze kadar popülerliğinin (Bebek Adı Büyücüsü sayesinde milyonlarca bebek başına) nasıl değiştiğine bakalım.

Dört grafiğin tümünü oluşturan kod:

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

Fark sütunu ve çubuk grafikler, diff.newData.widthFactor seçeneğiyle eski ve yeni çubukların göreli genişliğini kontrol etmenizi sağlar: