# יצירת ויזואליזציות משמעותיות | ](../../sketchnotes/13-MeaningfulViz.png)| |:---:| | ויזואליזציות משמעותיות - _סקצ'נוט מאת [@nitya](https://twitter.com/nitya)_ | > "אם תענה את הנתונים מספיק זמן, הם יודו בכל דבר" -- [רונלד קואז](https://en.wikiquote.org/wiki/Ronald_Coase) אחת המיומנויות הבסיסיות של מדען נתונים היא היכולת ליצור ויזואליזציה משמעותית של נתונים שמסייעת לענות על שאלות שעולות. לפני שתתחיל ליצור ויזואליזציה לנתונים שלך, עליך לוודא שהם נוקו והוכנו, כפי שעשית בשיעורים הקודמים. לאחר מכן, תוכל להתחיל להחליט כיצד להציג את הנתונים בצורה הטובה ביותר. בשיעור זה תסקור: 1. כיצד לבחור את סוג התרשים הנכון 2. כיצד להימנע מתרשימים מטעים 3. כיצד לעבוד עם צבעים 4. כיצד לעצב את התרשימים שלך לקריאות טובה יותר 5. כיצד ליצור פתרונות תרשימים מונפשים או תלת-ממדיים 6. כיצד ליצור ויזואליזציה יצירתית ## [מבחן מקדים לשיעור](https://ff-quizzes.netlify.app/en/ds/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) בנתונים. חשוב להבין עד כמה קל להטעות את העין באמצעות תרשימים מטעים. גם אם כוונת מדען הנתונים טובה, בחירת סוג תרשים גרוע, כמו תרשים עוגה שמציג יותר מדי קטגוריות, יכולה להיות מטעה. ## צבעים ראית בתרשים 'אלימות נשק בפלורידה' כיצד צבע יכול להוסיף שכבה נוספת של משמעות לתרשימים, במיוחד כאלה שלא עוצבו באמצעות ספריות כמו Matplotlib ו-Seaborn שמגיעות עם ספריות צבעים ופלטות מאומתות. אם אתה יוצר תרשים באופן ידני, למד מעט על [תורת הצבעים](https://colormatters.com/color-and-design/basic-color-theory) > ✅ היה מודע לכך שבעיצוב תרשימים, נגישות היא היבט חשוב של ויזואליזציה. חלק מהמשתמשים שלך עשויים להיות עיוורי צבעים - האם התרשים שלך מוצג היטב עבור משתמשים עם לקויות ראייה? היה זהיר בבחירת צבעים לתרשים שלך, שכן צבע יכול להעביר משמעות שאולי לא התכוונת אליה. 'הנשים הוורודות' בתרשים 'גובה' למעלה מעבירות משמעות 'נשית' מובהקת שמוסיפה למוזרות של התרשים עצמו. בעוד ש[משמעות הצבעים](https://colormatters.com/color-symbolism/the-meanings-of-colors) עשויה להיות שונה בחלקים שונים של העולם, והיא נוטה להשתנות בהתאם לגוון שלה. באופן כללי, משמעויות הצבעים כוללות: | צבע | משמעות | | ------ | ------------------- | | אדום | כוח | | כחול | אמון, נאמנות | | צהוב | שמחה, זהירות | | ירוק | אקולוגיה, מזל, קנאה | | סגול | שמחה | | כתום | חיוניות | אם אתה מתבקש ליצור תרשים עם צבעים מותאמים אישית, ודא שהתרשימים שלך גם נגישים וגם שהצבע שבחרת תואם את המשמעות שאתה מנסה להעביר. ## עיצוב התרשימים שלך לקריאות תרשימים אינם משמעותיים אם הם אינם קריאים! הקדש רגע לשקול עיצוב רוחב וגובה התרשים שלך כך שיתאים היטב לנתונים שלך. אם משתנה אחד (כמו כל 50 המדינות) צריך להיות מוצג, הצג אותם אנכית על ציר ה-Y אם אפשר כדי להימנע מתרשים שדורש גלילה אופקית. תייג את הצירים שלך, ספק מקרא אם יש צורך, והצע טיפים לשיפור הבנת הנתונים. אם הנתונים שלך טקסטואליים ומפורטים על ציר ה-X, תוכל להטות את הטקסט לקריאות טובה יותר. [Matplotlib](https://matplotlib.org/stable/tutorials/toolkits/mplot3d.html) מציע גרפים תלת-ממדיים אם הנתונים שלך תומכים בכך. ניתן ליצור ויזואליזציות מתקדמות באמצעות `mpl_toolkits.mplot3d`.  ## אנימציה ותצוגת תרשימים תלת-ממדיים חלק מהויזואליזציות הטובות ביותר כיום הן מונפשות. שירלי וו יצרה ויזואליזציות מדהימות עם 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://ff-quizzes.netlify.app/en/ds/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). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפתו המקורית נחשב למקור הסמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי בני אדם. איננו נושאים באחריות לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.