Graphiques de différence

Présentation

Un graphique de différence est un graphique conçu pour mettre en évidence les différences entre deux graphiques présentant des données comparables. En mettant en évidence les modifications entre des valeurs analogues, vous pouvez révéler des différences 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 afin de générer un troisième ensemble de données le représentant, puis tracez-le.

Ils sont disponibles pour les graphiques à barres, les graphiques à colonnes, les graphiques à secteurs et les graphiques à nuage de points.

Exemples

Cette section présente des exemples et des exemples de code pour chaque type de graphique de différence.

Graphiques à nuage de points

Pour illustrer le graphique à nuage de différences, considérons deux expériences, chacune comparant deux médicaments. Voici les résultats des deux tests et le graphique de différence obtenu:

Si vous observez ces deux graphiques, vous pouvez constater que quelque chose a changé, mais qu'est-ce qui est difficile à dire. Le graphique à nuage de points indique clairement la trajectoire de chaque point de données.

Voici les principales lignes 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 de différence

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 de sorte que les plus anciennes entourent les plus récentes avec diff.oldData.inCenter. Exemple:

Graphiques à barres et à colonnes de différence

Les graphiques à barres et différences diffèrent des données plus récentes par rapport aux données plus anciennes. Ici, nous prenons deux graphiques à colonnes simples, l'une des anciennes données, l'autre nouvelle, et nous les différencions:

Pour illustrer un exemple plus complexe, voyons comment la popularité de certains noms (en particulier les stagiaires d'été de Google Visualization) a changé depuis les années 1980 à aujourd'hui (avec des chiffres par million de bébés, avec l'aimable autorisation du 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>

Les graphiques à colonnes et à barres Diff vous permettent de contrôler la largeur relative des anciennes et des nouvelles barres à l'aide de l'option diff.newData.widthFactor: