رسم المياه: بين Bokeh و D3

رسم المياه: بين Bokeh و D3

المقدمة

يأتي وقت في حياة "مفتاح منخفض ولكن أيضًا عالي المستوى يحاول أن يصبح مصممًا ومطورًا للواجهة الأمامية" عندما يتعين عليهم دخول عالم مكتبات الرسوم البيانية.

مكتبات الرسوم البيانية تنتج تصورات تعتمد على البيانات. هم السبب الذي يجعلك تفهم بسرعة الاتجاهات في متوسط ​​العمر المتوقع في FiveThirtyEight أو قياس المشاعر الوطنية حول الانتخابات الرئاسية المقبلة (yikes) في صحيفة نيويورك تايمز.

فكر في المخططات التي يمكنك إنشاؤها داخل جداول بيانات Google ، باستثناء أنك الآن تتمتع بحقوق عرض وتحرير مباشرة للمكتبة التي تدير تلك المخططات. أنت سيد هذه اللبنات ذات المستوى المنخفض التي تشكل "مخططًا".

تتم كتابة العديد من مكتبات الرسوم البيانية بلغة JavaScript ، وهي لغة مألوفة لمطوري الويب أكثر من معظمها ، مما يجعل تعلمها أقل صعوبة. عندما أعدم بشكل صحيح والمكتبات رسم لديها القدرة على دفع الوطن رسالة قوية و تعطيك الفرصة لعرض الحلوى بصرية خطيرة.

في الآونة الأخيرة ، تم تكليف فريقنا بإنشاء واجهة تحتاج إلى دمج مكتبة الرسوم البيانية من أجل تحقيق الهدف. نتيجة لذلك ، كان علينا اتخاذ قرار بشأن مكتبة تلبي حالات الاستخدام الخاصة بنا. إذا كنت تزن احتياجاتك بشكل صحيح واخترت مكتبة تلبيها بطريقة ما ، فإن الحياة من ذهب.

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

ربما تفكر في: "ما هي هذه الخيارات؟" ، "كيف تعاملت مع اختيار الخيار؟" أو "لماذا شعرت بالغباء؟" (يشير إلى رسالة Slack أعلاه).

ستصف هذه المقالة عمليتنا في اختيار مكتبة الرسوم البيانية من بين عدد لا يحصى من مكتبات الرسوم البيانية في JavaScript المتوفرة حاليًا ، والقرار الحاسم للتبديل بين مكتبتي مخططات (Bokeh و D3.js) ، وإيجابيات وسلبيات كل واحدة. بالنسبة لي ، كانت هذه منطقة "مجهولة" ، وإذا كنت تشعر بنفس الطريقة حيال رسم المكتبات أو تصور البيانات بشكل عام ، فسوف تشعر بتحسن بعد قراءة هذا.

هيا نبدأ!

لماذا حاولنا بوكيه أولاً

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

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

أدخل بوكيه.

حول بوكيه

Bokeh هي مكتبة مصممة بشكل أساسي لإنشاء تصورات في المتصفح من مجموعات بيانات كبيرة أو متدفقة. يمكنك إنشاء هذه المرئيات باستخدام Python. ثم تأخذ JavaScript API من Bokeh في نص Python الخاص بك وتعرض المؤامرات أو المخططات بالإضافة إلى التعامل مع تفاعلات واجهة المستخدم في المتصفح.

يمكنك أيضًا اختيار استخدام خادم بوكيه للتعامل مع تدفق بياناتك. في وثائق Bokeh 0.12.13 ، تنص على ما يلي: "هذه القدرة على المزامنة بين Python والمتصفح هي الغرض الرئيسي لخادم Bokeh."

مزايا

البوكيه سحري للعديد من الأسباب. يتم عرضه أولاً باستخدام WebGL مع HTML5 Canvas احتياطيًا ، ويوفر العديد من الأدوات المضمنة للتفاعل مع المخططات ، ويتعامل مع مجموعات البيانات الضخمة بشكل كبير ، وفي النهاية ، ينشئ شيئًا يمكن أن يستمر على الويب على الفور.

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

سلبيات

ومع ذلك ، فإن أحد العوائق في Bokeh هو أنه محدود في درجة التفاعل التي يمكن أن يتمتع بها التصور. يمكّنك Bokeh من "التخطيط" بالمعنى التقليدي - فهو يوفر لوحة قماشية ثنائية الأبعاد تشبه الشبكة مع محاور كخط أساس. وهذا جيد ، لأنه غالبًا ما يحتاجه المستخدم ويريده. يمكن لمستخدمي Bokeh ذوي الخبرة صنع أشياء جميلة حقًا (انظر الأمثلة هنا).

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

