You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
16 KiB
182 lines
16 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "b4039f1c76548d144a0aee0bf28304ec",
|
|
"translation_date": "2025-08-27T10:35:12+00:00",
|
|
"source_file": "3-Data-Visualization/R/13-meaningful-vizualizations/README.md",
|
|
"language_code": "ar"
|
|
}
|
|
-->
|
|
# إنشاء تصورات ذات معنى
|
|
|
|
|](../../../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) للبيانات.
|
|
|
|
من المهم فهم مدى سهولة خداع العين بواسطة الرسوم البيانية المضللة. حتى إذا كانت نية عالم البيانات جيدة، فإن اختيار نوع سيئ من الرسوم البيانية، مثل الرسم الدائري الذي يعرض العديد من الفئات، يمكن أن يكون مضللًا.
|
|
|
|
## الألوان
|
|
|
|
كما رأيت في الرسم البياني "عنف الأسلحة في فلوريدا" أعلاه، يمكن أن تضيف الألوان طبقة إضافية من المعنى إلى الرسوم البيانية، خاصة تلك التي لم يتم تصميمها باستخدام مكتبات مثل ggplot2 وRColorBrewer التي تأتي مع مكتبات ألوان ولوحات ألوان معتمدة. إذا كنت تصمم رسمًا بيانيًا يدويًا، قم بدراسة [نظرية الألوان](https://colormatters.com/color-and-design/basic-color-theory).
|
|
|
|
> ✅ كن على دراية، عند تصميم الرسوم البيانية، أن إمكانية الوصول هي جانب مهم من التصور. قد يكون بعض المستخدمين مصابين بعمى الألوان - هل يعرض الرسم البياني الخاص بك بشكل جيد للمستخدمين ذوي الإعاقات البصرية؟
|
|
|
|
كن حذرًا عند اختيار الألوان لرسمك البياني، حيث يمكن أن تنقل الألوان معاني قد لا تقصدها. "السيدات الورديات" في الرسم البياني "الطول" أعلاه تنقل معنى "أنثوي" مميز يضيف إلى غرابة الرسم نفسه.
|
|
|
|
بينما قد تختلف [معاني الألوان](https://colormatters.com/color-symbolism/the-meanings-of-colors) في أجزاء مختلفة من العالم، وتميل إلى التغير في المعنى حسب الظل. بشكل عام، تشمل معاني الألوان:
|
|
|
|
| اللون | المعنى |
|
|
| ------- | ------------------- |
|
|
| الأحمر | القوة |
|
|
| الأزرق | الثقة، الولاء |
|
|
| الأصفر | السعادة، الحذر |
|
|
| الأخضر | البيئة، الحظ، الحسد |
|
|
| البنفسجي| السعادة |
|
|
| البرتقالي| الحيوية |
|
|
|
|
إذا طُلب منك إنشاء رسم بياني بألوان مخصصة، تأكد من أن رسومك البيانية يمكن الوصول إليها وأن اللون الذي تختاره يتماشى مع المعنى الذي تحاول نقله.
|
|
|
|
## تنسيق الرسوم البيانية لتحسين القراءة
|
|
|
|
الرسوم البيانية ليست ذات معنى إذا لم تكن قابلة للقراءة! خذ لحظة للتفكير في تنسيق عرض الرسم البياني بحيث يتناسب بشكل جيد مع بياناتك. إذا كان هناك متغير واحد (مثل جميع الولايات الخمسين) يجب عرضه، فاعرضها عموديًا على المحور Y إذا أمكن لتجنب رسم بياني يتطلب التمرير أفقيًا.
|
|
|
|
قم بتسمية المحاور، وقدم مفتاحًا إذا لزم الأمر، وقدم تلميحات لتحسين فهم البيانات.
|
|
|
|
إذا كانت بياناتك نصية وطويلة على المحور X، يمكنك إمالة النص لتحسين القراءة. [plot3D](https://cran.r-project.org/web/packages/plot3D/index.html) يقدم رسومات ثلاثية الأبعاد إذا كانت بياناتك تدعم ذلك. يمكن إنتاج تصورات بيانات متطورة باستخدامه.
|
|
|
|
|
|
|
|
## الرسوم المتحركة وعرض الرسوم ثلاثية الأبعاد
|
|
|
|
بعض أفضل تصورات البيانات اليوم متحركة. شيرلي وو لديها أمثلة مذهلة باستخدام 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
|
|
|
|
> يتضمن مجلد هذا الدرس مجلدًا باسم `solution` حيث يمكنك العثور على المشروع المكتمل، للرجوع إليه.
|
|
|
|
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://purple-hill-04aebfb03.1.azurestaticapps.net/quiz/25)
|
|
|
|
## المراجعة والدراسة الذاتية
|
|
|
|
إليك بعض المقالات لقراءتها حول التصورات المضللة للبيانات:
|
|
|
|
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). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية هو المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة. |