Draw Bar Chart Using D3 [Data Driven Documents] طريقة رسم اعمدة بيانية باستخدام تقنية الدي ثري

طريقة رسم اعمدة بيانية باستخدام ملفات الدعم لتقنية الـ D3 , في مقالة سابقة قمنا بشرح ماهية تقنية الـ D3 وما باستطاعتها من تقدمة حلول مستقبلية في عالم التطوير و البرمجة , أما اليوم سنقوم بشرح طريقة رسم اعمدة بيانية باستخدام تقنية الـ D3 .
شرح المشروع :-
سيتكون المشروع من عدد (2) صفحات html , وكما هو مبين اعلاه طريقة وبنية عمل الملفات المستخدمة ومدى ارتباطها بين بعضها البعض , نلاحظ في الرسم التركيز على صفحة العرض الاساسية وهي bar.html , شرح مبسط اعلاه في الصورة عن الأرتباطات التشعيبية بين ملفات المشروع.
الفكرة:-
الفكرة هي استخدام الرسوم البيانية ( الأعمدة ) وطريقة رسمها باستخدام اللغات البرمجية المبسطة , وربط الرسوم البيانية باستخدام امتداد ملف CSV ومن ثم تشكيلها واخراجها بصورة ديناميكية في صفحة الكترونية مبسطة قابلة للتعديل عن طريق ملف CSV دون الحوؤل و الرجوع إلى اللغات البرمجية للإضافة و التعديل.
 تحميل الملفات و التعديل:-
قمت برفع الملفات المستخدمة كما في المثال الموضح وبإمكانكم تحميل جميع الملفات بالملف المضغوط , ما عليكم فقط هو فك الضغط و التعديل في محتوى ملف الـ CSV , والاستمتاع برسم البياني عبر صفحة الويب .

ملاحظة : حذف name , value في ملف صيغة الـ CSV سيعرض المشروع لعدم العمل.
Advertisements

3 Important Steps To design Infographics ثلاث خطوات مهمة اثناء تصميم انفوجرافيك

قمنا في مقالة سابقة بشرح اهم المبادئ الاساسية لعمل التصاميم الإنفوجرافيكية وما على المصمم مراعاته قبل البدء بعمل التصميم الأنفوجرافيكي , ايضاً قمنا بشرح مختصر لأشهر المواقع التي تساهم في عمل التصاميم التفاعلية بأسلوب سهل وميسر , في مقالة سابقة قمنا ايضاَ بشرح ابرز الأخطاء الشائعة اثناء تصميم الإنفوجرافيك والتي تطرقنا اليها من خلال رسم بياني عن مدى اهمية التصميم و المراجع المستخدمة في التصميم.
أما اليوم قمنا بالتركيز على ابرز 3 خطوات اثناء تصميم الإنفوجرافيك , في الصورة اعلاه قمنا بالتركيز على 3 عوامل الا وهي كالتالي :-
1- طول وعرض التصميم الإنفوجرافيكي
2- المراجع الصحيحة و السليمة اثناء انتقاء البيانات
3- حدوثية المراجع ومدى مصداقيتها .
جميع هذه العوامل مهمة اثناء عمل التصميم الإنفوجرافيكي , مراعاة قياس التصميم للمستخدم النهائي هو عامل اساسي فقد تختلف من تصميم لآخر , ان كنا نقوم بعمل تصميم مناسب لتصفحات الانترنت فعلى المصمم مراعاة قياس متصفحات الانترنت على سبيل المثال افضل تصفح للتصاميم الإنفوجرافيكية بالنسبة لنا هو 590×1600 شاهد مثال من هنا .اما بخصوص المراجع الصحيحة ومدى حداثتها سنقوم بشرح ذلك في مقالة لاحقاً .

Steps To Design Infographics & Free Tools خطوات عمل تصاميم انفوجرافيك ومواقع مهمة

