תרשימי דיפ

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

סקירה כללית

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

תוכלו ליצור תרשים הבדלים על ידי קריאה לשיטה 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. דוגמה לכל אחת מהאפשרויות:

תרשימים של עמודות ועמודות

עמודות ה-diff ותרשימי העמודות השונות מציגים נתונים חדשים יותר על גבי נתונים ישנים יותר. כאן אנחנו לוקחים שני תרשימי עמודות פשוטים - אחד של נתונים ישנים, אחד של חדש - ומשנים אותם:

הנה דוגמה מסובכת יותר: איך הפופולריות של שמות מסוימים (במיוחד שמות המתמחים ב-Google Vision) משנות ה-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' ו'עמודות' ניתן לשלוט ברוחב היחסי של העמודות הישנות והעמודות החדשות באמצעות האפשרות diff.newData.widthFactor: