יצירת המחשות חזותיות בהתאמה אישית ב-Looker Studio

1. מבוא

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

( כאן אפשר ללחוץ כדי לראות את הדוח לדוגמה הזה ב-Looker Studio)

ב-Looker Studio יש כמה סוגי תרשימים מובנים, כולל תרשימי קו, תרשימי עמודות, תרשימי עוגה ותרשימי פיזור. המחשות חזותיות של הקהילה מאפשרות לכם ליצור ולהשתמש בהמחשות חזותיות מותאמות אישית ב-JavaScript ב-Looker Studio. אתם יכולים גם לשתף את התרשימים הקהילתיים שלכם עם אחרים כדי שהם יוכלו להשתמש בהם עם הנתונים שלהם.

מה תלמדו

בשיעור ה-Lab הזה תלמדו:

איך פועלת סוג ויזואליזציית נתונים במאגר הקהילה (community visualization) ב-Looker Studio.
איך יוצרים סוג ויזואליזציית נתונים במאגר הקהילה (community visualization) באמצעות ספריית העזר ds-component (dscc).
איך משתמשים בסוג ויזואליזציית נתונים במאגר הקהילה (community visualization) בדוח Looker Studio.

הדרישות

כדי להשלים את שיעור ה-Lab הזה, תצטרכו:

גישה לאינטרנט ולדפדפן אינטרנט.
חשבון Google.
גישה לקטגוריית אחסון ב-Google Cloud Platform.
היכרות עם JavaScript.

2. סקר קצר

למה בחרת ב-Codelab הזה?

אני מתעניין בהמחשת נתונים באופן כללי.

אני רוצה לקבל מידע נוסף על Looker Studio.

אני רוצה ליצור תצוגה חזותית משלי לקהילה.

אני מנסה לשלב את Looker Studio עם פלטפורמה אחרת.

אני רוצה לקבל מידע על פתרונות של Google Cloud.

איך תשתמשו ב-codelab או במדריך הזה?

רפרוף בלבד.

קוראים את המאמר ומשלימים את התרגילים.

איזה דירוג מגיע לדעתך לחוויית השימוש שלך ב-Looker Studio?

אף פעם לא שמעתי על זה.

אני יודע מה זה אבל לא משתמש בזה.

אני משתמש בו מדי פעם.

אני משתמש בו באופן קבוע.

אני משתמש מומחה.

מה מתאר את הרקע שלך בצורה הטובה ביותר?

מפתח.

מעצב / מומחה UX.

מנתח נתונים עסקיים / מנתח נתונים / מנתח פיננסי.

מדעני נתונים / מהנדסי נתונים.

מומחה לשיווק / מדיה חברתית / ניתוח נתונים בדיגיטל.

אחר

באילו ספריות של JavaScript להדמיה היית רוצה להשתמש?

D3.js

Google Charts

Chart.js

Leaflet

Highcharts

Plot.ly

Other

עוברים לדף הבא כדי לשלוח את פרטי הסקר.

3. סקירה כללית של תרשימים קהילתיים

הייצוגים הוויזואליים של הקהילה ב-Looker Studio מאפשרים לכם ליצור ייצוגים ויזואליים מותאמים אישית ב-JavaScript ולהשתמש בהם בלוחות הבקרה.

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

4. תהליך העבודה לפיתוח סוג ויזואליזציית נתונים במאגר הקהילה (community visualization)

כדי ליצור סוג ויזואליזציית נתונים במאגר הקהילה (community visualization), צריך את הקבצים הבאים בקטגוריית אחסון ב-Google Cloud Platform, שתיצרו בשלב מאוחר יותר:

שם קובץ	סוג קובץ	מטרה
manifest.json*	JSON	מטא-נתונים על ההמחשה ועל המיקומים של כל משאבי ההמחשה.
viz-codelab.json	JSON	אפשרויות להגדרת נתונים וסגנון בחלונית 'מאפיינים'.
viz-codelab.js	JavaScript	קוד ה-JavaScript לעיבוד התצוגה החזותית.
viz-codelab.css (אופציונלי)	CSS	סגנונות CSS לתצוגה החזותית.

