• Hadas Shezaf

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

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



__________________________


פלטות צבעוניות


קיימים שלושה סוגי פלטות צבעוניות לדאטה ויז ודשבורדים: קטגוריאלית (Categorical), רציפה (Sequential) וניגודית (Diverging). אם נבין איזה סוג דאטה יש לנו, יהיה לנו קל יותר להבין איזו פלטת צבעים מתאימה לנו. במקרה של דשבורדים, ויזים שמורכבים מכמה גרפים או סטייל גייד דאטה ויז לארגון, ברוב המקרים נצטרך שילוב של שלושתן.


א. קטגוריאלית (Categorical)


מתאימה כשרוצים להציג מספר קטגוריות שונות, כמו סוגי מוצרים, מחלקות וכן הלאה.


ראמן, פו או סובה - את מה חיפשו הכי הרבה, צבע שונה לכל קטגוריה, מקור: Google Trends



__________________________



ב. רציפה (Sequential)


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



הדוגמה המצורפת, למשל, מראה את צפיפות האוכלוסיה בארה״ב ב-2013, כאשר הירוק הבהיר מייצג את המדינות הכי דלילות מבחינת אוכלוסיה והירוק הכהה מייצג את המדינות הכי צפופות.



צפיפות האוכלוסיה בארה״ב, סקלת ירוקים, מקור: ויקיפדיה



__________________________



ג. ניגודית (Diverging)


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




דוגמה לשימוש בפלטה מהסוג הזה אפשר לראות בפרוייקט המדהים Based on a true true story שבו דיוויד מקדנל (information is beautiful) סרק סרטים שלמים ותייג כל סצינה בסקלה של אמת, חצי אמת, חצי שקר, שקר ולא ידוע והשתמש בגוונים של תכלת וורוד.


שקר, אמת ומה שביניהם בסקלה של ורוד ותכלת. מקור: informationisbeautiful




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

מכחול לאדום - רפובליקנים מול דמוקרטים בארה״ב (ואלו שבאמצע) 2018. מקור: fivethirtyeight



הפלטה הניגודית משמשת גם בתוך טבלאות (Highlight table), כשרוצים להראות טווח ולאפשר זיהוי מהיר של הערכים הגבוהים והנמוכים. בדוגמה הבאה אנחנו רואים את המכירות של מוצרים שונים במהלך 4 שנים. השימוש בסקאלה של כחול כהה עד כתום עוזרת לנו לזהות איזה מוצרים נכשלו בקופות בכל שנה ואיזה היו שלאגרים של מכירות.


טבלת מכירות של מוצרים שונים (כתום - הכי נמוך, כחול כהה הכי גבוה), מקור: Tableau



__________________________



חיובי ושלילי


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


כתום ירידה וירוק עלייה בקרב אוכלוסיות צבי הים בעולם, מקור: informationisbeautiful



סנטימנט חיובי, שלילי וניטראלי, מקור: Awario



__________________________



והנה כל הפלטות ביחד:




__________________________



אתרים לבחירת צבעוניות


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


Data Color Picker


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


__________________________


COLOR THIEF


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


__________________________


ColorBrewer


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


__________________________


Viz Palette


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



__________________________



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


עכשיו אתם מוכנים לבנות את פלטת הצבעים החדשה שלכם!


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

אם לא קראתם עדיין את שאר חלקי המדריך - מוזמנים להציץ בחלק הראשון: איך צבע עוזר לנו