آموزش 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");

آیا این نوشته را دوست داشتید؟
packt-d3-js-tips-tricks-and-techniques

تکنیک ها، نکات و ترفندهای D3.js


در این دوره، شما به بهترین شیوه هایی که حتی نمی دانید وجود دارد پی خواهید برد و با استفاده از آن ها می توانید کارایی و بهره وری خود را هنگام استفاده ا...

1400/03/20 258 بازدید
packt-introduction-to-d3-js-with-react

معرفی D3.js با React


این دوره به شما کمک می کند تا در محیط React به سرعت با D3.js کار کنید. این دوره به شما آموزش می دهد که چگونه در آخرین نسخه D3 - نسخه x.6 - برنامه ریزی...

1400/03/03 478 بازدید
pluralsight-getting-started-with-d3

آموزش شروع کار با D3


یک تصویر به اندازه هزاران کلمه ارزش دارد، و این هرگز حقیقی تر از مصورسازی داده ها نبوده است. در این دوره، با D3 شروع به کار می کنیم، و شما توانایی مصو...

1399/01/24 1265 بازدید
udacity-data-visualization-and-d3js

دوره آموزش D3.js و مصورسازی داده Udacity


اصول مصورسازی داده ها را یاد بگیرید و در برقراری ارتباط با داده ها تمرین کنید. برای ایجاد گرافیک از کتابخانه های مصورسازی (dimple.js و D3.js) استفاده ...

1398/12/28 1999 بازدید زیرنویس دارد
packtpub-d3-js-data-visualization-projects-video

آموزش پروژه های مصورسازی داده با D3.js


اگر بخواهید پروژه های مصورسازی داده فراگیر و جذاب را ایجاد کنید، D3.js ابزاری مناسب برای شماست. D3.js نیاز اصلی شما برای اتصال داده های دلخواه به یک م...

1397/07/29 1654 بازدید
packtpub-mapping-and-styling-in-d3-video

آموزش Mapping و Styling در D3


D3.js یک کتابخانه جاوا اسکریپت است که برای نمایش داده های دیجیتال در فرم پویای گرافیکی طراحی شده است. D3 به شما کمک می کند که به داده ها با استفاده از...

1397/07/05 1294 بازدید
آموزش-d3-js

آموزش D3.js


D3.js چیست؟ D3.js یک کتابخانه متن باز Javascript برای دستکاری سندها بر اساس داده ها می باشد. این فریمورک به شما کمک می کند با استفاده از HTML و CS...

1397/04/14 3940 بازدید
packtpub-applied-data-visualization-with-d3-video

آموزش مصورسازی داده با D3


فریمورک D3 به ما این امکان را می دهد تا به راحتی نمایش داده، ایجاد مصورسازی های داده محور و مبتنی بر استاندارد را انچام دهیم  که می تواند بر روی تمامی...

1397/04/05 1706 بازدید
packtpub-creating-data-visualization-with-d3-video

آموزش ایجاد مصورسازی داده با فریمورک D3


آیا می خواهید داده خود را معنا کنید؟ آیا می خواهید نمودارهای تعاملی، نمودارهای جغرافیایی و نقشه ها را به صورت موثر ایجاد کنید؟ در این صورت، این دوره و...

1397/04/05 1419 بازدید
wintellectnow-impressive-data-visualizations-with-d3

آموزش مصورسازی قابل توجه داده با D3


(Data Driven Documents (D3 یک کتابخانه جاوا اسکریپت برای ایجاد مصورسازی قابل توجه داده در برنامه های وب است. D3 براساس استاندارد HTML، CSS و SVG برای ...

1397/01/03 1317 بازدید
1396/10/18 1107 بازدید
lynda-d3-js-essential-training-for-data-scientists

آموزش D3.js برای دانشمندان علوم داده


این آموزش تصویری نحوه کار با فریمورک D3.js را برای دانشمندان علوم داده آموزش می دهد. این دوره آموزشی محصول موسسه Lynda است. سرفصل های این دوره: ب...

1395/11/17 2782 بازدید
pluralsight-d3-the-big-picture

آموزش فریمورک D3


در این آموزش تصویری با فریمورک D3 آشنا می شوید. این دوره آموزشی محصول Pluralsight است. سرفصل های این مجموعه: آشنایی با D3 تاریخچه D3 نمونه ها...

1395/10/03 2113 بازدید
packtpub-building-responsive-data-visualizations-with-d3-js

مصور سازی داده ها با D3.js


در این آموزش تصویری با مصور سازی داده ها به صورت واکنشگرا با استفاده از فریمورک D3.js آشنا می شوید. این دوره آموزشی محصول موسسه PacktPub است. سرفصل ه...

1395/02/08 2500 بازدید
packtpub-rapid-d3-js

آموزش سریع D3.js


در این آموزش تصویری با D3.js آشنا می شوید. این دوره به معرفی ابزارها و ویژگی ها و نحوه استفاده از D3.js می پردازد. در ادامه نحوه ساخت وب سایت ، تبدی...

1394/12/27 2139 بازدید
packtpub-mastering-d3-js

آموزش پیشرفته D3.js


این دوره D3.js را به صورت پیشرفته آموزش می دهد. این فیلم آموزشی برای توسعه دهندگان وب ارائه شده است که در مورد برنامه نویسی تابعی ، نحوه پردازش برنا...

1394/12/27 2175 بازدید
infiniteskills-learning-to-visualize-data-with-d3-js

آموزش Data Visualize در D3.js


در این آموزش تصویری Data Visualize در D3.js آشنا می شوید. این دوره برای کاربرانی که در حال حاضر با برخی از زبان های برنامه نویسی مانند: HTML، CSS، J...

1394/12/27 2150 بازدید
infiniteskills-intermediate-d3-js

آموزش D3.js


در این آموزش تصویری با D3.js در سطح متوسط آشنا می شوید. این دوره با نحوه کار با نمودار، طرح بندی داده ها، نقشه ها و انواع روشهای کدنویسی می پردازد. ...

1394/12/27 2023 بازدید