الرسوم البيانية

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

المبادئ

الترتيب مهم: اللون آخر حاجة. أغلب الرسوم السيئة بتبدأ باختيار الألوان.

  1. اختار الشكل بوظيفة البيانات: مقارنة كميات = أعمدة. تغيّر عبر الزمن = خط. جزء من كل (حتى 5 أجزاء) = دونات. مراحل = قمع (funnel) بدرجات لون واحد. رقم واحد مهم = بطاقة مؤشر (KPI) وليس رسم.
  2. محور واحد. ممنوع رسم بمحورين رأسيين (two y-axes). لو القياسين مختلفين في الوحدة: رسمين جنب بعض، أو رسم مفهرس لقيمة أساس.
  3. ألوان الفئات بترتيب ثابت وما بتتكررش. الحد 6 سلاسل. السابعة وما بعدها بتتجمع في "أخرى" أو بنقسم لرسوم صغيرة. اللون بيتبع الكيان مش ترتيبه: لو فلتر خفّض عدد السلاسل، الباقيين ما يتغيرش لونهم.
  4. التدرج (sequential) لون واحد من فاتح لغامق للكمية. التباعدي (diverging) لونين بينهم رمادي محايد في المنتصف.
  5. ألوان الحالة محجوزة. الأخضر والبرتقالي والأحمر والأزرق للحالات (نجاح، تحذير، خطر، معلومة) ومش بتتستخدم كـ "سلسلة رابعة". ودايماً معاها أيقونة وكلمة.
  6. علامات رفيعة: خط 2px، نهاية أعمدة مدوّرة 4px مثبتة على خط الأساس، فاصل 2px بلون السطح بين الأجزاء المتراصة، نقاط 8px فأكتر.
  7. مفتاح (legend) دايماً لسلسلتين أو أكتر، وتسمية مباشرة لنهاية الخط حتى 4 سلاسل. سلسلة وحيدة: العنوان يكفي. ما نكتبش رقم على كل نقطة: رقم واحد على الأعلى أو الأخير.
  8. التفاعل بشكل افتراضي: خط تقاطع (crosshair) وtooltip على الخطوط، tooltip على كل عمود، تنقل بأسهم الكيبورد، و"عرض كجدول" لقارئات الشاشة.
  9. محور الزمن في RTL بينعكس: أول فترة على اليمين وأحدث فترة على الشمال، ومحور القيم على اليمين. الأرقام تفضل غربية.
  10. النصوص ما بتلبسش لون السلسلة. القيم والتسميات بلون النص، ومربع اللون جنبها هو اللي بيحمل الهوية.

لوحة السلاسل الستة

ست ألوان بترتيب ثابت (--viz-1 إلى --viz-6) مأخوذة من ألوان النظام الصريحة. الفاتح على الأبيض والغامق على سطح الغامق. الترتيب مش ذوق: هو آلية أمان لعمى الألوان، فاللون الأول فيروزي والتاني شمس عشان أول سلسلتين يفترقوا بوضوح.

الخانةاللونفاتحغامقتباين مع السطح (فاتح / غامق)
--viz-1فيروزي (teal)
#0e9585
#3fd0bd
…
--viz-2شمس (sun)
#e0a400
#ffc53d
…
--viz-3أزرق (blue)
#3f8fd0
#5ab0e8
…
--viz-4وردي (rose)
#e5527f
#ef7096
…
--viz-5بنفسجي (violet)
#7a62d8
#a28cf5
…
--viz-6طماطم (tomato)
#ff6b4a
#ff8466
…

التباين (3:1 للعناصر الرسومية) بيتحسب في المتصفح من الألوان الفعلية. اللي تحت 3:1 بيتعلّم، وبيفرض "تعويض": تسمية مرئية مباشرة على العلامة أو بديل جدول، وده اللي بتعمله مكتبة الرسوم (المفتاح + التسمية المباشرة + عرض كجدول).

محتاج إعادة تحقق: اللوحة اتغيّرت مع الأسلوب الجديد (الستة اتبدلوا بألوان النظام الصريحة)، وفحص عمى الألوان (CVD) وفصل الألوان المتجاورة بسكريبت validate_palette.js لسه ما اتعادش عليها. لحد ما يتعاد، الاعتماد على التسميات المباشرة والجدول البديل، ومفيش رسم بيعتمد على اللون لوحده. نتائج الفحص القديمة في tools/dataviz-validation.md مش بتنطبق على اللوحة دي.

التدرجات (sequential و diverging)

