اصنع صورة مخصصة لـ LuckyTemplates باستخدام Deneb

أريد أن أتحدث عن مرئيات Deneb المخصصة الجديدة التي تم إصدارها مؤخرًا لـ LuckyTemplates. يوفر هذا واجهة للغة Vega-Lite لاستخدامها في إنشاء مرئيات تفاعلية مخصصة لـ LuckyTemplates.

تعتمد لغة Vega-Lite على بناء جملة JSON. إنه أسهل في التنفيذ والفهم من لغات البرمجة ذات المستوى الأدنى. بالإضافة إلى ذلك ، قام المؤلف Daniel Marsh-Patrick بتضمين بعض القوالب لتسريع عملية التصميم.

أعتقد أن هذه الصورة المرئية ستكون ضخمة لأنها توفر تجربة رمز كاملة وقابلة للتخصيص للغاية. أود أن أغتنم هذه الفرصة لعرض بعض الأمثلة البسيطة لمرئيات Deneb Vega-Lite ومقارنتها بمرئيات LuckyTemplates القياسية. يمكنك مشاهدة الفيديو الكامل لهذا البرنامج التعليمي أسفل هذه المدونة.

جدول المحتويات

• كيفية استخدام Deneb كصورة مخصصة لـ LuckyTemplates
• نقاط عامة للتعرف على Deneb
• إنشاء مخطط شريطي باستخدام Deneb
• عمل مخطط خطي مع دينب
• صياغة مخطط منطقة مع دينب
• استخدام مخطط عمودي متداخل مع دينب
• صنع مخطط دائري مع دينب
• خاتمة

كيفية استخدام Deneb كصورة مخصصة لـ LuckyTemplates

Deneb هي واجهة تتيح إمكانية تشفير الصورة المرئية بالكامل باستخدام صيغة JSON وفقًا للغة Vega-Lite. لا يُقصد بهذا العرض التقديمي أن يكون مقدمة للغة Vega-Lite ولكنه بالأحرى عرض صغير لكيفية سماح اللغة بمرئيات تشبه بعض مرئيات LuckyTemplates القياسية ويمكن تخصيصها بالكامل لتناسب السيناريو الخاص بك.

تستفيد المرئيات الأساسية التي تم تطويرها في هذا العرض التقديمي من بعض نماذج القوالب المتوفرة في واجهة Deneb. تعد المرئيات المخصصة أمثلة تمهيدية لما يمكن إنجازه بقدر ضئيل من الجهد في Vega-Lite من خلال تعديلات التجربة والخطأ لأمثلة أخرى يمكن العثور عليها بسهولة عبر الإنترنت.

ها هي الصفحة الرئيسية لدينب. يمكنك أن تجد بعض المواد المرجعية هنا .

يوجد معرض على موقع Vega-Lite GitHub يعرض أمثلة للأشياء التي يمكن إنشاؤها باستخدام Vega-Lite.

إليك مثال آخر على بعض بطاقات KPI المخصصة التي يمكن إنشاؤها باستخدام مرئي Deneb المخصص.

نقاط عامة للتعرف على Deneb

فيما يلي بعض النقاط العامة التي تعلمتها حول Vega-Lite أثناء تحقيقاتي الأولية. البيانات مرتبطة بعلامة. هناك العديد من العلامات المتاحة في Vega-Lite ، بما في ذلك الشريط والخط والقوس والنقطة والنص وغيرها الكثير. العلامة لديها ترميز. على سبيل المثال ، تحتوي علامة النص على العديد من الترميزات المتاحة ، بما في ذلك المحاذاة والخط والحجم والوزن واللون.

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

إنشاء مخطط شريطي باستخدام Deneb

لنلقِ الآن نظرة على كيفية إنشاء مرئيات مخصصة لـ LuckyTemplates باستخدام قوالب من Deneb ، وكيفية مقارنتها مع مرئيات LuckyTemplates القياسية.

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

سنضيف صورة Deneb على الجانب الأيمن.

أول شيء يتعين علينا القيام به هو إضافة بياناتنا ، لذلك دعونا نضيف قنواتنا وإجمالي المبيعات .

للمتعة فقط ، دعنا نشغل Shadow .

ثم نختار تحرير .

سنختار قوالب الرسم البياني الشريطية البسيطة المتوفرة في الواجهة. بالنسبة للفئة ، نختار القناة وللمقياس إجمالي المبيعات .

بمجرد النقر فوق إنشاء ، يمكننا رؤية صورة Deneb الخاصة بنا.

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

بمجرد النقر فوق تحرير من صورة Deneb المرئية ، نرى علامة واحدة هنا.

