Gráficos de diferencias

Descripción general

Un gráfico de diferencias es un gráfico diseñado para destacar las diferencias entre dos gráficos con datos comparables. Si haces que los cambios entre los valores análogos se destaquen, pueden revelar variaciones entre los conjuntos de datos.

Para crear un gráfico de diferencias, llama al método computeDiff con dos conjuntos de datos a fin de generar un tercer conjunto de datos que represente la diferencia y, luego, dibuja eso.

Los gráficos de diferencias están disponibles para los gráficos de barras, los gráficos de columnas, los gráficos circulares y los gráficos de dispersión.

Ejemplos

En esta sección, verás ejemplos y muestras de código para cada tipo de gráfico de diferencias.

Gráficos de dispersión

Para demostrar el gráfico de dispersión de diferencias, consideremos un par de experimentos, cada uno comparando dos medicamentos. Estos son los resultados de los dos experimentos y el gráfico de diferencias resultante:

Si observa los dos gráficos, puede ver que algo cambió, pero es difícil saber exactamente qué. El gráfico de dispersión de la diferencia lo aclara, ya que muestra la trayectoria de cada dato.

Estas son las líneas clave que generan los tres gráficos anteriores:

// 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);

Puedes cambiar la opacidad de las colas con la opción diff.oldData.opacity y la opacidad de los datos nuevos con la opción diff.newData.opacity:

Gráficos circulares divisores

Este es el código para generar los tres gráficos:

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

Puedes controlar el tamaño relativo de los círculos con diff.innerCircle.radiusFactor, el borde entre ambos con diff.innerCircle.borderFactor y la transparencia de cada uno con diff.oldData.opacity y diff.newData.opacity. Por último, puedes invertir el comportamiento para que los datos más antiguos rodeen los más recientes con diff.oldData.inCenter. Un ejemplo de cada una:

Gráficos de barras y columnas de DIF

Los gráficos de barras de diferencia y columna de diferencias se superponen con los datos más nuevos sobre los más antiguos. Aquí tomamos dos gráficos de columnas simples, uno de datos antiguos, uno nuevo, y las diferenciamos:

Para ver un ejemplo más complicado, veamos cómo cambió la popularidad de algunos nombres (en particular, los nombres de los pasantes de verano de Visualización de Google) desde la década de 1980 hasta el presente (los números son por millón de bebés, cortesía del asistente del bebé).

El código para generar los cuatro gráficos:

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

Las columnas de diferencias y los gráficos de barras te permiten controlar el ancho relativo de las barras antiguas y nuevas con la opción diff.newData.widthFactor: