|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "b4039f1c76548d144a0aee0bf28304ec",
|
|
|
"translation_date": "2025-08-28T15:36:30+00:00",
|
|
|
"source_file": "3-Data-Visualization/R/13-meaningful-vizualizations/README.md",
|
|
|
"language_code": "he"
|
|
|
}
|
|
|
-->
|
|
|
# יצירת ויזואליזציות משמעותיות
|
|
|
|
|
|
| ](../../../sketchnotes/13-MeaningfulViz.png)|
|
|
|
|:---:|
|
|
|
| ויזואליזציות משמעותיות - _סקצ'נוט מאת [@nitya](https://twitter.com/nitya)_ |
|
|
|
|
|
|
> "אם תענה את הנתונים מספיק זמן, הם יתוודו על כל דבר" -- [רונלד קואז](https://en.wikiquote.org/wiki/Ronald_Coase)
|
|
|
|
|
|
אחת המיומנויות הבסיסיות של מדען נתונים היא היכולת ליצור ויזואליזציה משמעותית של נתונים שמסייעת לענות על שאלות שעולות. לפני שתתחיל ליצור ויזואליזציה של הנתונים שלך, עליך לוודא שהם נוקו והוכנו, כפי שעשית בשיעורים הקודמים. לאחר מכן, תוכל להתחיל להחליט כיצד להציג את הנתונים בצורה הטובה ביותר.
|
|
|
|
|
|
בשיעור זה תסקור:
|
|
|
|
|
|
1. כיצד לבחור את סוג התרשים הנכון
|
|
|
2. כיצד להימנע מתרשימים מטעים
|
|
|
3. כיצד לעבוד עם צבע
|
|
|
4. כיצד לעצב את התרשימים שלך לקריאות טובה יותר
|
|
|
5. כיצד ליצור פתרונות תרשימים מונפשים או תלת-ממדיים
|
|
|
6. כיצד ליצור ויזואליזציה יצירתית
|
|
|
|
|
|
## [מבחן מקדים לשיעור](https://purple-hill-04aebfb03.1.azurestaticapps.net/quiz/24)
|
|
|
|
|
|
## בחירת סוג התרשים הנכון
|
|
|
|
|
|
בשיעורים קודמים התנסית ביצירת כל מיני ויזואליזציות נתונים מעניינות באמצעות Matplotlib ו-Seaborn. באופן כללי, תוכל לבחור את [סוג התרשים הנכון](https://chartio.com/learn/charts/how-to-select-a-data-vizualization/) לשאלה שאתה שואל באמצעות הטבלה הבאה:
|
|
|
|
|
|
| מה אתה צריך לעשות: | מה כדאי להשתמש: |
|
|
|
| -------------------------- | ------------------------------- |
|
|
|
| להציג מגמות נתונים לאורך זמן | קו |
|
|
|
| להשוות קטגוריות | עמודות, עוגה |
|
|
|
| להשוות סך הכל | עוגה, עמודות מוערמות |
|
|
|
| להציג קשרים | פיזור, קו, פן, קו כפול |
|
|
|
| להציג התפלגויות | פיזור, היסטוגרמה, קופסה |
|
|
|
| להציג פרופורציות | עוגה, דונאט, וופל |
|
|
|
|
|
|
> ✅ בהתאם להרכב הנתונים שלך, ייתכן שתצטרך להמיר אותם מטקסט למספרים כדי שתרשים מסוים יתמוך בהם.
|
|
|
|
|
|
## הימנעות מהטעיה
|
|
|
|
|
|
גם אם מדען נתונים מקפיד לבחור את התרשים הנכון לנתונים הנכונים, יש דרכים רבות שבהן ניתן להציג נתונים באופן שמוכיח נקודה, לעיתים על חשבון הנתונים עצמם. ישנם דוגמאות רבות לתרשימים ואינפוגרפיקות מטעים!
|
|
|
|
|
|
[](https://www.youtube.com/watch?v=oX74Nge8Wkw "איך תרשימים משקרים")
|
|
|
|
|
|
> 🎥 לחץ על התמונה למעלה להרצאה על תרשימים מטעים
|
|
|
|
|
|
התרשים הזה הופך את ציר ה-X כדי להציג את ההפך מהאמת, בהתבסס על תאריך:
|
|
|
|
|
|
|
|
|
|
|
|
[התרשים הזה](https://media.firstcoastnews.com/assets/WTLV/images/170ae16f-4643-438f-b689-50d66ca6a8d8/170ae16f-4643-438f-b689-50d66ca6a8d8_1140x641.jpg) אפילו יותר מטעה, שכן העין נמשכת ימינה כדי להסיק שבמהלך הזמן, מקרי הקורונה ירדו במחוזות השונים. למעשה, אם תסתכל מקרוב על התאריכים, תמצא שהם סודרו מחדש כדי ליצור מגמת ירידה מטעה.
|
|
|
|
|
|
|
|
|
|
|
|
הדוגמה הידועה הזו משתמשת בצבע ובציר Y הפוך כדי להטעות: במקום להסיק שמקרי המוות מנשק עלו לאחר חקיקת חוקים ידידותיים לנשק, למעשה העין מתעתעת לחשוב שההפך הוא הנכון:
|
|
|
|
|
|
|
|
|
|
|
|
התרשים המוזר הזה מראה כיצד ניתן לתמרן פרופורציות, בצורה משעשעת:
|
|
|
|
|
|
|
|
|
|
|
|
השוואת דברים שאינם ברי השוואה היא עוד טריק מפוקפק. ישנו [אתר נפלא](https://tylervigen.com/spurious-correlations) שמציג 'קורלציות שגויות' עם 'עובדות' שמקשרות בין דברים כמו שיעור הגירושין במיין לצריכת מרגרינה. קבוצת Reddit גם אוספת את [השימושים המכוערים](https://www.reddit.com/r/dataisugly/top/?t=all) בנתונים.
|
|
|
|
|
|
חשוב להבין כמה קל להטעות את העין באמצעות תרשימים מטעים. גם אם כוונת מדען הנתונים טובה, בחירת סוג תרשים גרוע, כמו תרשים עוגה שמציג יותר מדי קטגוריות, יכולה להיות מטעה.
|
|
|
|
|
|
## צבע
|
|
|
|
|
|
ראית בתרשים 'אלימות נשק בפלורידה' כיצד צבע יכול להוסיף שכבה נוספת של משמעות לתרשימים, במיוחד כאלה שלא עוצבו באמצעות ספריות כמו ggplot2 ו-RColorBrewer שמגיעות עם ספריות צבע ופלטות מאושרות. אם אתה יוצר תרשים באופן ידני, למד מעט על [תורת הצבעים](https://colormatters.com/color-and-design/basic-color-theory)
|
|
|
|
|
|
> ✅ היה מודע לכך שבעיצוב תרשימים, נגישות היא היבט חשוב של ויזואליזציה. חלק מהמשתמשים שלך עשויים להיות עיוורי צבעים - האם התרשים שלך מוצג היטב עבור משתמשים עם לקויות ראייה?
|
|
|
|
|
|
היה זהיר בבחירת צבעים לתרשים שלך, שכן צבע יכול להעביר משמעות שאולי לא התכוונת אליה. ה'נשים הוורודות' בתרשים 'גובה' למעלה מעבירות משמעות נשית מובהקת שמוסיפה למוזרות של התרשים עצמו.
|
|
|
|
|
|
בעוד ש[משמעות הצבעים](https://colormatters.com/color-symbolism/the-meanings-of-colors) עשויה להיות שונה בחלקים שונים של העולם, והיא נוטה להשתנות בהתאם לגוון שלה. באופן כללי, משמעויות הצבעים כוללות:
|
|
|
|
|
|
| צבע | משמעות |
|
|
|
| ------ | ------------------- |
|
|
|
| אדום | כוח |
|
|
|
| כחול | אמון, נאמנות |
|
|
|
| צהוב | אושר, זהירות |
|
|
|
| ירוק | אקולוגיה, מזל, קנאה |
|
|
|
| סגול | אושר |
|
|
|
| כתום | חיוניות |
|
|
|
|
|
|
אם אתה מתבקש ליצור תרשים עם צבעים מותאמים אישית, ודא שהתרשימים שלך גם נגישים וגם שהצבע שבחרת תואם את המשמעות שאתה מנסה להעביר.
|
|
|
|
|
|
## עיצוב התרשימים שלך לקריאות טובה
|
|
|
|
|
|
תרשימים אינם משמעותיים אם הם אינם קריאים! הקדש רגע לשקול עיצוב רוחב וגובה התרשים שלך כך שיתאים היטב לנתונים שלך. אם משתנה אחד (כמו כל 50 המדינות) צריך להיות מוצג, הצג אותם אנכית על ציר ה-Y אם אפשר כדי להימנע מתרשים שדורש גלילה אופקית.
|
|
|
|
|
|
תייג את הצירים שלך, ספק מקרא אם יש צורך, והצע טיפים לשיפור הבנת הנתונים.
|
|
|
|
|
|
אם הנתונים שלך הם טקסטואליים ומפורטים בציר ה-X, תוכל להטות את הטקסט לקריאות טובה יותר. [plot3D](https://cran.r-project.org/web/packages/plot3D/index.html) מציע גרפים תלת-ממדיים, אם הנתונים שלך תומכים בכך. ניתן ליצור ויזואליזציות מתוחכמות באמצעותו.
|
|
|
|
|
|
|
|
|
|
|
|
## אנימציה ותצוגת תרשימים תלת-ממדיים
|
|
|
|
|
|
חלק מהויזואליזציות הטובות ביותר כיום הן מונפשות. שירלי וו יצרה ויזואליזציות מדהימות עם D3, כמו '[פרחי סרטים](http://bl.ocks.org/sxywu/raw/d612c6c653fb8b4d7ff3d422be164a5d/)', שבה כל פרח הוא ויזואליזציה של סרט. דוגמה נוספת עבור ה-Guardian היא 'בוסס החוצה', חוויה אינטראקטיבית שמשלבת ויזואליזציות עם Greensock ו-D3 יחד עם פורמט מאמר סקרוליטלי כדי להראות כיצד ניו יורק מתמודדת עם בעיית חסרי הבית שלה על ידי שליחת אנשים מחוץ לעיר.
|
|
|
|
|
|
|
|
|
|
|
|
> "בוסס החוצה: כיצד אמריקה מזיזה את חסרי הבית שלה" מתוך [הגרדיאן](https://www.theguardian.com/us-news/ng-interactive/2017/dec/20/bussed-out-america-moves-homeless-people-country-study). ויזואליזציות מאת נדיה ברמר ושירלי וו
|
|
|
|
|
|
בעוד שהשיעור הזה אינו מספיק כדי להיכנס לעומק וללמד את הספריות החזקות הללו לויזואליזציה, נסה את ידך ב-D3 באפליקציית Vue.js באמצעות ספרייה להצגת ויזואליזציה של הספר "יחסים מסוכנים" כרשת חברתית מונפשת.
|
|
|
|
|
|
> "יחסים מסוכנים" הוא רומן אפיסטולרי, או רומן שמוצג כסדרה של מכתבים. נכתב בשנת 1782 על ידי שודרלו דה לאקלו, הוא מספר את סיפורם של המהלכים החברתיים המרושעים והמוסריים של שני גיבורים יריבים באריסטוקרטיה הצרפתית בסוף המאה ה-18, הוויקונט דה ואלמונט והמרקיזה דה מרטיי. שניהם מוצאים את סופם בסוף אך לא לפני שהם גורמים לנזק חברתי רב. הרומן מתפתח כסדרה של מכתבים שנכתבו לאנשים שונים במעגלים שלהם, מתכננים נקמה או פשוט כדי ליצור צרות. צור ויזואליזציה של המכתבים הללו כדי לגלות את הדמויות המרכזיות של הנרטיב, באופן חזותי.
|
|
|
|
|
|
תשלים אפליקציית ווב שתציג תצוגה מונפשת של הרשת החברתית הזו. היא משתמשת בספרייה שנבנתה כדי ליצור [ויזואליזציה של רשת](https://github.com/emiliorizzo/vue-d3-network) באמצעות Vue.js ו-D3. כשהאפליקציה פועלת, תוכל להזיז את הצמתים על המסך כדי לשנות את סידור הנתונים.
|
|
|
|
|
|
|
|
|
|
|
|
## פרויקט: צור תרשים להצגת רשת באמצעות D3.js
|
|
|
|
|
|
> תיקיית השיעור כוללת תיקיית `solution` שבה תוכל למצוא את הפרויקט המושלם, לעיונך.
|
|
|
|
|
|
1. עקוב אחר ההוראות בקובץ README.md בתיקיית השורש של תיקיית ההתחלה. ודא שיש לך NPM ו-Node.js פועלים במחשב שלך לפני התקנת התלויות של הפרויקט שלך.
|
|
|
|
|
|
2. פתח את התיקייה `starter/src`. תגלה תיקיית `assets` שבה תוכל למצוא קובץ .json עם כל המכתבים מהרומן, ממוספרים, עם הערות 'אל' ו'מ'.
|
|
|
|
|
|
3. השלם את הקוד ב-`components/Nodes.vue` כדי לאפשר את הויזואליזציה. חפש את השיטה שנקראת `createLinks()` והוסף את הלולאה המקוננת הבאה.
|
|
|
|
|
|
לולאה דרך אובייקט ה-.json כדי ללכוד את נתוני 'אל' ו'מ' עבור המכתבים ולבנות את אובייקט `links` כך שספריית הויזואליזציה תוכל לצרוך אותו:
|
|
|
|
|
|
```javascript
|
|
|
//loop through letters
|
|
|
let f = 0;
|
|
|
let t = 0;
|
|
|
for (var i = 0; i < letters.length; i++) {
|
|
|
for (var j = 0; j < characters.length; j++) {
|
|
|
|
|
|
if (characters[j] == letters[i].from) {
|
|
|
f = j;
|
|
|
}
|
|
|
if (characters[j] == letters[i].to) {
|
|
|
t = j;
|
|
|
}
|
|
|
}
|
|
|
this.links.push({ sid: f, tid: t });
|
|
|
}
|
|
|
```
|
|
|
|
|
|
הרץ את האפליקציה שלך מהטרמינל (npm run serve) ותהנה מהויזואליזציה!
|
|
|
|
|
|
## 🚀 אתגר
|
|
|
|
|
|
צא לסיור באינטרנט כדי לגלות ויזואליזציות מטעים. כיצד המחבר מטעה את המשתמש, והאם זה מכוון? נסה לתקן את הויזואליזציות כדי להראות כיצד הן אמורות להיראות.
|
|
|
|
|
|
## [מבחן מסכם לשיעור](https://purple-hill-04aebfb03.1.azurestaticapps.net/quiz/25)
|
|
|
|
|
|
## סקירה ולימוד עצמי
|
|
|
|
|
|
הנה כמה מאמרים לקריאה על ויזואליזציות נתונים מטעים:
|
|
|
|
|
|
https://gizmodo.com/how-to-lie-with-data-visualization-1563576606
|
|
|
|
|
|
http://ixd.prattsi.org/2017/12/visual-lies-usability-in-deceptive-data-visualizations/
|
|
|
|
|
|
עיין בויזואליזציות מעניינות לנכסים והיסטוריה:
|
|
|
|
|
|
https://handbook.pubpub.org/
|
|
|
|
|
|
עיין במאמר זה על איך אנימציה יכולה לשפר את הויזואליזציות שלך:
|
|
|
|
|
|
https://medium.com/@EvanSinar/use-animation-to-supercharge-data-visualization-cd905a882ad4
|
|
|
|
|
|
## משימה
|
|
|
|
|
|
[צור ויזואליזציה מותאמת אישית משלך](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**כתב ויתור**:
|
|
|
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית נחשב למקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי מתרגם אנושי. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה. |
