نحن نعيش في زمن النمو الهائل في كمية البيانات التي تم إنشاؤها واستهلاكها من قبل البشرية. في كل تطبيق يتم تطويره اليوم تقريبًا ، يتم استخدام البيانات في مكان ما بداخلها أو تصورها. باستخدام البيانات ، يسعى المبرمجون إلى جعل العمل مع برامجهم مريحًا قدر الإمكان.
في بعض الأحيان قد يحدث أن الشيء الأكثر قيمة ومثيرة للاهتمام الذي يمكن أن يقدمه التطبيق للمستخدم هو بعض البيانات. ومع ذلك ، إذا كنت تمثلها في شكل شيء مثل قائمة أو جدول ، فمن المرجح أن يكون العمل مع هذه البيانات مملاً. بالإضافة إلى ذلك ، إذا كان هناك الكثير من البيانات ، مع رؤية أبسط تمثيل لها ، فسيواجه المستخدم صعوبات في تحليلها واتخاذ أي قرارات بناءً عليها.
البيانات التي تمثل مستخدم التطبيق ، يجب ألا تكون ذات قيمة بالنسبة له فقط. يجب تصميمها بحيث تكون سريعة ومريحة وممتعة للعمل معها.
نقدم لكم اليوم ترجمة للمواد التي تناقش مكتبات جافا سكريبت مفتوحة المصدر لتصور البيانات.
1. D3
مكتبة D3ربما يمكن استدعاء مكتبة المصدر المفتوح
D3 (وتسمى أيضًا D3.js) الأكثر شيوعًا في مكتبات JS الحالية لتصور البيانات. جمع هذا المشروع ، على وجه الخصوص ، ما يقرب من 80 ألف نجم على GitHub. تم إنشاء المكتبة لتصور البيانات باستخدام تقنيات مثل HTML و SVG و CSS.
بفضل اهتمام منشئي المكتبة بمعايير الويب ، يمنح D3 المطورين بيئة شاملة مناسبة للاستخدام في المتصفحات الحديثة لتصور البيانات ، مما يلغي الحاجة إلى البحث عن بعض الحلول المدفوعة. تجمع مكتبة D3 بين مكونات تصور البيانات ونهج للعمل مع DOM ، والذي يعتمد مرة أخرى على البيانات. تسمح لك D3 بإخراج بيانات عشوائية إلى DOM ، ثم تطبيق التحويلات المناسبة على المستند. هنا
معرض رائع
من الأمثلة على استخدام هذه المكتبة.
بالمناسبة ، انتبه إلى حقيقة أن هناك رأيًا مفاده أن D3
ليست مكتبة لتصور البيانات على الإطلاق. نحن نعتقد أنه يمكنك بنفسك أن تقرر ما يجب مراعاته ، وما إذا كنت ستستخدمه في مشروعك.
2. Chart.js
Chart.jsمكتبة
Chart.js ، التي جمعت حوالي 40 ألف نجمة على GitHub ، هي حل شائع جدًا لإنشاء رسومات HTML5 والرسوم البيانية بناءً على
<canvas> ، المصمم لتطوير تطبيقات الويب سريعة الاستجابة. يدعم الإصدار الثاني الحالي من المكتبة مجموعة من الرسوم البيانية من أنواع مختلفة (هناك 8 أنواع أساسية من الرسوم البيانية) ، وأنظمة إحداثيات مختلفة. يمكن استخدام
Chart.js مع مكتبة
moment.js . يمكن تنزيل المكتبة ، إذا لزم الأمر ، من
cdnjs .
3. Three.js
Three.jsمكتبة
Three.js هي حل شائع جدًا (حوالي 45 ألف نجمة على GitHub ؛ ساهم أكثر من 1000 شخص في المشروع) لإنشاء رسوم متحركة ثلاثية الأبعاد باستخدام WebGL. مرونة المشروع وتجريده يعني أنه يمكن استخدام Three.js لتصور البيانات في الأبعاد
2 و 3 . على سبيل المثال ،
هنا وحدة خاصة لـ Three.js ، مصممة لإنشاء رسوم بيانية ثلاثية الأبعاد. إليك وضع
حماية على الإنترنت لتجارب تصور البيانات. إذا كنت تفكر في تصور البيانات باستخدام WebGL ، فأنت متأكد من إلقاء نظرة على Three.js.
4. ECharts و Highcharts JS
مثال للعمل مع ECharts (الصورة مأخوذة من هنا )ECharts هو مشروع Baidu ، الذي جمع حوالي 30 ألف نجمة على GitHub ، وهو عبارة عن مكتبة لتصور البيانات والرسوم البيانية في متصفح. وهو مكتوب بلغة JavaScript خالصة باستخدام مكتبة
zrender المصممة للعمل مع
<canvas> .
تدعم المكتبة الرسوم البيانية باستخدام
<canvas> و SVG (4.0+) و VML. يمكن استخدام ECharts ليس فقط في تطوير الصفحات المصممة لمتصفحات سطح المكتب أو الجوال ، ولكن أيضًا لتنظيم عرض الخادم الفعال.
هنا معرض لأمثلة استخدام هذه المكتبة التي يمكنك تجربتها في بيئة تفاعلية.
Highcharts شبيبةتستخدم مكتبة
Highcharts JS على نطاق واسع ، حيث جمعت حوالي 8 آلاف نجمة على GitHub. الآلية الرئيسية التي تستخدمها لتصور البيانات هي تقنية SVG ، مع القدرة على التبديل إلى VML و
<canvas> للإصدارات القديمة من المتصفحات. يذكر أن 72 من أكبر 100 شركة عالمية تستخدم هذه المكتبة ، مما يجعل هذه المكتبة ، إذا كان ذلك صحيحًا ، هذه الحل الأكثر شيوعًا لرسم الخرائط للشركات الكبيرة مثل Facebook و Twitter.
5. MetricsGraphics.js
MetricsGraphics.jsمكتبة
MetricsGraphics.js (حوالي 7000 نجمة على GitHub) هو الحل الأمثل لتصور السلاسل الزمنية. يتميز بحجمه الصغير نسبيًا (80 كيلوبايت في شكل مصغر) ويعطي المطور مجموعة صغيرة ولكنها مدروسة من الأدوات المتخصصة للغاية ، من بينها أدوات لبناء الرسوم البيانية الخطية والرسوم البيانية المبعثرة والرسوم البيانية والرسوم البيانية الشريطية وجداول البيانات.
هنا معرض تفاعلي من أمثلة العمل مع هذه المكتبة.
6. يعيد
يعيدمكتبة
Recharts ، التي تحتوي على ما يقرب من 10000 نجمة على GitHub ، هو حل رسم بياني قائم على React و D3 يبدو وكأنه يعمل مع مكونات React. توفر المكتبة دعم المطور لـ SVG. شجرة التبعية خفيفة الوزن (بناءً على الوحدات الفرعية D3) قابلة للتخصيص بدرجة كبيرة من خلال خصائص المكونات.
هنا يمكنك أن تجد أمثلة على استخدامه.
7. رافاييل
رافائيلتم تصميم مكتبة "المتجهات"
الخاصة بـ Raphaël (حوالي 10 آلاف نجمة على GitHub) للعمل مع الرسومات الموجهة في بيئة الويب. هي ، باعتبارها التكنولوجيا الأساسية لإنشاء الكائنات الرسومية ، تستخدم SVG و VML. ونتيجة لذلك ، فإن الكائنات الرسومية هي أيضًا كائنات DOM التي يمكنك الاتصال بها ، باستخدام JavaScript ، معالجات الأحداث. تدعم المكتبة حاليًا المتصفحات مثل Firefox 3.0+ و Safari 3.0+ و Chrome 5.0+ و Opera 9.5+ و Internet Explorer 6.0+.
7. C3
مثال مكتبة C3تعتمد مكتبة
C3 (حوالي 8 آلاف نجمة على GitHub) على D3 ، فهي توفر للمطور القدرة على استخدام الفئات لجميع عناصرها ، مما يسمح لك بتحديد أنماطك الخاصة باستخدام الفئات واستخدام إمكانات D3. بالإضافة إلى ذلك ، يدعم العديد من واجهات برمجة التطبيقات والاسترجاعات لتنظيم التفاعل التفاعلي مع الرسوم البيانية. باستخدامها ، يمكنك تحديث الرسوم البيانية حتى بعد عرضها على الصفحة.
هنا أمثلة على استخدام هذه المكتبة.
8. رد فعل تجاه ، رد فعل افتراضية ، انتصار
React-Vis Component Kitتم تطوير مجموعة مكونات
React-Vis (حوالي 4 آلاف نجمة على GitHub) بواسطة Uber وتم تصميمها لتنظيم نظام مرئي للبيانات في تطبيقات React. يدعم هذا الحل عرض البيانات بأشكال مختلفة ، على وجه الخصوص ، في شكل خرائط حرارية ومخططات مبعثرة. لا يتطلب العمل في هذه المكتبة معرفة أولية ، على سبيل المثال ، بشيء مثل D3. يوفر للمطور وحدات بناء معيارية منخفضة المستوى مثل محاور X / Y.
تفاعل مجموعة المكونات الافتراضيةتم تصميم مجموعة المكونات
الافتراضية التفاعلية (حوالي 12 ألف نجمة على GitHub) لتنظيم العرض الفعال لمجموعات كبيرة من البيانات المجدولة. تتوافر تفاعلات ES6 و CommonJS و UMD الافتراضية ، ويدعم المشروع Webpack 4. إذا كنت تنوي استخدام هذه المجموعة من المكونات ، انتبه إلى قسم
التبعيات في وثائقه.
مجموعة مكونات النصرVictory هي مجموعة من مكونات React المصممة لتصور البيانات ذات القدرات التفاعلية. تم إنشاء المشروع من قبل Formidable Labs ، وقد جمع حوالي 6 آلاف نجمة على GitHub. يستخدم Victory نفس واجهات برمجة التطبيقات لكل من تطبيقات React العادية والبيئة React Native ، مما يسهل تطوير الحلول عبر الأنظمة الأساسية. تقدم Victory للمطورين طرقًا مرنة وجميلة لاستخدام إمكانات مكونات React لتصور البيانات.
9. CartoDB
خدمة CartoDBتم تصميم منصة
Carto (حوالي 2000 نجمة على GitHub) لتصور وتحليل البيانات الجغرافية. على هذا النظام الأساسي ، يمكنك تنزيل البيانات الجغرافية (على سبيل المثال ، في أشكال Shapefiles أو GeoJSON) ، وتصورها ، ووضعها على الخريطة ، وتصميمها باستخدام CartoCSS ، يمكنك البحث عنها باستخدام SQL.
هناك دروس فيديو حول العمل مع هذه المنصة.
10. RAWGraphs
RAWGraphsتوفر مكتبة
RAWGraphs التي تحتوي على 5000 نجمة تقريبًا على GitHub أداة تسمح لك بربط الجداول التي تحتوي على البيانات بأدوات التصور. تعتمد RAWGraphs على D3 ، فهي تسمح للمطورين بإنشاء تصور بيانات المتجه الخاصة بهم. يعمل مع البيانات الجدولية بتنسيقات مختلفة ، ويدعم البيانات التي يمكن نسخها ببساطة من التطبيقات الأخرى. يتم تقديم نتائج RAWGraphs بتنسيق SVG ، ويمكن تحريرها باستخدام التطبيقات المناسبة ، أو استخدامها على صفحات الويب دون تغيير.
هنا أمثلة على استخدام هذه المكتبة.
11. قاعدة التعريف
قاعدة التعريفتقدم مكتبة
Metabase ، التي جمعت أكثر من 11 ألف نجمة على GitHub ، طريقة سريعة وسهلة إلى حد ما لإنشاء لوحات تحكم تحتوي على بيانات مرئية لا تتطلب معرفة SQL. في الوقت نفسه ، تحتوي المكتبة على وضع SQL خاص مصمم للمحللين وللأشخاص الذين يشاركون بشكل احترافي في معالجة البيانات. تسمح لك قاعدة التعريف بتقسيم البيانات عن طريق إنشاء مرشحات أو مجموعات من المرشحات ، تدعم المكتبة إنشاء مقاييس - مؤشرات محسوبة يجب عليك الوصول إليها كثيرًا. تتضمن الميزات الأخرى لقاعدة التعريف دعم إرسال البيانات إلى Slack وتوفير القدرة على العمل معهم في هذه البيئة باستخدام
MetaBot . ربما يمكن اعتبار هذه المكتبة أداة ممتازة لتصور البيانات داخل الشركات ، على الرغم من أنه يجب ملاحظة أنه من أجل إتقانها ، فإنها ستحتاج إلى بعض الجهد.
مكتبة المكافآت: Taucharts
Tauchartsمكتبة تصور بيانات Taucharts (حوالي 2 ألف نجمة على GitHub) مبنية على مكتبة D3. يوفر للمطور واجهة تعريفية لتنظيم اتصال حقول البيانات مع الخصائص المرئية بسرعة. تسمح لك هندستها بإنشاء مخططات يتم فيها تجميع المتغيرات باستخدام إحداثيات X و Y (
مخططات الواجهة ). يسمح لك Taucharts بتوسيع سلوك الرسوم البيانية مع المكونات الإضافية المناسبة لإعادة الاستخدام.
الملخص
نظرنا في مكتبات JavaScript لتصور البيانات التي يمكن استخدامها في تطوير تطبيقات الويب. بالنظر إلى ما تحدثنا عنه حول دور البيانات في العالم الحديث ، ليس من المستغرب أن يكون هناك عدد كبير من الحلول لتصور البيانات. لذلك ، إليك بعض المكتبات الأكثر تشابهًا (عند دراستها ، انتبه إلى حقيقة أن بعضها لم يتم تحديثه لفترة طويلة):
أعزائي القراء! ما المكتبات التي تستخدمها لتصور البيانات في مشاريع الويب الخاصة بك؟
