1. מבוא
Data Studio מאפשר לכם ליצור בחינם מרכזי בקרה אינטראקטיביים בזמן אמת עם תרשימים וטבלאות יפים של הנתונים. אפשר לאחזר נתונים ממגוון מקורות וליצור מספר בלתי מוגבל של דוחות ב-Data Studio, עם אפשרויות עריכה ושיתוף מלאות. צילום המסך הבא מציג דוגמה לדוח ב-Data Studio:
( כאן אפשר לראות דוגמה לדוח ב-Data Studio)
ב-Data Studio יש כמה סוגים מובנים של תרשימים, כולל תרשימי קו, תרשימי עמודות, תרשימי עוגה ותרשימי פיזור. סוגי ויזואליזציה במאגר הקהילה מאפשרים לכם ליצור ולהשתמש בסוגי ויזואליזציה מותאמים אישית של JavaScript ב-Data Studio. אתם יכולים גם לשתף את התרשימים הקהילתיים שלכם עם אחרים, כדי שהם יוכלו להשתמש בהם עם הנתונים שלהם.
מה תלמדו
בשיעור ה-Lab הזה תלמדו:
- איך פועלת ויזואליזציית נתונים במאגר הקהילה ב-Data Studio.
- איך ליצור סוג ויזואליזציית נתונים במאגר הקהילה (community visualization) באמצעות ספריית העזר ds-component (dscc).
- איך משתמשים בהמחשה של הקהילה בדוח של Data Studio.
הדרישות
כדי להשלים את שיעור ה-Lab הזה, תצטרכו:
- גישה לאינטרנט ולדפדפן אינטרנט.
- חשבון Google.
- גישה לקטגוריית אחסון ב-Google Cloud Platform.
- היכרות עם JavaScript.
2. סקר קצר
למה בחרת ב-Codelab הזה?
איך תשתמש ב-codelab או במדריך הזה?
איזה דירוג מגיע לדעתך לחוויית השימוש שלך ב-Data Studio?
מהו התיאור הטוב ביותר של הרקע שלך?
באילו ספריות של JavaScript לתרשימי נתונים היית רוצה להשתמש?
עוברים לדף הבא כדי לשלוח את פרטי הסקר.
3. סקירה כללית של תרשימים קהילתיים
בעזרת המחשות חזותיות ממאגר הקהילה ב-Data Studio, אתם יכולים ליצור ולהשתמש בהמחשות חזותיות מותאמות אישית של JavaScript בלוחות הבקרה שלכם.
ב-codelab הזה תיצרו תרשים טבלה של תצוגה חזותית קהילתית שתומכת במאפיין אחד, במדד אחד ובעיצוב של כותרת הטבלה.
4. תהליך העבודה לפיתוח המחשה ויזואלית של נתונים בקהילה
כדי ליצור תרשים קהילתי, צריך את הקבצים הבאים בקטגוריית אחסון ב-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 מהדף Data 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. הערה: לא סביר שתחויבו בעלויות על אחסון הוויזואליזציה שלכם בסוג האחסון 'Regional Storage'.
שלב 3: רושמים את שם הקטגוריה או הנתיב שלה, החל מהקטע שאחרי Buckets/. הנתיב נקרא 'מזהה רכיב' ב-Data 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": "Data 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. בדיקה של סוג ויזואליזציית נתונים במאגר הקהילה ב-Data Studio
יצירת דוח והוספת נתונים
שלב 1: מעתיקים את כתובת ה-URL של ערכת נתוני הדוגמה של התרשים לקהילה. אפשר גם להשתמש במקור נתונים אחר שרוצים ולדלג על השלבים הבאים.
שלב 2: נכנסים ל-Data 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 (הוספה לדוח). נוצר דוח ללא שם ונוספת לדוח טבלה שמוגדרת כברירת מחדל עם נתונים לדוגמה. אפשר גם לבחור את טבלת ברירת המחדל ולמחוק אותה כדי לקבל דוח ריק.
הוספת הוויזואליזציה הקהילתית לדוח
שלב 1: בסרגל הכלים, לוחצים על סמל ההדמיה והרכיבים של הקהילה 
.
שלב 2: לוחצים על + Explore more (עולם תוכן מורחב) כדי לפתוח את גלריית הקהילה.
שלב 3: לוחצים על יצירת תרשים משלכם.
שלב 4: בקטע Test and add your community visualization (בדיקה והוספה של אמצעי ההמחשה של הקהילה), מזינים את נתיב המניפסט ולוחצים על Submit (שליחה). נתיב המניפסט הוא השם והנתיב של קטגוריה של 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: מרעננים את הדוח ב-Data Studio כדי לטעון מחדש את הוויזואליזציה של הקהילה ולבדוק אותה. הטבלה מציגה עכשיו את הנתונים (כלומר, את גיליון Google) ואת עמודות הכותרת על סמך המאפיין והמדד שנבחרו. משנים את הגודל של התצוגה החזותית כדי לראות את כל השורות.
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: מרעננים את הדוח ב-Data Studio כדי לטעון מחדש את הוויזואליזציה של הקהילה ולבדוק אותה.
שלב 4: בחלונית סגנון, משתמשים באמצעי הבקרה צבע הרקע של הכותרת כדי לשנות את צבע הרקע של כותרת הטבלה.
מעולה! יצרתם סוג ויזואליזציית נתונים במאגר הקהילה (community visualization) ב-Data Studio. כאן מסתיים ה-Codelab הזה. עכשיו נראה מה השלבים הבאים שאתם יכולים לבצע.
14. השלבים הבאים
הרחבת התצוגה החזותית
- מידע נוסף על הנתונים והפורמטים שזמינים להדמיה.
- מידע נוסף על רכיבי סגנון זמינים והוספת סגנון נוסף להדמיה
- הוספת אינטראקציות להצגה החזותית
- איך מפתחים ויזואליזציה באופן מקומי
עוד פעולות שאפשר לבצע בעזרת תרשימים של הקהילה
- כדאי לעיין בהפניות ל- dscc helper library, ל- manifest ול- configuration file.
- שולחים את התצוגה החזותית לגלריה של תצוגות חזותיות של הקהילה.
- יצירת מחבר קהילה ל-Data Studio.
מקורות מידע נוספים
בהמשך מפורטים מקורות מידע שונים שאפשר לגשת אליהם כדי להעמיק בחומר שמוצג ב-codelab הזה.
סוג משאב | תכונות למשתמשים | תכונות למפתחים |
מסמכי תיעוד | ||
חדשות ועדכונים | נרשמים ב-Data Studio > הגדרות משתמש | |
שאלות | ||
דוגמאות |