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

D3.js یک کتابخانه قدرتمند جاوا اسکریپت است که به شما اجازه می دهد داده های خود را در مرورگر وب زنده کنید. به جای اینکه به نمودارهای آماده و محدود وابسته باشید، D3.js ابزارهای لازم را برای ساخت هر نوع نمودار و تصویرسازی داده ای خلاقانه ای که تصور کنید، در اختیارتان قرار می دهد. در واقع، این کتابخانه با اتصال مستقیم داده ها به عناصر صفحه وب (DOM)، به شما کنترل کاملی بر روی ظاهر و رفتار بصری اطلاعاتتان می دهد.

در این دوره چه مباحثی آموزش داده شده است؟

ما در این دوره به آموزش D3.js برای مصورسازی داده ها می پردازیم. قدرت بصری سازی داده ها را می توانید با این دوره جامع D3.js آزاد کنید. در این دوره گام به گام یاد می گیرید که چطور نمودارها و گرافیک های واکنش گرا، تعاملی و از نظر بصری خیره کننده بسازید. چه با داده های CSV، JSON یا داده های بلادرنگ (Real-Time) کار کنید، بر ابزارهای لازم برای وارد کردن، تبدیل و بصری سازی مجموعه داده های پیچیده، از جمله تکنیک های پیشرفته دستکاری داده مانند d3.stack() و d3.rollup() مسلط خواهید شد.

از مقیاس ها و محورها گرفته تا طراحی واکنش گرا، و از انتقال های پویا تا محرک های رویداد، این دوره به شما هر آنچه که برای زنده کردن داده هایتان نیاز دارید آموزش می دهد. این دوره برای توسعه دهندگان وب که به دنبال ارتقای مهارت های خود به بصری سازی های حرفه ای و آموزنده هستند—یا می خواهند D3 را به عنوان پایه ای برای استفاده در ابزارهای دیگر مانند Highcharts، Observable، یا ساخت ویژوال های سفارشی Power BI یاد بگیرند—ایده آل است. وارد شوید و کشف کنید که چگونه D3.js می تواند نحوه ارائه داده های شما را متحول کند.

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

مقدمه

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

۱. مرور دانش پایه ای وب

• مرورگرها چگونه HTML را تفسیر می کنند
• معرفی SVG
• بازآموزی CSS: چرا HTML و CSS با SVG کار نمی کنند
• طراحی واکنش گرا
• افزودن کتابخانه D3 به صفحه HTML
• درک DOM و کنسول

۲. ساخت نمودار میله ای ساده با D3

• افزودن SVG با D3
• افزودن مستطیل های مبتنی بر داده
• ویژگی های پویا برای اشکال
• مشاهده کد همان طور که مرورگر می بیند
• چالش: افزودن دایره برای هر نقطه داده
• راه حل: افزودن دایره برای هر نقطه داده

۳. معرفی اشکال پایه ای SVG

• رسم دایره ها و بیضی ها
• رسم خط ها و استایل دهی آن ها
• افزودن متن
• چالش: ساخت چراغ راهنمایی
• راه حل: ساخت چراغ راهنمایی

۴. اشکال پیشرفته با عنصر Path در D3

• معرفی path
• استفاده از تولیدکننده های خط و ناحیه
• استفاده از عناصر گروهی برای سازماندهی
• مدیریت مقادیر NaN با defined()
• چالش: نمودار خطی با داده های ناقص
• راه حل: نمودار خطی با داده های ناقص

۵. مقیاس ها و محور ها

• معرفی مقیاس ها
• موقعیت دهی عناصر با مقیاس خطی
• ایجاد محور خطی
• موقعیت دهی و قالب بندی محور
• ایجاد مقیاس زمانی
• ایجاد محور سری زمانی
• ایجاد مقیاس و محور ترتیبی (Ordinal)
• استفاده از مقیاس های رنگ
• چالش: افزودن مقیاس فارنهایت
• راه حل: افزودن مقیاس فارنهایت

۶. وارد کردن داده در D3

• پردازش فایل CSV با promises()
• رسم نمودار خطی از داده CSV
• پردازش و نمایش JSON تو در تو با انتخاب های تو در تو
• درک و استفاده از D3 fetch
• چالش: نمودار خطی از صفر با مقیاس ها و تولیدکننده ها
• راه حل: نمودار خطی از صفر با مقیاس ها و تولیدکننده ها

۷. ماژول های چیدمان (Layout)

• ساخت درخت از JSON با D3-hierarchy
• ایجاد نمودار درختی (Treemap) با D3-hierarchy
• نمودارهای دایره ای و قوس ها با D3-shape
• استفاده از افزونه های جامعه: D3-hexbin
• چالش: ساخت نمودار دونات
• راه حل: ساخت نمودار دونات

۸. پیشرفته کردن داده ها و انتخاب ها

• رسم ناحیه انباشته با D3.stack() و D3.area()
• رسم نمودار ناحیه انباشته
• مدیریت تغییرات داده با انتخاب های enter و exit
• ساده سازی انتخاب های enter و exit با merge() و join()
• پردازش داده با group() و rollup()
• تسلط بر merge()، map()، sort() و filter()
• چالش: ساخت نمودار انباشته
• راه حل: ساخت نمودار انباشته

۹. تعاملی سازی

• واکنش گرا کردن گرافیک
• استفاده از CSS برای ایجاد انتقال ها
• درک انتقال های D3
• رویدادهای D3 و داده های آن ها
• معرفی بزرگنمایی، کشیدن و انتخاب محدوده (brushing) در D3
• چالش: هاور و راهنمای ابزار (Tooltips)
• راه حل: هاور و راهنمای ابزار

جمع بندی

• ارتقا سطح در D3

حاصل دوره

با گذراندن این دوره، دانشجو می تواند داده ها را با D3.js به نمودارها و گرافیک های پویا و واکنش گرا تبدیل کند، مهارت کار با SVG، مقیاس ها، محور ها و داده های مختلف (CSV و JSON) را به دست می آورد. همچنین توانایی طراحی نمودارهای تعاملی و حرفه ای مانند میله ای، خطی، دایره ای و درختی را کسب می کند.