12 כלים שימושיים להצגת מידע חזותי

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

כל כלי מתאים למטרות מעט שונות, ולכן רצוי להיכנס לכל כלי שנראה לכם רלוונטי ולראות דוגמאות נוספות:

D3

D3 היא ספריית פיתוח ב-JS שמאפשרת לנו להמחיש מידע במגוון עצום של דרכים: בועות, לוחות שנה, צבעים, שמשות, קוביות, רשת צמתים (Nodes) ועוד… הספרייה נתמכת בכל הדפדפנים המודרניים מ-Internet Explorer 9 ומעלה.

דוגמה 1: תרשים אינטראקטיבי המתאר איפה מחפשים בתים במטרופוליטניים שונים בארה"ב על פי מטרופולין המוצא

visual1

Fusion Charts

Fusion Charts הוא כלי בעל יכולות דומות ל-D3 בתשלום המתחיל בכמה מאות דולרים לשנה.  הכלי מתרכז במגוון שונה של תעשיות כמו פיננסים, מכירות, שירותי בריאות וחינוך.

דוגמה 2: דיאגרמה שמראה את צריכת החשמל החודשית של משק בית

visual2

Tableau Public

Tableau Pubic הוא כלי שלשם שינוי לא מיועד למפתחים. הוא מגיע בשתי גרסאות :גרסה אחת חופשית לשימוש עם הלוגו שלו וגרסה אחת מסחרית בלי הלוגו או עם לוגו מותאם אישית.

דוגמה 3: סכרים שונים בארה"ב על פי מידת הסיכון שלהם. לאינפוגרפיקה המלאה.

 

visual3

Charted

Charted הוא ללא ספק הכלי הכי פשוט לשימוש כאן: כל שיש לעשות הוא להדביק קובץ CSV  או קובץ Spreadsheet של גוגל על מנת לקבל את התרשים. המגבלה של הכלי היא שהוא תומך רק בסדרות שמסודרות לפי תאריכים : לדוגמה, סך הכול הכנסות של מחלקות שונות בחברה.

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

דוגמה 4:

visual4

Google Charts

Google Charts היא עוד ספריית JS  חופשית לשימוש שלא דורשת התקנה של קבצים מקומיים, אלא מקושרת ישירות לאלו של גוגל. את הנתונים ניתן לייבא ישירות מקובץ Spreadsheet של גוגל וההפך (ייבוא תרשים של Google Charts לקובץ Spreadsheet). גם כאן יש לא מעט דוגמאות שניתן לראות וגוגל מבטיחה תאימות של שלוש שנים אחורה.

דוגמה 5: עץ היררכיה

visual5

Flot

Flot הוא עוד פרויקט קוד פתוח קל יחסית לשימוש עם כמה יכולות שימושיות, למשל:

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

דוגמה 6: תרשימים שונים שניתן לייצר עם Flot

visual6

Chartist.js

Chrtist.js היא ספריית JS  קטנה במיוחד השוקלת 10KB  בלבד. אין פה הרבה חידוש מבחינת התרשימים, אבל רובם פשוטים ואלגנטיים. יש גם אופציה להוסיף אנימציות שהופכות אותם למושכים יותר.

דוגמה 7: תרשים עם המחשות של נקודות שיא

visual7

Highcharts

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

דוגמה 8: אפקטיביות של עובדים בסניפים שונים

visual8

Datawrapper

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

דוגמה 9:מהירות האינטרנט במדינות שונות:

visual9

Dygraphs

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

דוגמה 10:הצגת פונקציות שונות לפי ערכי Y ו-X

visual10

Raw

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

כיצד להשתמש ב-Raw:

Timeline.js

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

כיצד להשתמש ב-Timeline.js: