آموزش D3.js

آنچه در این صفحه می خوانید:

• معرفی D3.js
• تاریخچه D3.js
• ویژگی های D3.js
• مزایای D3.js
• برای شروع استفاده از D3.js چه چیزی را باید بدانم؟
• اصول فنی D3.js

معرفی D3.js

D3.js که به D3 معروف است یک کتابخانه جاوااسکریپت برای تولید visualization داده های پویا و تعاملی در مرورگرهای وب است. در دی تری جی اس از استانداردهای گرافیکی بردار مقیاس پذیر یا SVG، اچ تی ام ال و سی اس اس (CSS) استفاده شده است و دی تری جی اس جانشین فریمورک اولیه Protovis است. بر خلاف بسیاری از کتابخانه های دیگر، D3.js اجازه می دهد تا کنترل عالی بر نتیجه بصری نهایی داشته باشید. برخی از کاربردهای رایج شامل ایجاد گرافیک تعاملی برای وب سایت های خبری آنلاین، داشبورد اطلاعات برای مشاهده داده ها و تهیه نقشه از داده های GIS است. علاوه بر این، ماهیت صادراتی SVG باعث می شود تا از گرافیک های ایجاد شده توسط D3 در انتشارات چاپ استفاده شود.

دی تری جی اس یک کتابخانه جاوااسکریپت برای دستکاری اسناد بر اساس داده است. D3 به شما کمک می کند تا داده ها را با استفاده از HTML، SVG و CSS زنده کنید. تاکید D3 بر روی استانداردهای وب به شما توانایی های کامل مرورگرهای مدرن را بدون اینکه خود را به یک فریمورک اختصاصی متصل کنید، با ترکیب اجزای قدرتمند ویژوال و یک رویکرد مبتنی بر داده ها نسبت به دستکاری DOM می دهد.

دی تری جی اس به شما امکان می دهد تا داده های دلخواه را به یک الگوی شی اسناد یا DOM متصل کنید و سپس دگرگونی های داده محور را بر روی سند اعمال کنید. به عنوان مثال، می توانید از D3 برای تولید یک جدول HTML از مجموعه اعداد استفاده کنید. یا از همان داده ها برای ایجاد نمودار نوار SVG تعاملی با افکت جابجایی و فعل و انفعالات نرم استفاده کنید.

دی تری جی اس یک فریمورک یکپارچه نیست که به دنبال ارائه همه ویژگی های قابل تصور باشد. در عوض، D3 مشکل اساسی را حل می کند: دستکاری کارآمد اسناد بر اساس داده ها. این امر از ارائه وابسته به مالک جلوگیری می کند و انعطاف پذیری فوق العاده ای را به نمایش می گذارد، و قابلیت های کامل استانداردهای وب مانند HTML ،SVG و CSS را در معرض نمایش قرار می دهد. D3 با حداقل سربار بسیار سریع است و از مجموعه داده های بزرگ و رفتارهای پویا برای تعامل و انیمیشن پشتیبانی می کند. سبک عملکردی D3 امکان استفاده مجدد از کد را از طریق مجموعه متنوعی از ماژول های رسمی و community-developed فراهم می کند.

تاریخچه D3.js

تلاش های مختلفی برای ویژوال داده ها به مرورگرهای وب انجام شده است. قابل توجه ترین نمونه ها ابزار Preuse،Flare و Protovis بود که همگی می توانند به عنوان پیشینیان مستقیم D3.js در نظر گرفته شوند. Prefuse یک ابزار ویژوال ایجاد شده در سال 2005 بود که نیاز به استفاده از جاوا داشت و ویژوال در مرورگرها با افزونه جاوا ارائه می شد. Flare از سال 2007 بوجود آمد و ابزاری مشابه بود که از ActionScript استفاده می کرد و برای ارائه به یک افزونه Flash نیاز داشت.

در سال 2009، Jeff Heer،Mike Bostock و Vadim Ogievetsky از گروه ویژوال سازی از دانشگاه استنفورد، بر اساس تجربه استفاده از prefuse و Flare و توسعه آنها، Protovis که کتابخانه جاوااسکریپت است برای تولید گرافیک SVG از داده ها را ایجاد کردند. این کتابخانه به دست اندرکاران ویژوال داده ها و دانشگاهیان مشهور بود.

در سال 2011، توسعه Protovis متمرکز شد تا روی یک پروژه جدید یعنی D3.js کار کند. با بهره گیری از تجربیات Protovis ،Bostock و همراهی Heer و Ogievetsky، دی تری جی اس را توسعه دادند تا یک فریمورک بی نظیر تر ارائه دهند که در عین حال، بر روی استانداردهای وب متمرکز شده و عملکرد بهتری را ارائه دهد.

ویژگی های D3.js

• از استانداردهای وب استفاده می کند: D3 ابزاری بسیار قدرتمند برای ایجاد ویژوال سازی داده های تعاملی است. این نرم افزار از استانداردهای وب مدرن: SVG، HTML و CSS برای ایجاد ویژوال داده بهره برداری می کند.
• داده محور (Data-Driven): D3 مبتنی بر داده است. این می تواند از داده های استاتیک استفاده کرده یا آن را از سرور از راه دور در فرمت های مختلفی مانند Arrays، Objects، CSV، جی سان (JSON)، اکس ام ال (XML) و غیره بارگیری کند تا انواع مختلفی از نمودارها ایجاد شود.
• دستکاری DOM: دی تری به شما اجازه می دهد تا بر اساس داده های خود از مدل شی اسناد (DOM) دستکاری کنید.
• المنت های داده محور (Data-Driven): این داده ها را قادر می سازد عناصر پویا تولید کرده و استایل ها را بر روی عناصر بکار گیرید، اعم از آن یک جدول، نمودار یا سایر عناصر HTML و یا گروهی از عناصر.
• خواص دینامیکی: D3 انعطاف پذیری را برای ارائه خواص پویا در بیشتر تابع خود ایجاد می کند. خصوصیات را می توان به عنوان توابع داده تعریف کرد. این بدان معناست که داده های شما می توانند سبک ها و ویژگی های شما را هدایت کنند.
• انواع ویژوال: با D3، هیچ فرمت استاندارد ویژوال وجود ندارد. اما این امکان را برای شما فراهم می کند تا از جدول HTML گرفته تا نمودار Pie، از نمودارهای آبشاری گرفته تا نقشه های مکان یابی، هر چیزی را ایجاد کنید.
• ویژوال سفارشی: از آنجا که D3 با استانداردهای وب کار می کند، به شما امکان کنترل کامل بر ویژگی های ویژوال را می دهد.
• انتقال: D3 تابع ()transition را فراهم می کند. این تابع بسیار قدرتمند است زیرا در داخل، D3 منطقی را برای درهم آمیختن بین ارزش های شما و یافتن حالت های متناوب بدست می دهد.
• تعامل و انیمیشن: D3 پشتیبانی عالی برای انیمیشن با کارکردهایی مانند مدت ()duration() ،delay و ()ease می کند. انیمیشن های از یک حالت به حالت دیگر سریع و پاسخگو به تعامل کاربر است.

مزایای D3.js

• D3.js یک کتابخانه Javascript است. بنابراین، می توان از آن با هر فریمورک JS مورد نظر خود مانند انگولار جی اس (AngularJS)، ری اکت (React) یا امبر جی اس (Ember.js) استفاده کرد.
• D3 بر روی داده ها تمرکز دارد، بنابراین مناسب ترین و تخصصی ترین ابزار برای ویژوال داده ها است.
• D3 منبع باز است. بنابراین می توانید با سورس کار کنید و ویژگی های خاص خود را اضافه کنید.
• این نرم افزار با استانداردهای وب کار می کند، بنابراین برای استفاده از D3 به هیچ فناوری یا افزونه دیگری به جز مرورگر احتیاج ندارید.
• D3 با استانداردهای وب مانند HTML، CSS و SVG کار می کند، هیچ ابزار جدیدی برای یادگیری یا اشکال زدایی لازم برای کار بر روی D3 وجود ندارد.
• D3 هیچ ویژگی خاصی را ارائه نمی دهد، بنابراین به شما امکان کنترل کاملی بر ویژوال می دهد تا آن را به دلخواه خود تنظیم کنید. این مسئله به دیگر ابزارهای رایج مانند Tableau یا QlikView می دهد.
• از آنجا که D3 بسیار سبک وزن است و مستقیماً با استانداردهای وب کار می کند، بسیار سریع است و با مجموعه داده های بزرگ به خوبی کار می کند.

برای شروع استفاده از D3.js چه چیزی را باید بدانم؟

چندین فناوری وب مرتبط با استفاده از D3 وجود دارد. برای شروع استفاده از D3، باید با JavaScript، CSS، روش زنجیر زدن، SVG آشنا شوید. به علاوه به درک اساسی درباره DOM نیاز خواهید داشت.

HTML: درک اساسی از ساختار HTML ضروری است. در حالی که ما در این آموزش ها از عناصر HTML زیادی استفاده نخواهیم کرد، وقتی نقشه بصری را در کنار متن یا برخی از مطالب تکمیلی دیگر قرار دهید، در HTML مهارت لازم خواهید بود.

JavaScript یا Block Programming: اگرچه لازم نیست JavaScript را بشناسید، آشنایی با یک زبان برنامه نویسی به سبک بلاک ضروری است. اگر تجربه برنامه نویسی با یک زبان دیگر دارید، نباید در انتخاب اصول JavaScript مشکلی داشته باشید.

DOM: درک اساسی از سلسله مراتب مدل شیء سند و نحوه عملکرد آن.

CSS: درک Selector و ارتباط آن با DOM، استایل ها و ویژگی ها

ویژوال سازی / دیزاین: از آنجا که D3 هیچ الگویی را ارائه نمی دهد طراحی کاملاً در اختیار کاربر قرار دارد. نکته منفی این کنترل این است که کاربر باید درک درستی از نحوه ایجاد طرح های خوب داشته باشد.

همه اینها باعث ایجاد یک منحنی یادگیری شیب دار می شود، به خصوص اگر هرگز برنامه نویسی وب انجام نداده باشید.

اصول فنی D3.js

کتابخانه جاوا اسکریپت D3.js که در یک صفحه وب HTML قرار گرفته است، از توابع JavaScript از پیش ساخته استفاده می کند تا عناصر را انتخاب کند، اشیاء SVG را ایجاد کند، آنها را سبک کند، یا افکت های انتقال یا جلوه های پویا یا tooltips را به آنها اضافه کند. این اشیاء همچنین با استفاده از CSS می توانند به صورت گسترده ای طراحی شوند. مجموعه داده های بزرگ را می توان به راحتی با استفاده از توابع D3.js ساده به اشیاء SVG متصل کرد تا نمودارها و دیاگرام های متنی و گرافیکی غنی را تولید کنند. داده ها می توانند در قالب های مختلف، معمولاً JSON یا مقادیر جدا شده با کاما یا CSV یا geoJSON باشند، اما در صورت لزوم می توان توابع JavaScript را برای خواندن سایر قالب های داده نوشت.

انتخاب ها (Selections)

اصل مهم طراحی D3.js این است که برنامه نویس بتواند ابتدا از یک انتخاب کننده به سبک CSS استفاده کند تا مجموعه مشخصی از گره های Document Object Model (DOM) را انتخاب کند، سپس از اپراتورها استفاده کند تا آنها را به روشی مشابه jQuery دستکاری کند. به عنوان مثال، با استفاده از D3.js، ممکن است همه عناصر <p> ... </p> را انتخاب کنید، و سپس رنگ متن آنها را تغییر دهید.

انتخاب می تواند بر اساس برچسب (مانند مثال بالا)، کلاس، شناسه، ویژگی یا مکانی در سلسله مراتب باشد. پس از انتخاب عناصر، می توان عملیات را بر روی آنها اعمال کرد. این شامل گرفتن و تنظیم ویژگی ها، متون نمایش و سبک ها (مانند مثال بالا) است. عناصر همچنین ممکن است اضافه شده و حذف شوند. این فرایند اصلاح، ایجاد و از بین بردن عناصر HTML می تواند وابسته به داده باشد، که مفهوم اصلی D3.js است.

 d3.selectAll("p")                 // select all <p> elements
   .style("color", "lavender")     // set style "color" to value "lavender"
   .attr("class", "squares")       // set attribute "class" to value "squares"
   .attr("x", 50);                 // set attribute "x" (horizontal position) to value 50px

انتقال Transitions

با اعلام یک Transition، می توان مقادیر مشخصه ها و سبک ها را در مدت زمان مشخصی smooth یا نرم کرد. کد زیر باعث می شود همه عناصر HTML <p> ... </p> در یک صفحه به تدریج رنگ متن آنها به صورتی تغییر کند:

 d3.selectAll("p")             // select all <p> elements
   .transition("trans_1")      // transition with name "trans_1"
     .delay(0)                 // transition starting 0ms after trigger
     .duration(500)            // transitioning during 500ms
     .ease(d3.easeLinear)           // transition easing progression is linear...
   .style("color", "pink");