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

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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s