التدرج: فيروزي واحد من فاتح لغامق (--viz-seq-1 إلى -6) للكمية المستمرة (خريطة حرارية، قمع). التباعدي: طماطم في طرف وفيروزي في الطرف التاني، والنقطة الوسط ورقي محايد (ink-100) بمعنى "لا شيء"، بخطوات متساوية على الجهتين. اخترنا طماطم وفيروزي لأنهم متقابلين في الدفا والبرودة.

تدرج كمي (فاتح لغامق)
تباعدي: أقل من المتوقع (طماطم) ← محايد ← أعلى من المتوقع (فيروزي)

أمثلة حيّة

كلها بمكتبة AmanaCharts (SVG بدون مكتبات). مرّر الماوس أو استخدم الأسهم بعد التركيز على الرسم الخطي. غيّر الاتجاه (LTR) والوضع الغامق من الشريط وشوف الرسوم بتتعكس وبتتغير ألوانها. البيانات تجريبية.

تعيينات الشهر
41
+8% عن الشهر اللي فات
استبدال خلال 90 يوم
7.3%
-2.1 نقطة (أفضل)
زمن الرد على البلاغات
3.4 ساعة
+0.6 ساعة

التعيينات والاستبدالات شهرياً

خطّين بنفس الوحدة (عدد حالات)، ومحور واحد. التسمية المباشرة عند نهاية كل خط.

حالة التعيينات المبدوءة حسب الشهر

أعمدة متراصة (stacked): فاصل 2px، نهاية مدوّرة فوق، وأعلى عمود متسمى.

مقارنة المكاتب (أعمدة متجاورة)

تعيينات واستبدالات لكل مكتب في الربع الأخير.

أسباب إنهاء العقود

دونات بخمسة أجزاء (الحد الأقصى 6). النسبة في الـ tooltip.

قمع التعيين (funnel)

مراحل مرتبة بدرجات فيروزي واحدة، من أغمق لأفتح. النسبة من الطلبات الأصلية.

قواعد الرسم المختصرة

العنصرالقاعدة
الخطوط2px، أطراف ونهايات مستديرة، النقطة الحالية (عند التمرير) 9px مع حلقة 2px بلون السطح.
الأعمدةعرض أقصى 40px، نهاية مدوّرة 4px عند طرف البيانات فقط، مثبتة على خط الأساس. بين أعمدة متراصة فاصل 2px بلون السطح.
الشبكة والمحاورخطوط شعرية خافتة (--viz-grid)، وخط الأساس أغمق شوية. بدون إطار. تسميات المحور 12px باللون الخافت.
المفتاحدايماً لسلسلتين فأكتر، تحت الرسم، مربع لون 10px + اسم بلون النص.
التسميات المباشرةلحد 4 سلاسل عند نهاية الخط. أرقام: القيمة الأعلى أو الأخيرة فقط.
التفاعلpointermove + crosshair، الأسهم للتنقل، tabindex="0" على الرسم الخطي، منطقة إصابة أكبر من العلامة.
الجدول البديل"عرض كجدول" تحت كل رسم فيه سلاسل: نفس الأرقام بـ <th scope="row">.
RTLمحور الزمن ينعكس (الأقدم يمين)، محور القيم يمين، الأرقام غربية، مفاتيح بالعربي.
الوضع الغامقدرجات مختارة للغامق (مش قلب)، وفاصل الأجزاء بلون سطح الغامق.
الأنسجة (texture)خطوط مائلة 45° و135° كقناة وصول لعمى الألوان أو الطباعة بالأبيض والأسود. بتتفعل عند الطلب، مش افتراضي.

ممنوعات

محوران رأسيان بمقياسين مختلفين
محورين رأسيين: التقاطع بين الخطين مالوش معنى وبيتلاعب بالانطباع. الحل: رسمين صغيرين أو فهرسة لقيمة أساس.
رسمين صغيرين (small multiples)نفس المحور الأفقيكل واحد بوحدته
أو محور واحد لو الوحدة واحدة
قياسين مختلفين = رسمين منفصلين بينهم محاذاة أفقية.
قوس قزح بلا معنى
ألوان قوس قزح لكمية واحدة: الألوان بتوحي بفئات مش موجودة، والأحمر والأخضر محجوزين للحالات.
لون واحد بدرجات للكمية
لون واحد من فاتح لغامق لكمية مستمرة.
دائرة بـ 8 أجزاء: العين مش بتقارن الزوايا، والأجزاء الصغيرة بتضيع. الحل: 5 أجزاء كحد أقصى، والباقي "أخرى"، أو أعمدة أفقية مرتبة.
عدّاد (gauge) لرقم واحد: يستهلك مساحة ويخبي الرقم الحقيقي. الحل: بطاقة مؤشر بالرقم وتغيّره (.kpi).