Graphiques de différence

Présentation

Un graphique de différences est conçu pour mettre en évidence les différences entre deux graphiques présentant des données comparables. En mettant en évidence les changements entre les valeurs analogues, ils peuvent révéler des variations entre les ensembles de données.

Pour créer un graphique de différences, appelez la méthode computeDiff avec deux ensembles de données pour générer un troisième ensemble de données représentant les différences, puis tracez le résultat.

Les graphiques de différences sont disponibles pour les graphiques à barres, les graphiques à colonnes, les graphiques à secteurs et les graphiques à nuage de points.

Exemples

Dans cette section, vous trouverez des exemples et des exemples de code pour chaque type de graphique de différences.

Graphiques à nuage de points

Pour illustrer ce graphique à nuage de points, prenons deux expériences, chacune comparant deux médicaments. Voici les résultats des deux tests, ainsi que le graphique de différences qui en résulte:

En examinant ces deux graphiques, vous pouvez voir que quelque chose a changé, mais il est difficile de dire exactement quoi. Le graphique à nuage de points (diff) le rend clair en montrant la trajectoire de chaque point de données.

Voici les lignes clés qui génèrent les trois graphiques ci-dessus:

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

Vous pouvez modifier l'opacité des côtés avec l'option diff.oldData.opacity et l'opacité des nouveaux points de données avec l'option diff.newData.opacity:

Graphiques à secteurs présentant des différences

Voici le code permettant de générer les trois graphiques:

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

Vous pouvez contrôler la taille relative des cercles avec diff.innerCircle.radiusFactor, la bordure entre les deux avec diff.innerCircle.borderFactor, et la transparence de chacun avec diff.oldData.opacity et diff.newData.opacity. Enfin, vous pouvez inverser le comportement afin que les données les plus anciennes entourent les données les plus récentes avec diff.oldData.inCenter. Voici un exemple pour chaque élément:

Barres de différences et graphiques à colonnes

La barre de différences et les graphiques à colonnes de différences superposent les données récentes aux anciennes données. Ici, nous prenons deux graphiques à colonnes simples, l'un des anciennes données et l'autre des nouveaux, et nous les différencions:

Pour un exemple plus complexe, examinons comment la popularité de certains noms (en particulier ceux des stagiaires d'été en visualisation Google) a changé entre les années 1980 et aujourd'hui (les chiffres sont pour un million de bébés, grâce au Baby Name Wizard).

Le code permettant de générer les quatre graphiques:

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

La colonne de différences et les graphiques à barres vous permettent de contrôler la largeur relative des anciennes et des nouvelles barres avec l'option diff.newData.widthFactor: