בשנים האחרונות קרו מספר דברים מאוד מעניינים בקו התפר שבין נתונים, טכנולוגיה ועיצוב, אנחנו חיים בעולם עתיר נתונים, כמות הנתונים שנאספת ונאגרת מדי שנה גדלה בצורה מעריכית, ברור לחלוטין שהמידע והתובנות שניתן להפיק מניתוח נכון של נתונים הוא הכרחי לקבלת החלטות בכל תחומי החיים.
לרוב בני האדם יש בעיה לחלץ מידע בעל ערך מטבלאות וגיליונות אלקטרוניים. פה נכנסת לתמונה ויזואליזציה של נתונים שהיא, בבסיסה, הצגת נתונים ע”י ייצוגים גראפיים בצורה שמאפשרת למוח האנושי להבין ולנתח את המידע בצורה אינטואיטיבית וקלה. ההתפתחויות הטכנולוגיות האחרונות בעולם הווב, פיתוחן של ספריות ויזואליזציה מדהימות כמו d3.js ואחרות, נותנות כלים ויכולות לפיתוח ויזואליזציות אינטראקטיביות יפהפיות. השילוב של נתונים, טכנולוגיה, אסתטיקה, ואינטראקטיביות יוצר תחום חדש ומרתק שמתפתח בצעדי ענק, בקלות רבה ניתן למצוא היום ברשת אלפי דוגמאות למימושים יצירתיים ומהממים, כמעט בכל תחום שניתן להעלות אותו על הדעת.
זה אינו פוסט טכנולוגי, וגם לא עיצובי, מטרתו לסקור את השלבים הבסיסיים בבניית ויזואליזציה של נתונים, למעוניינים ללמוד בפועל איך משתמשים בטכנולוגיה, יש ברשת הרבה מאוד מקורות טובים ללימוד, כנקודת פתיחה אני ממליץ לקרוא סדרת הפוסטים בעברית על ספריית d3.js באתר שלנו.
את הפוסט מלווה דוגמא פשוטה שפיתחנו בArrakis שמראה את דירוג החברות המובילות בישראל במסחר ושירותים. http://www.arrakis.co.il/dataviz/duns100/.
השלב הראשון – איסוף והבניית הנתונים (dataset): במקרה שלנו, שלפנו את המידע מאתר גלובס – http://duns100.globes.co.il , מצאנו נתונים לגבי חברות בין השנים 2013-2015, את המידע שמרנו בקבצי csv, קובץ נפרד לכל שנה.
השלב השני – הנדסת הנתונים: לעיתים קרובות זהו השלב הכי מורכב בכל פרויקט של ויזואליזציה, כמעט תמיד נדרשת עבודה על מנת להכין את קבצי הנתונים לעיבוד, במקרה שלנו שמות הסקטורים בכל שנה היו מעט שונים, כמו כן היינו צריכים לשמור את הקבצים בפורמט UTF-8.
השלב השלישי – בחירת הייצוג הוויזואלי: המידע הגולמי שברשותנו כולל הרבה מאוד ממדים פר חברה, כגון: הכנסות, מכירות פר עובד, תחום, מספר עובדים ועוד, ניסינו לחשוב על המחשה ויזואלית שתיתן ביטוי למספר רב ככל האפשר של ממדים, על מנת לקבל השראה הסתכלנו בדוגמאות באתר של https://d3js.org/, לבסוף החלטנו להשתמש בדוגמא ידועה למדי של גרף בועות של Mike Bostock, הממציא d3.js, שמראה מגמות לאורך 200 שנה בתוחלת השנים הממוצעת כתלות בתל”ג של אומות העולם (https://bost.ocks.org/mike/nations/) , צורת ההמחשה הזו מאפשרת להראות בצורה ויזואלית 5 ממדים שונים פר חברה, הממדים שבחרנו להראות הם: מספר העובדים בחברה (גודל העיגול שמייצג כל חברה), הסקטור העסקי (צבע העיגול), הכנסות שנתיות (ציר ה X), ומכירות פר עובד (ציר ה Y), הממד האחרון הוא ציר הזמן (שנה), את כל שאר הנתונים פר חברה, ניתן לראות במידת הצורך בעת מעבר עם העכבר חברה מסוימת.
השלב הרביעי – מימוש: עכשיו ניגשים למימוש בפועל, מאוד בקצרה, d3, קיצור של Data Driven Document מספקת סט שלם של יכולות למניפולציות וטרנספורמציות מתמטיות על אלמנטים ב DOM, סט מגניב של יכולות מבוססות זמן לשינוי האלמנטים ב DOM ועוד…. יכולות אלו מאפשרות לפתח ויזואליזציות מורכבות בצורה מובנית ונכונה יותר.
הלוגיקה שמומשה בקוד היא דיי פשוטה, בהתחלה בונים את הצירים והמקרא, טוענים את קבצי ה CSV, פר שנה נשלפים הנתונים הרלוונטיים לטובת ציור האלמנטים, עבור כל חברה מחושב רדיוס הבועה כתלות במספר העובדים, הקואורדינטה על ציר הX מחושבת כפונקציה של הכנסות החברה, וזו של ציר ה Y כפונקציה של המכירות פר עובד, הנתונים מוצגים בצורה סינכרונית על ציר הזמן, עם הנפשה פשוטה במעבר בין שנים.
בתחילה השתמשנו בפונקציות מתמטיות לינאריות לחישוב הרדיוס והמיקום, מבט קצר בתוצאה הויזואלית גרם לנו להבין שזו לא הדרך הנכונה, בגלל השונות המאוד גדולה בהכנסות בין החברות, נוצר מקבץ מאוד גדול של בועות החלק הקרוב לראשית הצירים, ומעט מאוד חברות היו בנקודות המרוחקות, כמו כן קשה מאוד היה לראות את החברות הקטנות, על מנת לשפר את הפריסה על גבי הצירים, השתמשנו בפונקציות לוגריתמיות לחישוב הטווח של הצירים, ופונקציית שורש לחישוב רדיוס כל בועה.
השלב האחרון – הפקת תובנות: בויזואליזציה שבנויה נכון, התובנות אמורות לקפוץ מיד לעין, במקרה שלנו ניתן לראות מיד דיי בקלות מספר תובנות:
- רוב הענפים מקובצים באשכולות, לדוגמא חברות הדלק והתשתית, רשתות האופנה וההנעלה, וסוכנויות יבוא ושיווק רכב, רשתות יבוא חשמל, הדבר מאפשר להפיק תובנות ברמת סקטור.
- רמת ההכנסות: ניתן להבחין בקלות אילו ענפים הם עתירי הכנסות נמצאים בצד הימני של הסקלה של ההכנסות, לדוגמא חברות הדלק והתשתית (בועות כחולות) ואחריהן סוכנויות יבוא רכב(בועות בצבע אפרסק), לעומת זאת הענף של אופנה והנעלה בולט לרעה מבחינת רמת הכנסות.
- יעילות: ענפים או חברות פחות יעילות יבלטו כבועות גדולות הקרובות לציר הX, גם כאן בולטות לרעה רשתות המזון והאופנה, מקרה הקיצון של חברות יעילות במיוחד בולטות מאוד (חפשו את חברת הפחם הישראלית) .
- תובנה מעניינת נוספת שניתן לראות בענף קמעונאות המזון היא שרמת ההכנסות בענף היא פונקציה ישירה של גודל החברה, השונות בכמות המכירות פר עובד היא נמוכה יחסית (החברות במרחק דומה מציר הX), החברות הקטנות נמצאות בצד השמאלי של הציר (מרוויחות פחות) ואילו הגדולות
…יש עוד מספר כלים נוספים ונחמדים שמומלץ להוסיף לויזואליזציה, לדוגמא פילטור, קיבוץ, וחיפוש נתונים, עליהם נרחיב בפוסטים הבא