*המניפסט הוא הקובץ היחיד שחובה להזין לו שם. אפשר לתת לקבצים האחרים שמות שונים, כל עוד השם או המיקום שלהם מצוינים בקובץ המניפסט.

5. כתיבת תרשים של 'שלום עולם!'

בקטע הזה, תוסיפו את הקוד שנדרש כדי לעבד תצוגה חזותית פשוטה של Hello, world!.

כתיבת מקור ה-JavaScript של הוויזואליזציה

שלב 1: מורידים את הקובץ dscc.min.js מהדף Looker Studio Community Component Library (dscc) ומעתיקים אותו לספריית העבודה.

שלב 2: מעתיקים את הקוד הבא לעורך טקסט ושומרים אותו כ-viz-codelab-src.js בספריית העבודה המקומית.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Render the viz.
  container.textContent = 'Hello, viz world!';

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

הכנת קובץ חבילת JavaScript

שלב 3: משלבים את כל קוד ה-JavaScript הנדרש בקובץ אחד על ידי העתקת התוכן של ספריית העזר להמחשה (dscc.min.js) ושל קובץ viz-codelab-src.js לקובץ חדש בשם viz-codelab.js. אפשר להריץ את הפקודות הבאות כדי לשרשר את הקבצים. צריך לחזור על השלב הזה בכל פעם שמעדכנים את קוד הוויזואליזציה של המקור.

סקריפט שרשור ל-Linux/Mac OS

cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js

סקריפט שרשור של Windows

del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js

6. כתיבת ה-CSS של ההמחשה

קובץ ה-CSS מגדיר את הסגנון של הוויזואליזציה, והוא אופציונלי. מעתיקים את ה-CSS הבא ושומרים אותו כ-viz-codelab.css.

viz-codelab.css

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1pt solid #d1d1d1;
}

th, td {
    padding: 8px;
    text-align: left;
}

7. כתיבת קובץ ההגדרות בפורמט JSON

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

מעתיקים את הקוד הבא ושומרים אותו כקובץ viz-codelab.json.כדי לקבל מידע נוסף על המאפיינים שאפשר להגדיר, אפשר לעיין בחומר העזר בנושא הגדרות של תרשימים קהילתיים.

viz-codelab.json

{
    "data": [
        {
            "id": "concepts",
            "label": "Concepts",
            "elements": [
                {
                    "id": "tableDimension",
                    "label": "Dimension",
                    "type": "DIMENSION",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                },
                {
                    "id": "tableMetric",
                    "label": "Metric",
                    "type": "METRIC",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                }
            ]
        }
    ],
    "style": [
        {
            "id": "header",
            "label": "Table Header",
            "elements": [
                {
                    "type": "FILL_COLOR",
                    "id": "headerBg",
                    "label": "Header Background Color",
                    "defaultValue": "#e0e0e0"
                }
            ]
        }
    ]
}

8. יצירת פרויקט וקטגוריה של אחסון בענן

שלב 1: יוצרים פרויקט ב-Google Cloud Platform ‏ (GCP) או משתמשים בפרויקט קיים.

שלב 2: יוצרים bucket ב-GCP. סוג האחסון המומלץ הוא Regional. במאמר תמחור של Cloud Storage מפורטות רמות התמחור בחינם. הערה: לא סביר שתחויבו בעלויות על אחסון הוויזואליזציה שלכם בסוג האחסון 'אזורי'.

שלב 3: רושמים את שם הקטגוריה או הנתיב שלה, החל מהקטע שאחרי Buckets/‎. הנתיב נקרא 'מזהה רכיב' ב-Looker Studio והוא משמש לזיהוי ולהטמעה של תצוגה חזותית.

9. כתיבת קובץ manifest.json

קובץ המניפסט מספק מידע על המיקום והמשאבים של הוויזואליזציה. השם שלו חייב להיות manifest.json, והוא חייב להיות ממוקם בקטגוריה או בנתיב שנוצרו בשלב הקודם, אותו נתיב שבו השתמשתם למזהה הרכיב.

מעתיקים את הקוד הבא לעורך טקסט ושומרים אותו בשם manifest.json.

מידע נוסף על המניפסט מופיע במאמר בנושא מניפסט.

manifest.json

{
    "name": "Community Visualization",
    "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
    "organization": "Looker Studio Codelab",
    "organizationUrl": "https://url",
    "termsOfServiceUrl": "https://url",
    "supportUrl": "https://url",
    "packageUrl": "https://url",
    "privacyPolicyUrl": "https://url",
    "description": "Community Visualization Codelab",
    "devMode": true,
    "components": [
        {
            "id": "tableChart",
            "name": "Table",
            "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
            "description": "A simple table chart.",
            "resource": {
                "js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
                "config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
                "css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
            }
        }
    ]
}

10. העלאת קובצי ההדמיה ל-Google Cloud Storage

מעלים את הקבצים manifest.json, viz-codelab.js, viz-codelab.json ו-viz-codelab.css לקטגוריה של Cloud Storage באמצעות ממשק האינטרנט או כלי שורת הפקודה gsutil. חוזרים על הפעולה בכל פעם שמעדכנים את התרשים.

פקודות העלאה של gsutil

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

11. בדיקת ההמחשה החזותית לקהילה ב-Looker Studio

יצירת דוח והוספת נתונים

שלב 1: מעתיקים את כתובת ה-URL של ערכת נתוני הדוגמה של התרשים לקהילה. אפשר גם להשתמש במקור נתונים אחר שאתם מעדיפים ולדלג על השלבים הבאים.

שלב 2: נכנסים ל-Looker Studio. בפינה הימנית העליונה, לוחצים על + יצירה ובוחרים באפשרות דוח.

שלב 3: יוצג הכלי לעריכת דוחות, והחלונית הוספת נתונים לדוח תהיה פתוחה.

שלב 4: בכרטיסייה Connect to data (התחברות לנתונים), בוחרים את המחבר Google Sheets by Google (Google Sheets מבית Google).

שלב 5: בוחרים באפשרות כתובת URL ומדביקים את כתובת ה-URL של גיליון Google Sheets משלב 1.

שלב 6: בפינה השמאלית התחתונה, לוחצים על הוספה.

שלב 7: אם מוצגת בקשה לאישור You are about to add data to this report (אתם עומדים להוסיף נתונים לדוח הזה), לוחצים על ADD TO REPORT (הוספה לדוח). נוצר דוח ללא שם ונוספת לדוח טבלה עם נתוני דוגמה. אפשר גם לבחור את טבלת ברירת המחדל ולמחוק אותה כדי לקבל דוח ריק.

הוספת סוג ויזואליזציית נתונים במאגר הקהילה (community visualization) לדוח

שלב 1: בסרגל הכלים, לוחצים על סמל ההדמיה והרכיבים של הקהילה .

שלב 2: לוחצים על + עולם תוכן מורחב כדי לפתוח את גלריית התבניות של הקהילה.

שלב 3: לוחצים על יצירת תרשים משלכם.

שלב 4: בקטע Test and add your community visualization (בדיקה והוספה של אמצעי ההמחשה של הקהילה), מזינים את נתיב המניפסט ולוחצים על Submit (שליחה). נתיב המניפסט הוא השם והנתיב של קטגוריה של Cloud Storage ב-Google Cloud Storage שמפנים למיקום של המניפסט של הוויזואליזציה, עם הקידומת gs://.. לדוגמה: gs://community-viz-docs/viz-codelab. אם הזנתם נתיב מניפסט תקין, כרטיס ההצגה החזותית אמור להופיע.

שלב 5: לוחצים על כרטיס הוויזואליזציה כדי להוסיף אותו לדוח.

שלב 6: אם מתבקשים, נותנים את ההסכמה כדי לאפשר את הצגת התרשים.

שלב 7: אפשר לעדכן את המאפיין והמדד שנבחרו עבור הטבלה. אם אתם משתמשים במערך נתוני הדוגמה שסיפקנו, מגדירים את המאפיין למדינה ואת המדד לאוכלוסייה. הפעולה הזו לא תשפיע על ההדמיה עד לשלב מאוחר יותר ב-codelab.

בחלונית המאפיינים בצד שמאל מוצגים הרכיבים שהוגדרו ב-viz-codelab.json.

בחלונית הגדרה, אפשר להגדיר מימד אחד ומדד אחד בתרשים להמחשה.

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

12. הצגת הנתונים כטבלה

בקטע הזה תעדכנו את התצוגה החזותית כך שיוצג מדגם של מערך נתונים של תצוגה חזותית של הקהילה כטבלה.

הנתונים לעיבוד זמינים באובייקט tables ומובנים על סמך הטרנספורמציה שצוינה על ידי הוויזואליזציה. ב-codelab הזה, התצוגה החזותית ביקשה את פורמט הטבלה (tableTransform) שכולל אובייקט headers ואובייקט rows שמכיל את כל הנתונים שדרושים לעיבוד טבלה.

שלב 1: מחליפים את התוכן של viz-codelab-src.js בקוד שבהמשך.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

שלב 2: מכינים את קובץ חבילת ה-JavaScript, ואז מעלים את קובצי הוויזואליזציה ומחליפים אותם ב-Google Cloud Storage.

שלב 3: מרעננים את הדוח ב-Looker Studio כדי לטעון מחדש ולבדוק את סוג ויזואליזציית הנתונים במאגר הקהילה (community visualization). הטבלה מציגה עכשיו את הנתונים (כלומר, את גיליון אלקטרוני ב-Google Sheets) ואת עמודות הכותרת על סמך המאפיין והמדד שנבחרו. משנים את הגודל של התצוגה החזותית כדי לראות את כל השורות.

13. החלת שינויים בסגנון באופן דינמי

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

המצב של כל רכיבי הסגנון זמין באובייקט style, שבו כל מפתח פריט מוגדר על סמך הגדרת סגנון הוויזואליזציה (viz-codelab.json). בחלק הזה, תקבלו את צבע המילוי שנבחר ותשתמשו בו כדי לעדכן את צבע הרקע של כותרת הטבלה.

שלב 1: מחליפים את הקוד בקובץ viz-codelab-src.js בקוד שלמטה.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Set header color based on style control.
  tableHeader.style.backgroundColor = data.style.headerBg.value.color;

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

שלב 2: מכינים את קובץ חבילת ה-JavaScript, ואז מעלים את קובצי הוויזואליזציה ומחליפים אותם ב-Google Cloud Storage.

שלב 3: מרעננים את הדוח ב-Looker Studio כדי לטעון מחדש ולבדוק את סוג ויזואליזציית הנתונים במאגר הקהילה (community visualization).

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

מעולה! יצרתם סוג ויזואליזציית נתונים במאגר הקהילה (community visualization) ב-Looker Studio! כאן מסתיים ה-Codelab הזה. עכשיו נבדוק מה השלבים הבאים שתוכלו לבצע.

14. השלבים הבאים

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

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

עוד פעולות שאפשר לבצע בעזרת תרשימים של הקהילה

כדאי לעיין בהפניות ל- dscc helper library, ל- manifest ול- קובץ התצורה.
שולחים את התצוגה החזותית לגלריה של תצוגות חזותיות של הקהילה.
פיתוח פלאגין חיבור למקור נתונים ל-Looker Studio.

מקורות מידע נוספים

בהמשך מפורטים מקורות מידע שונים שאפשר לגשת אליהם כדי להעמיק בחומר שמופיע ב-Codelab הזה.

סוג משאב	תכונות למשתמשים	תכונות למפתחים
מסמכי תיעוד	מרכז העזרה	מאמרי עזרה למפתחים
חדשות ועדכונים	נרשמים בLooker Studio > הגדרות משתמש	רשימת תפוצה למפתחים
שאלת שאלות	פורום משתמשים	Stack Overflow [looker-studio] פורום המפתחים של Looker Studio
דוגמאות	Report Gallery	מאגר קוד פתוח