Bokeh مخصص أيضًا للتطوير في Python ، وليس JavaScript. فيما يلي أمثلة على المخططات الشريطية في Bokeh باستخدام Python. إنه بسيط للغاية ونظيف.

Bokeh Barchart باستخدام Python (عبر Jupyter Notebook)

قبل البدء في استخدام Bokeh ، اتخذنا قرارًا واعيًا باستخدام JavaScript بدلاً من Python لأن تطبيق الويب بالكامل كان ولا يزال مبنيًا على إطار عمل JavaScript. لا يوجد أي من وثائق Bokeh في JavaScript (إنه في Python ، كما تتوقع) ، وثبت أن محاولة الدخول تحت غطاء JavaScript صعبة.

إذا كنت تعمل باستخدام صور رمزية منخفضة المستوى ، فمن الصحيح أن أي شيء ممكن في Python ممكن في JavaScript مع Bokeh. ومع ذلك ، إذا كنت قد بدأت للتو في تعلم كلتا اللغتين كما كنت ، فإن ترجمة النحو بين اللغتين ليست بديهية.

وبالإضافة إلى ذلك، هناك قيود على مستوى أعلى مستوى في جافا سكريبت Bokeh.Chartsو Bokeh.Plottingواجهات برمجة تطبيقات - يتم إهمال بعض، والبعض الآخر جعل من الصعب حقا بالنسبة لك لملامح التغيير في المؤامرة. الأمثلة أدناه هي محاولاتي لإنشاء مخططات Bokeh في JavaScript.

Bokeh Low-level Barchart باستخدام Javascript

Bokeh High-level Barchart باستخدام Bokeh.Charts Javascript API

المزيد عن التطوير في JavaScript باستخدام Bokeh هنا. كما ترى ، تفقد JavaScript مع مكتبة Bokeh أبسط أسطر من التعليمات البرمجية التي لاحظناها عند التطوير باستخدام Python. أعتقد أن الأمر استغرق حوالي ساعة من العبث في وحدة التحكم لإضافة مخطط أبيض إلى الأشرطة وعنوان في مخطط بياني عالي المستوى ، مما يكرر نضالي للتنقل خارج حدود Bokeh.ChartsJavaScript API عندما تريد تغيير التفاصيل المرئية من الرسم البياني.

أخيرًا ، هناك المزيد من الوثائق والاستخدام النشط لمكتبات الرسوم البيانية الأخرى ، مثل D3.js أو three.js ، مقارنةً بـ Bokeh. مع المساهمين والمستخدمين الأكثر نشاطًا للمكتبة ، يأتي ملفاحتمالية أكبر للعثور على الحل الذي تحتاجه لإصلاح خطأ معين.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

لماذا تحولنا إلى D3

لذلك كنا عالقين. لقد وصلنا إلى نقطة "هذه المكتبة تناسب احتياجاتنا نوعًا ما ، ولكن من المؤلم الاستمرار في صنع الأشياء في JavaScript وربما سنصل إلى الحد الأقصى يومًا ما عندما ندرك أننا بحاجة إلى شيء غير متوفر في Bokeh بشكل صحيح الآن." رائع.

أدخل D3.

كان اهتمامنا الأولي مع D3 هو أنه سيجعل تصوراتنا بطيئة جدًا ، نظرًا للتجارب السابقة مع عرض SVG بكميات أكبر من البيانات في المتصفح. علمنا أيضًا أن منحنى التعلم لـ D3 كان أعلى بكثير من منحنى التعلم لـ Bokeh.

لكننا ما زلنا متفائلين بالنظر إلى شعبية D3 ، والكمية اللانهائية من تطبيقات D3 الموثقة بشكل جميل ، وموقفنا "Get Sh * t Done" ... لذلك قررنا تجربته على أي حال.

حول D3

D3.js هي مكتبة JavaScript تركز على ربط البيانات. يمنحك القوة الفريدة لإنشاء عناصر في DOM وربط البيانات / البيانات بالعناصر في وقت واحد. باستخدام مكتبة تستند إلى البيانات بالكامل ، يمكنك إضافة عناصر ديناميكيًا عند إضافة نقاط البيانات أو إزالتها والانتقال بين مجموعات البيانات. تمنح D3 أيضًا مزيدًا من التحكم في الجمالية والتفاعلية للنتيجة النهائية ، مما يعني أنه يمكنك الابتعاد عن إنشاء أكثر التصورات غرابة / روعة.

