תרשימי הפרשים

• סקירה כללית
• דוגמאות
  • תרשימי פיזור הבדלים
  • תרשימי עוגה של הבדלים
  • תרשימי עמודות שונה ותרשימי עמודות

סקירה כללית

תרשים הבדלים הוא תרשים שמטרתו להדגיש את ההבדלים בין שני תרשימים עם נתונים דומים. הדגשת השינויים בין ערכים אנלוגיים יכולה לחשוף שונות בין מערכי הנתונים.

כדי ליצור תרשים דיפר, קוראים ל-method 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 שאפשר לראות) השתנתה משנות ה-80 ועד היום (המספרים הם למיליוני תינוקות, באדיבות אשף שם התינוק).

הקוד שיוצר את כל ארבעת התרשימים:

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