# إنشاء تصورات ذات معنى | ](../../sketchnotes/13-MeaningfulViz.png)| |:---:| | تصورات ذات معنى - _رسم تخطيطي بواسطة [@nitya](https://twitter.com/nitya)_ | > "إذا عذبت البيانات بما فيه الكفاية، ستعترف بأي شيء" -- [رونالد كوز](https://en.wikiquote.org/wiki/Ronald_Coase) إحدى المهارات الأساسية لعالم البيانات هي القدرة على إنشاء تصور بيانات ذو معنى يساعد في الإجابة على الأسئلة التي قد تكون لديك. قبل البدء في تصور البيانات، يجب التأكد من تنظيفها وتحضيرها كما فعلت في الدروس السابقة. بعد ذلك، يمكنك البدء في تحديد الطريقة الأفضل لعرض البيانات. في هذا الدرس، ستراجع: 1. كيفية اختيار نوع الرسم البياني المناسب 2. كيفية تجنب الرسوم البيانية المضللة 3. كيفية العمل مع الألوان 4. كيفية تنسيق الرسوم البيانية لتحسين القراءة 5. كيفية إنشاء حلول رسوم بيانية متحركة أو ثلاثية الأبعاد 6. كيفية إنشاء تصور إبداعي ## [اختبار ما قبل المحاضرة](https://purple-hill-04aebfb03.1.azurestaticapps.net/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) أكثر تضليلًا، حيث يجذب العين إلى اليمين لتستنتج أن حالات COVID قد انخفضت بمرور الوقت في مختلف المقاطعات. في الواقع، إذا نظرت عن كثب إلى التواريخ، ستجد أنها أعيد ترتيبها لإظهار هذا الاتجاه التنازلي المضلل.  هذا المثال الشهير يستخدم الألوان ومحور 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/)'، حيث يمثل كل زهرة تصورًا لفيلم. مثال آخر للجارديان هو 'باصات المشردين'، تجربة تفاعلية تجمع بين التصورات مع 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 بواسطة شودرلو دي لاكلو، تحكي قصة المناورات الاجتماعية القاسية وغير الأخلاقية لشخصيتين متنافستين من الأرستقراطية الفرنسية في أواخر القرن الثامن عشر، الفيكونت دي فالمونت والماركيزة دي ميرتويل. كلاهما يلقى حتفه في النهاية ولكن ليس قبل أن يتسبب في الكثير من الضرر الاجتماعي. تتكشف الرواية كسلسلة من الرسائل المكتوبة لأشخاص مختلفين في دوائرهم، تخطط للانتقام أو ببساطة لإثارة المشاكل. قم بإنشاء تصور لهذه الرسائل لاكتشاف الشخصيات الرئيسية في السرد، بصريًا. ستكمل تطبيق ويب يعرض عرضًا متحركًا لهذه الشبكة الاجتماعية. يستخدم التطبيق مكتبة تم إنشاؤها لإنشاء [تصور لشبكة](https://github.com/emiliorizzo/vue-d3-network) باستخدام Vue.js وD3. عندما يكون التطبيق قيد التشغيل، يمكنك سحب العقد على الشاشة لتحريك البيانات.  ## المشروع: إنشاء رسم بياني لعرض شبكة باستخدام D3.js > يتضمن مجلد هذا الدرس مجلدًا يحتوي على الحل حيث يمكنك العثور على المشروع المكتمل كمرجع. 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/) ## المراجعة والدراسة الذاتية إليك بعض المقالات لقراءتها حول التصورات المضللة للبيانات: 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). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.