مزايا

لدهشتنا ، كانت تصورات D3 التي أنشأناها باستخدام مجموعات البيانات الخاصة بنا مليئة بالزبد. أدركنا بسرعة أن D3 مصمم خصيصًا للعرض السريع ، على الرغم من المصفوفات الضخمة التي كنا نمررها إلى المكتبة.

بدلاً من تمرير نقاط البيانات واحدة تلو الأخرى وإنشاء SVG ذات الصلة ، والتي يمكن أن تكون مملة للغاية ، يسمح لك D3 بربط مجموعة بياناتك بالكامل بمجموعة SVG الخاصة بك قبل أن تكون موجودة. يتم بعد ذلك إنشاء SVG بإطلاق نار سريع وربطها بنقطة البيانات الخاصة بها دفعة واحدة.

إنه مثل طاهٍ في المطبخ يتلقى قائمة الطلبات دفعة واحدة ويمكنه تحضير الطعام بترتيب يغفل وقت الانتظار غير الضروري ، بدلاً من الانتظار دائمًا لتلقي الطلب التالي بعد إعداد طبق واحد.

أفضل جزء في D3 هو أنه يوفر فرصة كبيرة للتفاعلات والانتقالات السلسة بين مجموعات البيانات. نظرًا لأن هدفنا النهائي كان ولا يزال تمكين المستخدم ، فقد أردنا إنشاء تصور من شأنه أن يدعو الفرد للتفاعل معه.

D3 مخصص أيضًا لتطوير JavaScript. لن يكون هناك المزيد من "الحفر تحت غطاء المحرك" لواجهة برمجة تطبيقات جافا سكريبت كما كنا نفعل مع بوكيه. يظهر مثال الرسم البياني الشريطي الذي أنشأته باستخدام BokehJS سابقًا في هذه المقالة أدناه باستخدام مكتبة D3.

D3 باركارت

نعم ، هناك سطور أكثر تعقيدًا من التعليمات البرمجية مقارنةً بالرمز المطلوب لمخطط Bokeh. استغرق الأمر المزيد من الوقت والطاقة لالتقاط. لكن لديك سيطرة كاملة على كل التفاصيل الصغيرة للمخطط الخاص بك ، وكلها موثقة في مكان ما عبر الإنترنت (ربما عن طريق المنشئ ، مايك بوستوك) هذا رائع جدا.

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

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

سلبيات

يكون منحنى التعلم الأولي أعلى بالنسبة لـ D3 مقارنةً بـ Bokeh ، على افتراض أنك تقوم بالتطوير في Python باستخدام Bokeh. جافا سكريبت مطولة أكثر من بايثون. ومع ذلك ، إذا كنت تخطط للتطوير في JavaScript مثلنا ، فإن الأمر يستحق السير في دروس D3.

من الصعب فهم كيفية عمل التحديدات ، وماذا تعني .enter () و. exit () ، والسحر الذي يحدث فقط مع سطر واحد بسيط من التعليمات البرمجية (.transition () أي شخص؟). ولكن - بمجرد أن تلتف حول هيكل D3 الفريد بافتراض وجود الأشياء قبل وجودها ، فإن الاحتمالات لا حصر لها.

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

استنتاج

لذلك هناك لديك! ما زلنا نستخدم D3 ونتعلمه بنشاط حيث نقوم بدمج المكتبة في تطبيقنا وفريقنا. على الرغم من أننا نمضي قدمًا مع D3 لا يعني أننا لن نستخدم Bokeh لتطبيق مختلف في المستقبل. هناك إيجابيات وسلبيات لكل مكتبة رسوم بيانية ، ومن المهم التفكير باستمرار لتحديد ما إذا كان يجب عليك الاستمرار في مكتبتك الحالية أو البدء في استكشاف الخيارات الأخرى.

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

يتعلق الأمر بالاستكشاف والتوثيق والعودة إلى نفسك ومع زملائك في الفريق لمواصلة تطوير المشروع بطرق مثمرة.

فصاعدا!

إذا كان لديك أي تعليقات أو تصحيحات أو اقتراحات أو تريد التحدث فقط ، فلا تتردد في مراسلتي عبر البريد الإلكتروني على [email protected] يمكنك العثور على بعض أعمالي في //mandilicai.com/.