سأحصل على مقتطف رمز لإضافة تسميات البيانات واستبدال رمز العلامة المفردة بعلامتين.

بمجرد تشغيل هذا ، سيكون لدينا تسميات البيانات.

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

الشيء الآخر الرائع حقًا في Deneb و Vega-lite هو أنه يمكننا بسهولة تغيير مخطط شريطي إلى مخطط عمودي. دعنا نضغط على تعديل مرة أخرى. كل ما علينا فعله هو قلب X و Y.

من الواضح أن هناك بعض العمل الذي يتعين القيام به والتعديلات مطلوبة ، لكنني أردت أن أوضح مدى سهولة تغيير الأشياء في Vega-Lite.

عمل مخطط خطي مع دينب

بعد ذلك ، أضفت مخططًا خطيًا قياسيًا في LuckyTemplates يعرض إجمالي المبيعات حسب التاريخ . دعونا نبني شيئًا مشابهًا باستخدام Deneb Vega-lite. دعنا نضيف صورة Deneb المرئية ، ونضيف التاريخ وإجمالي المبيعات .

دعنا نختار مخططًا خطيًا بنطاق فاصل زمني ، ونختار التاريخ لمحورنا X ، واختر إجمالي المبيعات للقيم الثلاث التالية.

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

هناك شيء يمكننا القيام به لإصلاح ذلك بسهولة. دعنا ننتقل إلى Deneb ونغير ترميز تاريخ X إلى مؤقت .

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

وهذا هو عنواننا. لدينا سيطرة كاملة على خط العنوان وحجمه ولونه وما إلى ذلك.

صياغة مخطط منطقة مع دينب

لنجرب مخطط منطقة أيضًا. لقد قمت بإضافة مخطط مساحي قياسي في LuckyTemplates يعرض إجمالي المبيعات التراكمية حسب التاريخ .

الآن دعونا نبني شيئًا مشابهًا باستخدام Deneb Vega-Lite. دعنا نضع صورة Deneb المرئية ، ثم نضيف قياسات التاريخ وإجمالي المبيعات التراكمية .

دعنا نحصل على كتلة التعليمات البرمجية لمخطط منطقة مستقل ، ونطبقها.

المخطط المساحي في الأسفل هو النتيجة.

إحدى الميزات الإضافية لـ Vega-Lite هي أنه يمكنك استخدام الفرشاة . هذه هي الكلمة التي يستخدمونها لاختيار فاصل زمني معين على الرسم البياني الخاص بك.

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

انسخ رمز المخططات المزدوجة المرتبطة بفرشاة مستطيلة. ثم قم بلصق الكود وتشغيله.

لدينا الآن الصورة الأساسية الخاصة بنا ، حيث يمكننا استخدام الفرشاة لعرض فاصل زمني محدد من الأول إلى المرئي الثانوي.

استخدام مخطط عمودي متداخل مع دينب

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

لقد أضفت بعض التعليمات البرمجية من Notepad ++ لجعل العمود المتداخل مرئيًا.

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

صنع مخطط دائري مع دينب

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

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

دعنا فقط نلقي نظرة على الكود الذي استخدمته هنا. يستخدم مفهومًا في Vega-Lite يسمى Transform and Params لتوسيع البيانات التي يتم توفيرها للعلامات المختلفة. ثم قمت بوضع تسع علامات فوق بعضها البعض باستخدام نفس المحور لإنشاء المخطط الدائري. هذا تفاعلي بالكامل مع تلميحات أدوات LuckyTemplates.

شيء آخر مثير للاهتمام هو أنه يمكنك استخدام Visual Studio Code لتطوير صور Vega-Lite الخاصة بك. أولاً ، ستحتاج إلى امتداد لعرض كود Vega-Lite. أنا أستخدم حاليًا امتداد Vega Viewer .

فأنت بحاجة إلى إعداد ملف تقني بالامتداد vl.json. فقط انقر بزر الماوس الأيمن على الكود لمعاينة Vega Graph .

نظرًا لأن Vega-Lite visual هو تجربة رمز كاملة ، أجد في الواقع بيئة Visual Studio Code مفيدة جدًا في تطوري.

خاتمة

أتمنى أن تجد هذا البرنامج التعليمي منيرًا ، وأنه سيجعلك تستكشف إمكانيات استخدام Deneb و Vega-Lite لتطوير تصورات تتجاوز ما هو متاح حاليًا في LuckyTemplates.

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

لدينا قدر هائل من المحتوى يصدر طوال الوقت مني ومن مجموعة من منشئي المحتوى ، وكلهم مكرسون لتحسين طريقة استخدامك لـ LuckyTemplates ومنصة Power.

جريج