Диаграммы различий

Обзор

Диаграмма различий — это диаграмма, предназначенная для выделения различий между двумя диаграммами с сопоставимыми данными. Делая изменения между аналогичными значениями заметными, они могут выявить различия между наборами данных.

Вы создаете диаграмму различий, вызывая метод computeDiff с двумя наборами данных для создания третьего набора данных, представляющего разницу, а затем рисуя его.

Дифференциальные диаграммы доступны для столбчатых диаграмм , столбчатых диаграмм , круговых диаграмм и точечных диаграмм .

Примеры

В этом разделе вы увидите примеры и образцы кода для каждого типа диаграммы различий.

Диаграммы разброса

Чтобы продемонстрировать диаграмму разностного рассеяния, давайте рассмотрим пару экспериментов, в каждом из которых сравниваются два лекарства. Вот результаты двух экспериментов и итоговая диаграмма различий:

Если вы посмотрите на эти две диаграммы, вы сможете сказать, что что-то изменилось, но трудно сказать, что именно. Диаграмма разностного рассеяния проясняет ситуацию, показывая траекторию каждой точки данных.

Вот ключевые линии, формирующие три приведенных выше графика:

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

Дифференциальные круговые диаграммы

Вот код для создания всех трех диаграмм:

  <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 , границу между ними с помощью diff.innerCircle.borderFactor и прозрачность каждого с помощью diff.oldData.opacity и diff.newData.opacity . Наконец, вы можете инвертировать поведение, чтобы самые старые данные окружали самые новые данные с помощью diff.oldData.inCenter . Пример каждого:

Дифференциальные гистограммы и гистограммы

Гистограмма различий и столбчатые диаграммы различий накладывают новые данные поверх старых данных. Здесь мы берем две простые гистограммы — одну со старыми данными, одну с новыми — и дифференцируем их:

В качестве более сложного примера давайте посмотрим, как изменилась популярность некоторых имен (в частности, имен летних стажеров Google Visualization) с 1980-х годов по настоящее время (числа указаны на миллион младенцев, любезно предоставлено Мастером имен для младенцев ). .

Код для создания всех четырех диаграмм:

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