لعمل تصاميم انفوجرافيكية يتوجب عليك اولاً معرفة ما هو الإنفوجرافيك أو ما يسمى بالبيانات التصورية و التفاعلية ومدى اهميتها , اما بشأن الخطوات لتصميم هذه الرسومات قد تتطلب الكثير من الجهد لتصميمها , في هذ المقالة سنتعرف على ابرز الادوات المقدمة من قبل مواقع عالمية والتي تساهم في رسم تصاميم تفاعلية , كما سنقوم بعمل شرح مبسط لكل من هذه الأدوات المتوفرة عبر الشبكة العنكبوتية, وقبل كل ذلك سأقوم بعمل شرح مصور مبسط لكيفية البدء ومعرفة الخطوات المهمة لعمل تصميم انفوجرافيكي.
مبادئ مهمة في التصميم الإنفوجرافيكي ؟
1- بساطة التصميم (عدم الحشو ), محاولة تجنب عمل صور أو تصاميم كثيرة في التصميم.
2- اتخاذ القرار بشأن الألوان , وعدم الأكثر من الألوان لونين او ثلاث لإبراز جدية التصميم.
3- البحث و الإطلاع على الأرقام ذات المصادر الموثوقة ( دراسات / بحوث ) معتمدة .
4- فَكر كمطلع نهائي , اول ما يتم ابرازه لدمج المشاهد أو الزائر في التصميم .
5- عمل سيناريو قبل البدء في التصميم .
6- ترتيب الأحداث و الأرقام باستخدام برنامج الـ ” Excel ” .
7- استخدام البرامج المتخصصة لتصميم الصور الجرافيكية كـ ( photoshope) .
8- وضع المصادر البحثية في نهاية التصميم , أما على يمين التصميم أو يسار التصميم .
مواقع مساهمة في التصاميم الإنفوجرافيكية ؟
1- الموقع [ Visual.ly ].
يوفر الموقع خاصية عمل تصاميم انفوجرافيكية وذلك بتحليل مواقع التواصل الإجتماعية كـ “تويتر” و ” الفيس بوك ” , يعتبر كأول مجتمع الكتروني تفاعلي عبر الشبكة العنكبوتية يهتم بالتصاميم الإنفوجرافيكية الهادفة , ينصح به.
2- الموقع [ Stat Planet ].
موقع متخصص ايضاً بعمل التصاميم التفاعلية وذلك بادخال البيانات ويقوم بدوره عمل اخراج رسم تفاعلي وحفظه كصورة أو ملف فلاش .
3- الموقع [ Inkscape ].
برنامج مفتوح يدعم خاصية الصور ذات الإمتداد SVG , تساعد النسخة الجديدة في عمل تصاميم جرافيكية والذي تمكنك بحفظها بامتدادات مختلفة أهما SVG .
4- الموقع [ Hohli ].
موقع متخصص بعمل الرسوم البيانية , لا يحتاج إلى تسجيل بإمكانك تزويد الموقع بالبيانات ويقوم بدوره عمل رسوم بيانية ذات طابع ثلاثي الأبعاد وحفظها بصيغة Jpeg , مع امكانية ادراج اللغة البرمجية بالموقع مباشرة لعرض الرسوم البيانية.
5- الموقع [ Many Eyes ].
موقع من تطوير شركة IBM يقدم الموقع خاصية متطورة في حفظ البيانات مع امكانية الرجوع إليها في وقت , يقدم الموقع خصائص جرافيكية تفاعلية ذات طابع احترافي يقوم الموقع باقتراح انسب التصاميم للبيانات المستخدمة من قبل المزود , يعتبر الموقع احد رواد التصاميم التفاعلية الإحترافية, ينصح باستخدامه.

6- الموقع [ Google Public Data ].
اداة متطور من مطوري شركة جوجل , مجانية ومتاحة للجميع , الإداة متطورة وداعمة للغة العربية , قمنا بعمل مثال في مقالة سابقة عن كيفية عمل تصميم تفاعلية باستخدام هذه الإداة, توفر هذه الإداء كمية مذهلة من التصاميم والتي لديها قدرة كبيرة في اخراج الرسوم و التصاميم التفاعلية , ينصح باستخدامه.
6- الموقع [ Tableau ].
 برنامج متطور في عمل تصاميم تفاعلية , يوفر الموقع مجموعة من الفيديوهات التعليمية لعمل هذه التصاميم عبر موقعهم , يتوجب عليك التسجيل عبر الموقع لعمل التصاميم الجرافيكية / التفاعلية, ينصح باستخدامه .