لگو وب سایت هوشمندان
جستجو

اطلاعات ویدیوی آموزشی

آموزش D3.js، مصور سازی داده ها با استفاده از D3.js

آموزش حرفه ای Data Visualization with D3.js (مصور سازی داده ها با استفاده از D3.js)

 

D3.js چیست؟

D3 یک کتابخانه جاوا اسکریپت منبع باز (open source) است که برای مصور سازی داده ها استفاده می شود. D3 مخفف کلمه ی Data Driven Documents است و به طور کلی به شما اجازه می دهد که visualization  ها و گرافیک های تعاملی بسیار زیبا و داینامیک را در صفحه وب رسم کنید. به عبارت دیگر، D3 به شما این امکان را می دهد که به کمک HTML،CSS و JAVA SCRIPT به داده ها زندگی ببخشید یا اصلاحا نمودارهایی متحرک رسم کنید. از آنجایی که D3  بسیار سریع است، برای حجم داده های بالا عملکردی خوب و کارآمد دارد.

تاکید D3 بر استانداردهای وب، قابلیت های کامل مرورگرهای مدرن را به شما می دهد بدون اینکه نیاز باشد به   یک چارچوب خاصی وصل شوید ،همچنین امکان ترکیب اجزای بصری قدرتمند و رسم Visualization های پر قدرت را به شما می دهد.

از قابلیت های اساسی کتابخانه D3، می توان به ادغام شدن  با Tableau و obiee یا نسخه هوش تجاری اوراکل، کلیک ویو (Qlikview) و نرم افزار R اشاره کرد که می تواند گزارشی بسیار متفاوت و پویا را در اختیار کاربران خود قرار دهد.

آموزش مصور سازی داده ها با استفاده از D3 در وب سایت هوشمندان، از ابتدایی ترین مرحله که نصب و Install کردن D3.js  است تا مراحل پیشرفته که شامل ایجاد گرافیک های مختلف در SVG و کار با layout  های مختلف D3 و رسم انواع نمودارها و ایجا قابلیت responsive  و Interactive  کردن  و اضافه کردن events و Transition است گام به گام توضیح داده شده است و چندین پروژه کاربردی ازصفر تا 100 انجام شده است. 

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

برای مشاهده آموزش D3 با کیفیت بالا روی دانلود آموزش کلیک نمایید


فصل یک

  • نحوه نصب D3 و آماده سازی HTML برای کد نویسی
  • نحوه ایجاد selection های ساده در D3
  • کاربرد attributes و CSS در D3

فصل دو

  • کاربرد استفاده از Data در D3
  • ایجاد sub selection ها با استفاده از enter

فصل سه

  • معرفی SVG
  • رسم نمودار میله ای با استفاده از SVG

بخش 3-1

  • معرفی اشکال SVG
  • ایجاد دایره
  • ایجاد بیضی
  • ایجاد خط ( line)
  • اضافه کردن Text در SVG
  • معرفی و ایجاد path

بخش 3-2

  • نحوه رسم Area Chart
  • معرفی و نحوه ایجاد گروه در D3
  • فیلتر کردن داده ها در D3
  • معرفی Scale
  • معرفی و نحوه ایجاد مقیاس خطی و محور خطی
  • معرفی و نحوه رسم مقیاس زمانی و محور سری زمانی

فصل چهار

  • علت استفاده از مقیاس و معرفی مقیاس های خطی و ترتیبی روی نمودار میله ای
  • معرفی و ایجاد مقیاس رنگ روی نمودار میله ای

فصل پنج

  • اضافه کردن Event به نمودار میله ای
  • اضافه کردن انیمیشن و متحرک سازی نمودار میله ای
  • نحوه اضافه کردن Tooltip به نمودار

فصل شش

  • مرتب سازی و Sort کردن داده ها
  • نحوه ایجاد محور عمودی و افقی روی نمودار میله ای
  • معرفی و نحوه استفاده از margin

فصل هفت

  • نحوه بازخوانی داده ها از فایل های اکسترنال (External data)
  • معرفی layout در D3
  • آشنایی با layout Pie
  • ایجاد نمودار های دایره ای

فصل هشت

  • معرفی و کار کردن با layout force
  • رسم گره ها در layout force
  • اضافه کردن متن به گره ها

فصل نه

  • ایجاد و نحوه رسم نمودار ورونی
  • تغییر حالت نمایش نمودار ورونی
  • ایجاد گرافیک تعاملی با استفاده از css

فصل ده

  • ایجاد و رسم نمودار درختی در d3

رضا نظری

53 ماه پیش

سلام وقت بخیر من آموزش رو خریداری کردم بالای صفحه نوشته به بخش دانلود بروید اما داخل بخش دانلود لینکی نیست که بتونم دنلود کنم. لطفا بررسی کنید

جناب آقای نظری عزیز ضمن عذرخواهی از مشکل به وجود آمده شما می توانید آموزش را دانلود بفرمایید با سپاس

ایمانه

62 ماه پیش

سلام خسته نباشید. فایل پروژه را هنوز دانلود نکرده، می گوید زمان دانلود آن تمام شده است. لطفا آن را فعال کنید.

درود بر شما زمان دانلود برای شما 24 ساعت دیگر تمدید گردید. ممنون بابت انتخاب شما

babolfazla

68 ماه پیش

سلام دوره تکمیل نشده است هنوز

سلام، آموزش خواندن اطلاعات از دیتابیس با استفاده از D3 در وب سایت هوشمندان قرار داده شد.

درود بیکران، به محض تکمیل شدن به شما خبر داده خواهد شد. ممنون از پیگیری شما

babolfazla

70 ماه پیش

سلام بهتر بود نمایش اطلاعات از بانک اطلاعاتی را هم اموزش می دادید

سلام، در آموزش پیشرفته d3 این مبحث توضیح داده شده است، دوره در حال ضبط است