16 KiB

Raw Permalink Blame History

إنشاء تصورات ذات معنى


تصورات ذات معنى - رسم توضيحي بواسطة @nitya

"إذا عذبت البيانات بما فيه الكفاية، ستعترف بأي شيء" -- رونالد كوز

إحدى المهارات الأساسية لعالم البيانات هي القدرة على إنشاء تصور بيانات ذو معنى يساعد في الإجابة على الأسئلة التي قد تكون لديك. قبل البدء في تصور البيانات، يجب التأكد من تنظيفها وتجهيزها كما فعلت في الدروس السابقة. بعد ذلك، يمكنك البدء في تحديد الطريقة الأفضل لعرض البيانات.

في هذا الدرس، ستراجع:

كيفية اختيار نوع الرسم البياني المناسب
كيفية تجنب الرسوم البيانية المضللة
كيفية العمل مع الألوان
كيفية تنسيق الرسوم البيانية لتحسين القراءة
كيفية إنشاء حلول رسوم بيانية متحركة أو ثلاثية الأبعاد
كيفية إنشاء تصور إبداعي

اختبار ما قبل المحاضرة

اختيار نوع الرسم البياني المناسب

في الدروس السابقة، جربت إنشاء جميع أنواع تصورات البيانات المثيرة باستخدام مكتبات مثل Matplotlib وSeaborn. بشكل عام، يمكنك اختيار نوع الرسم البياني المناسب للسؤال الذي تطرحه باستخدام هذا الجدول:

تحتاج إلى:	يجب أن تستخدم:
عرض اتجاهات البيانات عبر الزمن	خط
مقارنة الفئات	شريطي، دائري
مقارنة الإجماليات	دائري، شريطي مكدس
عرض العلاقات	مبعثر، خطي، متعدد، خط مزدوج
عرض التوزيعات	مبعثر، هيستوجرام، صندوقي
عرض النسب	دائري، دونات، وافل

✅ بناءً على تكوين بياناتك، قد تحتاج إلى تحويلها من نص إلى أرقام للحصول على دعم الرسم البياني المطلوب.

تجنب التضليل

حتى إذا كان عالم البيانات حريصًا على اختيار الرسم البياني المناسب للبيانات المناسبة، هناك العديد من الطرق التي يمكن بها عرض البيانات لإثبات نقطة معينة، غالبًا على حساب البيانات نفسها. هناك العديد من الأمثلة على الرسوم البيانية والمخططات المضللة!

🎥 انقر على الصورة أعلاه لمشاهدة حديث في مؤتمر حول الرسوم البيانية المضللة

هذا الرسم البياني يعكس المحور X ليظهر عكس الحقيقة بناءً على التاريخ:

هذا الرسم البياني أكثر تضليلًا، حيث يجذب العين نحو اليمين لتستنتج أن حالات COVID قد انخفضت بمرور الوقت في مختلف المقاطعات. في الواقع، إذا نظرت عن كثب إلى التواريخ، ستجد أنها قد أعيد ترتيبها لإظهار هذا الاتجاه التنازلي المضلل.

هذا المثال الشهير يستخدم اللون ومحور Y المقلوب للتضليل: بدلاً من الاستنتاج بأن وفيات الأسلحة ارتفعت بعد تمرير تشريعات صديقة للأسلحة، يتم خداع العين لتعتقد أن العكس صحيح:

هذا الرسم الغريب يظهر كيف يمكن التلاعب بالنسب بطريقة مضحكة:

مقارنة الأشياء غير القابلة للمقارنة هي خدعة أخرى مشبوهة. هناك موقع ويب رائع يعرض "ارتباطات زائفة" تظهر "حقائق" تربط بين أشياء مثل معدل الطلاق في ولاية مين واستهلاك المارجرين. كما يجمع مجتمع Reddit الاستخدامات السيئة للبيانات.

من المهم فهم مدى سهولة خداع العين بواسطة الرسوم البيانية المضللة. حتى إذا كانت نية عالم البيانات جيدة، فإن اختيار نوع سيء من الرسم البياني، مثل الرسم الدائري الذي يظهر العديد من الفئات، يمكن أن يكون مضللًا.

الألوان

رأيت في الرسم البياني الخاص بـ"عنف الأسلحة في فلوريدا" أعلاه كيف يمكن أن يوفر اللون طبقة إضافية من المعنى للرسوم البيانية، خاصة تلك التي لم يتم تصميمها باستخدام مكتبات مثل Matplotlib وSeaborn التي تأتي مع مكتبات ألوان ولوحات ألوان متنوعة. إذا كنت تصمم رسمًا بيانيًا يدويًا، قم بدراسة بسيطة عن نظرية الألوان.

✅ كن على دراية، عند تصميم الرسوم البيانية، بأن إمكانية الوصول هي جانب مهم من التصور. قد يكون بعض المستخدمين يعانون من عمى الألوان - هل يعرض الرسم البياني بشكل جيد للمستخدمين ذوي الإعاقات البصرية؟

كن حذرًا عند اختيار الألوان لرسمك البياني، حيث يمكن أن ينقل اللون معنى قد لا تقصده. "السيدات الورديات" في الرسم البياني الخاص بـ"الطول" أعلاه ينقلن معنى "أنثوي" مميز يضيف إلى غرابة الرسم البياني نفسه.

بينما قد تختلف معاني الألوان في أجزاء مختلفة من العالم، وتميل إلى التغير في المعنى وفقًا لدرجتها. بشكل عام، تشمل معاني الألوان:

اللون	المعنى
الأحمر	القوة
الأزرق	الثقة، الولاء
الأصفر	السعادة، الحذر
الأخضر	البيئة، الحظ، الحسد
البنفسجي	السعادة
البرتقالي	الحيوية

إذا طُلب منك إنشاء رسم بياني بألوان مخصصة، تأكد من أن رسومك البيانية قابلة للوصول وأن اللون الذي تختاره يتوافق مع المعنى الذي تحاول نقله.

تنسيق الرسوم البيانية لتحسين القراءة

الرسوم البيانية ليست ذات معنى إذا لم تكن قابلة للقراءة! خذ لحظة للنظر في تنسيق عرض الرسم البياني بحيث يتناسب بشكل جيد مع بياناتك. إذا كان هناك متغير واحد (مثل جميع الولايات الخمسين) يحتاج إلى العرض، قم بعرضها عموديًا على المحور Y إن أمكن لتجنب الرسم البياني الذي يتطلب التمرير أفقيًا.

قم بتسمية المحاور، قدم مفتاحًا إذا لزم الأمر، وقدم تلميحات للحصول على فهم أفضل للبيانات.

إذا كانت بياناتك نصية وطويلة على المحور X، يمكنك إمالة النص لتحسين القراءة. Matplotlib يقدم رسمًا ثلاثي الأبعاد إذا كانت بياناتك تدعمه. يمكن إنتاج تصورات بيانات متطورة باستخدام mpl_toolkits.mplot3d.

العرض المتحرك والرسوم ثلاثية الأبعاد

بعض أفضل تصورات البيانات اليوم تكون متحركة. شيرلي وو لديها أمثلة مذهلة باستخدام D3، مثل 'زهور الأفلام'، حيث يمثل كل زهرة تصورًا لفيلم. مثال آخر للجارديان هو 'باص أوت'، تجربة تفاعلية تجمع بين التصورات مع Greensock وD3 بالإضافة إلى مقال سردي يظهر كيف تتعامل مدينة نيويورك مع مشكلة المشردين عن طريق نقلهم خارج المدينة.

"باص أوت: كيف تنقل أمريكا مشرديها" من الجارديان. تصورات بواسطة نادية بريمر وشيرلي وو

بينما هذا الدرس غير كافٍ للتعمق في تعليم هذه المكتبات القوية للتصور، جرب استخدام D3 في تطبيق Vue.js باستخدام مكتبة لعرض تصور لرواية "العلاقات الخطرة" كشبكة اجتماعية متحركة.

"العلاقات الخطرة" هي رواية رسائلية، أو رواية تُعرض كسلسلة من الرسائل. كتبت في عام 1782 بواسطة شودرلو دي لاكلو، تحكي قصة المناورات الاجتماعية الشريرة وغير الأخلاقية لشخصيتين متنافستين من الأرستقراطية الفرنسية في أواخر القرن الثامن عشر، الفيكونت دي فالمونت والماركيزة دي ميرتويل. كلاهما يلقى حتفه في النهاية ولكن ليس قبل أن يتسبب في الكثير من الضرر الاجتماعي. تتكشف الرواية كسلسلة من الرسائل المكتوبة لأشخاص مختلفين في دوائرهم، تخطط للانتقام أو ببساطة لإثارة المشاكل. قم بإنشاء تصور لهذه الرسائل لاكتشاف الشخصيات الرئيسية في السرد، بصريًا.

ستكمل تطبيق ويب يعرض عرضًا متحركًا لهذه الشبكة الاجتماعية. يستخدم التطبيق مكتبة تم إنشاؤها لإنشاء تصور لشبكة باستخدام Vue.js وD3. عندما يكون التطبيق قيد التشغيل، يمكنك سحب العقد على الشاشة لتحريك البيانات.

المشروع: إنشاء رسم بياني لعرض شبكة باستخدام D3.js

يتضمن مجلد هذا الدرس مجلدًا يحتوي على الحل حيث يمكنك العثور على المشروع المكتمل كمرجع.

اتبع التعليمات في ملف README.md الموجود في جذر مجلد البداية. تأكد من أن لديك NPM وNode.js يعملان على جهازك قبل تثبيت تبعيات المشروع.
افتح مجلد starter/src. ستجد مجلد assets حيث يمكنك العثور على ملف .json يحتوي على جميع الرسائل من الرواية، مرقمة، مع تعليقات "إلى" و"من".
أكمل الكود في components/Nodes.vue لتمكين التصور. ابحث عن الطريقة المسماة createLinks() وأضف الحلقة المتداخلة التالية.

قم بتكرار كائن .json لالتقاط بيانات "إلى" و"من" للرسائل وبناء كائن links بحيث يمكن للمكتبة التصورية استهلاكه:

//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://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

الواجب

قم بإنشاء تصور مخصص خاص بك

إخلاء المسؤولية:
تمت ترجمة هذا المستند باستخدام خدمة الترجمة الآلية Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية هو المصدر الموثوق. للحصول على معلومات حساسة أو هامة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

16 KiB Raw Permalink Blame History