دوره آموزشی یادگیری اصولی D3.js
6 ساعت 40 دقیقهمتوسط2025-07-24
مدرسین

Emma Saunders
Data Consultant specializing in data visualization on the web
جزئیات دوره
با این دوره جامع D3.js، قدرت تصویرسازی دادهها (Data Visualization) رو باز کن! این دوره بهت یاد میده چطور نمودارها و گرافیکهای تعاملی، واکنشگرا و جذاب بسازی، اونم مرحلهبهمرحله.
چه با دادههای CSV، JSON یا دادههای لحظهای (Real-time) کار کنی، یاد میگیری چطور دادهها رو وارد، تبدیل و به شکل بصری و حرفهای نمایش بدی. حتی با تکنیکهای پیشرفته مثل d3.stack() و d3.rollup() آشنا میشی تا بتونی دادههای پیچیده رو مدیریت کنی.
از اسکیلها (scales) و محورها (axes) گرفته تا طراحی واکنشگرا، انیمیشنهای پویا و رویدادهای تعاملی، این دوره هر چیزی که برای زنده کردن دادهها نیاز داری رو بهت یاد میده.
این دوره برای توسعهدهندههای وبی که میخوان مهارتشون رو تو ساخت تصاویر حرفهای و جذاب ارتقا بدن یا میخوان D3.js رو بهعنوان پایهای برای کار با ابزارهای دیگه مثل Highcharts، Observable یا حتی ساخت Visualهای سفارشی برای Power BI یاد بگیرن، عالیه!
🎯 اهداف یادگیری
درک اصول اصلی تصویرسازی داده در مرورگر مثل دستکاری DOM، استفاده از عناصر SVG، اتصال دادهها (Data Binding) و مقیاسها
وارد کردن و تبدیل دادهها با D3.js برای نمایش بصری بهتر
ساخت نمودارهای تعاملی و واکنشگرا همراه با رویدادها و انیمیشنهای پویا
استفاده از ماژولهای Layout، مقیاسها و محورها برای ساخت نمودارهای حرفهای
انتخاب تکنیک مناسب D3 برای انواع دادههای مختلف و اهداف ارتباطی متفاوت
چه با دادههای CSV، JSON یا دادههای لحظهای (Real-time) کار کنی، یاد میگیری چطور دادهها رو وارد، تبدیل و به شکل بصری و حرفهای نمایش بدی. حتی با تکنیکهای پیشرفته مثل d3.stack() و d3.rollup() آشنا میشی تا بتونی دادههای پیچیده رو مدیریت کنی.
از اسکیلها (scales) و محورها (axes) گرفته تا طراحی واکنشگرا، انیمیشنهای پویا و رویدادهای تعاملی، این دوره هر چیزی که برای زنده کردن دادهها نیاز داری رو بهت یاد میده.
این دوره برای توسعهدهندههای وبی که میخوان مهارتشون رو تو ساخت تصاویر حرفهای و جذاب ارتقا بدن یا میخوان D3.js رو بهعنوان پایهای برای کار با ابزارهای دیگه مثل Highcharts، Observable یا حتی ساخت Visualهای سفارشی برای Power BI یاد بگیرن، عالیه!
🎯 اهداف یادگیری
درک اصول اصلی تصویرسازی داده در مرورگر مثل دستکاری DOM، استفاده از عناصر SVG، اتصال دادهها (Data Binding) و مقیاسها
وارد کردن و تبدیل دادهها با D3.js برای نمایش بصری بهتر
ساخت نمودارهای تعاملی و واکنشگرا همراه با رویدادها و انیمیشنهای پویا
استفاده از ماژولهای Layout، مقیاسها و محورها برای ساخت نمودارهای حرفهای
انتخاب تکنیک مناسب D3 برای انواع دادههای مختلف و اهداف ارتباطی متفاوت
مهارت ها
D3.jsWeb Marketing AnalyticsData VisualizationFront-End Web DevelopmentData AnalysisMarketingEssential TrainingWeb DevelopmentData ScienceBusiness Analysis and StrategyBusiness Software and ToolsOpen Source
سرفصل ها
۰. مقدمه
- 01 - تصاویر دادههای خود را با D3.js متحول کنید
- 02 - توضیح D3
- 03 - آنچه باید بدانید
- 04 - استفاده از فایلهای تمرین
۱. مرور دانش پایه وب
- 05 - چگونه مرورگرها HTML را درک میکنند
- 06 - معرفی SVG
- 07 - فراموش کردن CSS - چرا HTML CSS با SVG کار نمیکند
- 08 - طراحی واکنشگرا
- 09 - وارد کردن کتابخانه D3 به صفحه HTML شما
- 10- آشنایی با DOM و کنسول
۲. ساخت یک نمودار میلهای ساده با D3
- 11 - اضافه کردن یک SVG با D3
- 12 - افزودن مستطیلهای دادهمحور
- 13 - ویژگیهای پویا برای اشکال
- 14 - دیدن کد به شکلی که مرورگر آن را میبیند
- 15 - چالش - اضافه کردن دایره برای هر نقطه داده
- 16 - راه حل - اضافه کردن دایره برای هر نقطه داده
۳. معرفی تمام شکلهای پایه SVG
- 17- رسم دایره و بیضی
- 18- رسم خطوط و استایل دادن به آنها
- 19 - اضافه کردن متن
- 20 - چالش - ایجاد چراغ راهنمایی
- 21 - راه حل - ایجاد چراغ راهنمایی
۴. شکلهای پیشرفته با عنصر مسیر D3
- 22 - معرفی مسیر
- 23 - استفاده از مولدهای خط و مساحت
- 24 - استفاده از عناصر گروهی برای سازماندهی عناصر
- 25 - کار با NaNها با استفاده از defined()
- 26 - چالش - نمودار خطی با دادههای از دست رفته
- 27 - راه حل - نمودار خطی با دادههای از دست رفته
۵. ترازو و محور
- 28- معرفی مقیاسها
- 29 - قرار دادن عناصر با مقیاس خطی
- 30 - ایجاد یک محور خطی
- 31 - موقعیتیابی و قالببندی محور ما
- 32 - ایجاد یک مقیاس زمانی
- 33 - ایجاد محور سری زمانی
- 34 - ایجاد یک مقیاس ترتیبی و محور
- 35 - استفاده از مقیاسهای رنگی
- 36 - چالش - اضافه کردن مقیاس فارنهایت
- 37 - راه حل - اضافه کردن مقیاس فارنهایت
۶. وارد کردن دادهها به D3
- 38 - تجزیه یک فایل CSV با استفاده از promise()
- 39 - رسم نمودار خطی از دادههای CSV
- 40 - تجزیه و نمایش JSON تو در تو با انتخابهای تو در تو
- 41- درک و استفاده از واکشی D3
- 42 - چالش - نمودار خطی از ابتدا، مقیاسها و ژنراتورها
- 43 - راه حل - نمودار خطی از ابتدا، مقیاسها و مولدها
۷. ماژولهای طرحبندی
- 44 - ساخت درخت از JSON با استفاده از سلسله مراتب D3
- 45 - قدرت بخشیدن به یک نقشه درختی از سلسله مراتب D3
- 46 - نمودارهای دایرهای و کمانهایی با شکل D3
- 47 - استفاده از افزونههای انجمن - استفاده از D3-hexbin
- 48 - چالش - ایجاد نمودار دونات
- 49 - راه حل - ایجاد نمودار دونات
۸. پیشبرد دادهها و انتخابها
- 50 - رسم ناحیه پشته با D3.stack() و D3.area()
- 51- رسم نمودار مساحت پشته
- 52 - مدیریت تغییرات دادهها با انتخابهای ورود و خروج
- 53 - سادهسازی انتخابهای ورود و خروج با استفاده از merge() و join()
- 54 - دستکاری دادهها با .group() و .rollup()
- 55 - تسلط بر merge()، map()، sort() و .filter()
- 56 - چالش - ایجاد نمودار پشتهای
- 57 - راه حل - ایجاد نمودار پشته ای
۹. تعامل
- 58 - واکنشگرا کردن گرافیک
- 59- استفاده از CSS برای ایجاد انتقالها
- 60- درک انتقالهای D3
- 61 - رویدادهای D3 و دادههایی که افشا میکنند
- 62 - معرفی زوم، کشیدن و براشینگ با D3
- 63 - چالش - شناور کردن و نکات ابزار
- 64 - راه حل - شناور کردن و نکات ابزار
نتیجهگیری
- 65 - ارتقاء سطح در D3