معرفی D3.js برای نمایش اطلاعات با رسم شکل ها و نمودارها در وب سایت
D3.js ، یک کتابخانه (Library) بر اساس زبان برنامه نویسی JavaScript می باشد که با استفاده از آن، می توانیم اطلاعات مورد نظر خود را در شکل ها و نمودارهایی در وب سایت نمایش دهیم. این کتابخانه، تنها یک فایل js است که آن را در صفحه وب سایت ذکر می کنید و سپس با نوشتن مقداری کد JavaScript در صفحه، می توانید شکل یا نمودار مورد نظر خود را رسم نمایید.
کتابخانه D3.js ، به صورت متن باز (Open Source) می باشد و شما می توانید کدهای اصلی آن را بخوانید.
کتابخانه D3.js ، می تواند شکل ها و نمودارهای متنوع و همچنین کاملا پیچیده ای را برای شما رسم کند و اگر به دنبال کتابخانه ای هستید که با استفاده از آن، بتوانید به سطح بالایی از تنوع و پیچیدگی در رسم شکل ها و نمودارها برسید، کتابخانه D3.js ، گزینه مناسبی می باشد.
در واقع مشکلی که خیلی از افراد با آن مواجه می شوند، این است که یک کتابخانه (Library) را برای رسم شکل ها و نمودارها انتخاب کرده و آن را در وب سایت خود به کار می برند، اما به مرور که نیاز پیدا می کنند که شکل ها و نمودارهای متنوع تر و پیچیده تری را در وب سایت خود رسم کنند، متوجه می شوند که کتابخانه (Library) مورد نظر، قابلیت رسم آن سطح از تنوع و پیچیدگی را ندارد (یا حداقل اجرای آنها با استفاده از آن کتابخانه، بسیار سخت و وقت گیر می باشد و عملا برنامه نویس به سراغ اجرای آنها نخواهد رفت) و بنابراین مجبور می شوند که کتابخانه (Library) قبلی را رها کرده و به سراغ کتابخانه ای (Library) بهتر و جامع تر (مثل همین D3.js) بروند.
بنابراین انتخاب کتابخانه ای مثل D3.js ، اگرچه ممکن است کدنویسی آن سخت تر از سایر کتابخانه ها (Library) باشد، اما انتخاب آن باعث می شود که در آینده مجبور نشویم برای متنوع تر، پیچیده تر و حرفه ای تر شدن شکل ها و نمودارهای وب سایت، نیاز به کتابخانه (Library) جدیدی داشته باشیم.
برای آشنایی با مثال هایی از شکل ها و نمودارهای رسم شده توسط کتابخانه D3.js ، می توانید به وب سایت آن مراجعه نمایید :
که صفحه اول آن به صورت زیر می باشد :
در صفحه اول این وب سایت، شکلی وجود دارد که ترکیبی از شکل های مختلف رسم شده توسط D3.js می باشد (به عنوان مثال هایی از کاربرد D3.js) و بر روی هر یک از آنها که کلیک نمایید، به وب سایت نمایش دهنده آن شکل متناظر خواهید رفت و می توانید خودتان، شکل رسم شده را بررسی نمایید :
در صفحه های زیر نیز می توانید فهرستی از مثال های اجرا شده بر اساس کتابخانه D3.js را مشاهده نمایید :
با توجه به اینکه این شکل ها اکثرا به صورت واکنشی هستند و به حرکت موس کاربر و یا انتخاب ها و کلیک های کاربر، واکنش نشان می دهند، بنده برخی از این شکل ها را به صورت نمونه انتخاب کرده ام و فیلم هایی را از چگونگی نمایش و واکنش آنها به انتخاب های کاربر تهیه نموده ام. شما با دیدن این فیلم ها، می توانید به یک دید اولیه در مورد گستردگی و پیچیدگی رسم شکل ها و نمودارها توسط کتابخانه D3.js برسید :
