كيف تنشئ مخططات تفاعلية؟

ما المقصود بالمخططات التفاعلية؟

يمكن للقارئ اختيار الجزء الذي يريد رؤيته من البيانات والطريقة التي يرغب في عرضها بها؛ إذ تتوفر عادةً مخططات خطية وعمودية وجداول، بل وحتى خريطة للعالم.

لماذا يجدر بك إنشاء مخططات تفاعلية؟

وفقاً لتقرير MarketingLTB:

• يفضل 62% من المستخدمين المحتوى التفاعلي،
• يتذكر 72% من الجمهور العلامة التجارية التي تستخدم محتوى تفاعلياً بشكل أفضل،
• يفضل 91% من المشترين المحتوى المرئي والديناميكي بدلاً من كتلة نصية ثابتة.

كما تظهر فوائد عملية أيضاً:

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

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

كيف تنشئ مخططات تفاعلية؟

تتوفر ثلاثة حلول، وذلك بحسب مستوى المهارات:

أدوات جاهزة مثل Canva

يُعد Canva المثال الأشهر، لكن آلية العمل متشابهة في معظم المنصات من هذا النوع.

كيف تبدو العملية عملياً؟

1. اختيار قالب المخطط – بعد تسجيل الدخول، نختار نوع التصور، مثل المخطط الخطي أو العمودي أو الدائري. وتكون التفاعلية محددة مسبقاً؛ وغالباً ما تشمل إظهار تلميحات عند تمرير المؤشر أو التبديل بين صيغ البيانات.
2. إدخال البيانات – للأسف، نضيف البيانات يدوياً، عبر لصق جدول، أو نستوردها من ملف CSV. يناسب هذا الحل الجداول البسيطة، لكنه يصبح سريعاً مشكلةً عند التعامل مع مجموعات كبيرة أو تحديثات متكررة.
3. تخصيص المظهر – يمكننا تغيير الألوان والخطوط وتسميات المحاور أو وسيلة الإيضاح.
4. تضمين المخطط – نصدّر المخطط التفاعلي على هيئة iframe أو رابط للتضمين.

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

منصة بيانات مثل Monitly

في هذه الحالة، يكفي اختيار البيانات التي تريد إدراجها في المقال:

بعد اختيار مجموعة البيانات، يمكنك تخصيص المظهر ثم النقر على «Export». ولإدراج المخطط في المقال، اختر «Embed» لإضافة مخطط تفاعلي يُحدّث نفسه تلقائياً.

يمكنك أيضاً تصدير المخطط لأغراض أخرى:

• PNG – كصورة ثابتة لوثيقة أو عرض تقديمي،
• CSV – لإجراء تحليل أعمق للبيانات، بمساعدة الذكاء الاصطناعي مثلاً،
• API – لاستخدام البيانات في تطبيقك،
• Animation – لإنشاء رسوم متحركة على YouTube أو TikTok.

توفر Monitly حلاً جاهزاً لتصور المخططات، كما تتولى تحديث البيانات. وهذا يعني أنه لا يمكن استخدام سوى البيانات المتوفرة على المنصة. وتتوفر عدة ملايين من الإحصاءات من مزودين مثل Eurostat وOECD وWHO وdane.gov.pl.

أما إذا كنت تريد تصور بياناتك الخاصة، فعليك اختيار أدوات مثل Canva أو الانتقال إلى الحل التالي.

برمجة المخططات التفاعلية من الصفر

كيف تبدو العملية من الناحية التقنية؟

1. إعداد البيانات – يجب تنظيم البيانات، وغالباً ما تكون بصيغة JSON أو CSV. وعند التعامل مع مجموعات كبيرة، تضاف عادةً مرحلة تنظيف البيانات وتجميعها وتوحيدها، ضمن ما يسمى عمليات ETL. تبدأ المخططات الممتازة من أساس متين، أي قاعدة بيانات مُعدّة جيداً، مثل PostgreSQL.
2. اختيار المكتبة – تُستخدم Chart.js غالباً لبساطتها وسرعة تنفيذها. أما D3.js فهي أكثر مرونة، لكنها تتطلب جهداً أكبر، في حين تقدم Recharts حلاً وسطاً، وقد استخدمناها لعرض المخططات التفاعلية في هذا المقال. ويتطلب كل خيار من هذه الخيارات معرفة بـ JavaScript وأساسيات تطوير الواجهات الأمامية، رغم أن الذكاء الاصطناعي يسهّل حالياً بدء الاستخدام بدرجة كبيرة.
3. منطق التفاعل – أي تحديد ما يحدث عند النقر أو تمرير مؤشر الفأرة، وكيف تتغير البيانات بعد تطبيق عوامل التصفية، والعناصر التي يمكن للمستخدم تعديلها بصرياً، وغير ذلك.
4. التكامل مع البيانات الحية – لكي يتحدث المخطط، يجب ربطه مباشرةً بواجهة برمجة التطبيقات الخاصة بقاعدة بياناتك.

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

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