כתיבת התצוגה החזותית

כתיבת הקוד להמחשה

ספריית העזר של Data Studio מספקת ממשק ביניכם לבין Data Studio. כדי להשתמש בספרייה, צריך לספק פונקציית קריאה חוזרת שמציגה את הוויזואליזציה.

הפונקציה הכי חשובה בספרייה היא subscribeToData, שמקבלת שני ארגומנטים: פונקציית callback שמעבדת את הוויזואליזציה, ואובייקט options שמציין איזה סוג של טרנספורמציה רוצים להחיל על הנתונים. מידע נוסף זמין במאמר בנושא ספרייה.

בהמשך מופיע תרשים של קוד JavaScript להמחשה.

function drawViz(vizData){
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  console.log(vizData);
  // this is where you write your viz code
}

dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})

כשכותבים תרשים ויזואלי של הקהילה, יש כמה דברים חשובים שכדאי לזכור.

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

לדוגמה:

// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data){
  // clear the canvas
  var ctx = canvasElement.getContext('2d');
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);

  // viz code goes here

}

‫Looker Studio טוען ומריץ קובצי JavaScript, ולא קובצי HTML. כל השינויים ב-DOM צריכים להתבצע באמצעות JavaScript.

לדוגמה: הקוד הבא מגדיר ומצרף div ל-DOM.

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

חבילת הקוד

המחשות חזותיות של הקהילה ב-Looker Studio מאפשרות לטעון רק קובץ JavaScript אחד. הקוד שמעלים צריך להיות קובץ יחיד שכולל את ספריית העזר dscc, את כל ספריות הוויזואליזציה של JavaScript ואת קוד הוויזואליזציה.

כדי לעשות את זה ב-Bash, אפשר להשתמש בפקודה cat, כמו בדוגמה שלמטה.

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

הגדרת המניפסט

קובץ המניפסט של ההמחשה מספק מטא-נתונים על ההמחשה, וגם מידע על המיקום של משאבי ההמחשה. המיקום של קובץ המניפסט נקרא 'מזהה הרכיב', ומשמש לטעינה של סוג ויזואליזציית נתונים במאגר הקהילה (community visualization).

דוגמה למניפסט

הפרמטר devMode של המניפסט קובע את התנהגות הקאשינג של הוויזואליזציה. במהלך פיתוח הוויזואליזציה, צריך devMode את true כדי לוודא שרענונים מלאים יטענו את הגרסה העדכנית של המשאבים. אחרי שהקוד יציב, צריך להגדיר את devMode ל-false כדי לוודא שהדוחות עם ההדמיות של הקהילה ייטענו במהירות. מידע נוסף על שמירה במטמון זמין במדריך המתקדם בנושא שמירה במטמון.

השלבים הבאים

אחרי שכותבים את הקוד של הוויזואליזציה, אפשר ללמוד איך לארח את הוויזואליזציה.