آموزش D3.js در عمل: 17 پروژه تجسم داده D3.js بسازید

D3.js in Action: Build 17 D3.js Data Visualization Projects

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: D3.js (V 5) از ابتدا! پروژه های مفید برای تجسم داده های D3.js بسازید! D3.js برای مبتدیان آموزش D3 از سطح مبتدی تا حرفه ای ایجاد انواع مختلف تجسم داده ها درک هسته اصلی D3 - وارد کردن، به روز رسانی و خروج از انتخاب ها در عمق ایجاد 14 پروژه منحصر به فرد تجسم داده D3 بهترین استفاده را از داده های موجود برای نمایش بصری آن کنید. یادگیری مقیاس های D3 برای تنظیم اندازه تجسم ها یاد بگیرید چگونه یک محور برای مرجع اضافه کنید با استفاده از انتقال های D3 زندگی به تجسم ها اضافه کنید.

*** 17 ساعت محتوا ***

---------------------------------------------- ------------------------------------------------ ------------------------------------------------ --------------------------

"یک عکس ارزش هزار کلمه را دارد". درست است که مفاهیم با کمک نمودارها به راحتی قابل درک هستند. در دنیای داده محور امروزی، استفاده بهینه از داده های موجود به گونه ای که بینش های مفیدی از آن استخراج شود، بسیار مهم است. تجسم داده ها ساده ترین و سریع ترین راه برای ایجاد آن است. D3.js یک کتابخانه محبوب جاوا اسکریپت برای دستکاری اسناد در زمینه داده های داده است. D3 مخفف Data Driven Documents است. D3 به شما کمک می کند تا با استفاده از HTML، SVG و CSS به داده ها جان بخشید.

D3 به شما امکان می دهد داده ها را به یک مدل شی سند متصل کنید و سپس تبدیل های مبتنی بر داده را در سند اعمال کنید. عناصر را می توان با توجه به محتویات مجموعه داده اضافه، حذف یا تغییر داد. به عنوان مثال، می‌توانید از D3 برای تولید یک جدول HTML از آرایه‌ای از اعداد استفاده کنید یا حتی از همان داده‌ها برای ایجاد نمودار میله‌ای افقی با استفاده از SVG استفاده کنید. D3 تکنیک های تجسم و تعامل قدرتمند را با رویکرد داده محور برای دستکاری DOM ترکیب می کند.

"D3.js in Action: Build 17 D3.js Data Visualization Projects" یک دوره 100% عملی است که D3.js را از ابتدا با استفاده از آخرین نسخه موجود V5 به شما آموزش می دهد. همه مفاهیم به روشی بسیار دقیق و به راحتی قابل درک توضیح داده شده است. مربی به جای توضیح مفاهیم با نمونه کد از قبل آماده شده، کدها را همراهی می کند. با تکمیل این دوره، به اندازه کافی اعتماد به نفس خواهید داشت که بتوانید به تنهایی Visualizations D3.js را از ابتدا توسعه دهید.

در حال حاضر، 17 پروژه در این دوره گنجانده شده است که از ابتدا توسعه یافته اند. این به شما کمک می کند واقعاً اعتماد به نفس خود را در استفاده از دانش D3.js برای توسعه پروژه های تجسم داده در دنیای واقعی افزایش دهید. پروژه های توسعه یافته به عنوان بخشی از این دوره عبارتند از:

  1. نمودار میله ای افقی

  2. نمودار میله ای عمودی

  3. نمودار میله ای عمودی با محورها

  4. Scatterplot

  5. نمودار خطی

  6. نمودار منطقه

  7. نمودار منطقه انباشته

  8. نمودار دایره ای با افسانه

  9. نمودار میله ای متحرک

  10. ستاره های متحرک

  11. مرا بخندان

  12. درخت خانواده

  13. درخت خانوادگی کلاسیک

  14. درخت با تصاویر

  15. درخت خانواده کامل

  16. درخت خانوادگی قابل بزرگنمایی

  17. نمودار اجداد

پس به این دوره آموزشی فوق العاده D3.js بپیوندید و اوقات خوبی را با یادگیری D3.js (V5) سپری کنید.


سرفصل ها و درس ها

با D3.js آشنا باشید (مقدمه ای بر D3.js) Be Familiar with D3.js (Introduction to D3.js)

  • D3.js چیست؟ What is D3.js?

  • دستورالعمل های عمومی که باید دنبال کنید General Instructions to Follow

  • دستورالعمل های عمومی که باید دنبال کنید General Instructions to Follow

  • به چه نرم افزاری نیاز دارید؟ What Software You Need?

  • به چه نرم افزاری نیاز دارید؟ What Software You Need?

با D3.js آشنا باشید (مقدمه ای بر D3.js) Be Familiar with D3.js (Introduction to D3.js)

  • D3.js چیست؟ What is D3.js?

Primer on Technology Fundamentals (پیش نیازهای D3.js) Primer on Technology Fundamentals (D3.js Prerequisites)

  • انتخابگرهای CSS - قسمت 1 CSS Selectors - Part 1

  • انتخابگرهای CSS - قسمت 1 CSS Selectors - Part 1

  • کد منبع: CSS Selectors - Part 1 Source Code: CSS Selectors - Part 1

  • کد منبع: CSS Selectors - Part 1 Source Code: CSS Selectors - Part 1

  • انتخابگرهای CSS - قسمت 2 CSS Selectors - Part 2

  • انتخابگرهای CSS - قسمت 2 CSS Selectors - Part 2

  • کد منبع: CSS Selectors - Part 2 Source Code: CSS Selectors - Part 2

  • مبانی SVG - قسمت 1 SVG Basics - Part 1

  • کد منبع: SVG Basics - Part 1 Source Code: SVG Basics - Part 1

  • کد منبع: SVG Basics - Part 1 Source Code: SVG Basics - Part 1

  • مبانی SVG - قسمت 2 SVG Basics - Part 2

  • کد منبع: SVG Basics - Part 2 Source Code: SVG Basics - Part 2

  • کد منبع: SVG Basics - Part 2 Source Code: SVG Basics - Part 2

  • مبانی SVG - قسمت 3 SVG Basics - Part 3

  • مبانی SVG - قسمت 3 SVG Basics - Part 3

  • کد منبع: SVG Basics - Part 3 Source Code: SVG Basics - Part 3

  • کد منبع: SVG Basics - Part 3 Source Code: SVG Basics - Part 3

Primer on Technology Fundamentals (پیش نیازهای D3.js) Primer on Technology Fundamentals (D3.js Prerequisites)

  • کد منبع: CSS Selectors - Part 2 Source Code: CSS Selectors - Part 2

  • مبانی SVG - قسمت 1 SVG Basics - Part 1

  • مبانی SVG - قسمت 2 SVG Basics - Part 2

آماده شروع باشید (مبانی D3.js) Be Ready to Start (Basics of D3.js)

  • محیط توسعه D3.js را تنظیم کنید Set Up D3.js Development Environment

  • محیط توسعه D3.js را تنظیم کنید Set Up D3.js Development Environment

  • کد منبع: محیط توسعه D3.js را تنظیم کنید Source Code: Set Up D3.js Development Environment

  • کد منبع: محیط توسعه D3.js را تنظیم کنید Source Code: Set Up D3.js Development Environment

  • عناصر مورد نیاز - قسمت 1 را انتخاب کنید Select the Required Elements - Part 1

  • کد منبع: عناصر مورد نیاز - قسمت 1 را انتخاب کنید Source Code: Select the Required Elements - Part 1

  • عناصر مورد نیاز - قسمت 2 را انتخاب کنید Select the Required Elements - Part 2

  • عناصر مورد نیاز - قسمت 2 را انتخاب کنید Select the Required Elements - Part 2

  • کد منبع: عناصر مورد نیاز - قسمت 2 را انتخاب کنید Source Code: Select the Required Elements - Part 2

  • به عناصر انتخاب شده استایل دهید Style the Selected Elements

  • به عناصر انتخاب شده استایل دهید Style the Selected Elements

  • کد منبع: عناصر انتخاب شده را سبک کنید Source Code: Style the Selected Elements

  • کد منبع: عناصر انتخاب شده را سبک کنید Source Code: Style the Selected Elements

  • کلاس را به عناصر انتخاب شده اضافه کنید Add Class to the Selected Elements

  • کد منبع: کلاس را به عناصر انتخاب شده اضافه کنید Source Code: Add Class to the Selected Elements

  • کد منبع: کلاس را به عناصر انتخاب شده اضافه کنید Source Code: Add Class to the Selected Elements

  • ویژگی ها را برای عناصر انتخاب شده تنظیم کنید Set Attributes to the Selected Elements

  • ویژگی ها را برای عناصر انتخاب شده تنظیم کنید Set Attributes to the Selected Elements

  • کد منبع: ویژگی ها را برای عناصر انتخاب شده تنظیم کنید Source Code: Set Attributes to the Selected Elements

  • محتوا را برای عناصر انتخاب شده تنظیم کنید Set Content for the Selected Elements

  • کد منبع: محتوا را برای عناصر انتخاب شده تنظیم کنید Source Code: Set Content for the Selected Elements

  • افزودن عناصر جدید Add New Elements

  • کد منبع: افزودن عناصر جدید Source Code: Add New Elements

  • کد منبع: افزودن عناصر جدید Source Code: Add New Elements

  • Hands-On: SVG در حال پرواز ایجاد کنید Hands-On: Create SVG on the Fly

  • کد منبع: Hands-On - ایجاد SVG در پرواز Source Code: Hands-On - Create SVG on the Fly

  • کد منبع: Hands-On - ایجاد SVG در پرواز Source Code: Hands-On - Create SVG on the Fly

آماده شروع باشید (مبانی D3.js) Be Ready to Start (Basics of D3.js)

  • عناصر مورد نیاز - قسمت 1 را انتخاب کنید Select the Required Elements - Part 1

  • کد منبع: عناصر مورد نیاز - قسمت 1 را انتخاب کنید Source Code: Select the Required Elements - Part 1

  • کد منبع: عناصر مورد نیاز - قسمت 2 را انتخاب کنید Source Code: Select the Required Elements - Part 2

  • کلاس را به عناصر انتخاب شده اضافه کنید Add Class to the Selected Elements

  • کد منبع: ویژگی ها را برای عناصر انتخاب شده تنظیم کنید Source Code: Set Attributes to the Selected Elements

  • محتوا را برای عناصر انتخاب شده تنظیم کنید Set Content for the Selected Elements

  • کد منبع: محتوا را برای عناصر انتخاب شده تنظیم کنید Source Code: Set Content for the Selected Elements

  • افزودن عناصر جدید Add New Elements

  • Hands-On: SVG در حال پرواز ایجاد کنید Hands-On: Create SVG on the Fly

اتصالات داده D3.js (هسته اصلی D3.js) D3.js Data Joins (The Core of D3.js)

  • به آرایه ای از داده ها با عناصر انتخاب شده بپیوندید Join an Array of Data with Selected Elements

  • به آرایه ای از داده ها با عناصر انتخاب شده بپیوندید Join an Array of Data with Selected Elements

  • کد منبع: به آرایه ای از داده ها با عناصر انتخاب شده بپیوندید Source Code: Join an Array of Data with Selected Elements

  • به آرایه ای از اشیاء با عناصر انتخاب شده بپیوندید Join an Array of Objects with Selected Elements

  • به آرایه ای از اشیاء با عناصر انتخاب شده بپیوندید Join an Array of Objects with Selected Elements

  • کد منبع: به آرایه ای از اشیاء با عناصر انتخاب شده بپیوندید Source Code: Join an Array of Objects with Selected Elements

  • کد منبع: به آرایه ای از اشیاء با عناصر انتخاب شده بپیوندید Source Code: Join an Array of Objects with Selected Elements

  • مقدمه ای بر اتصال داده ها: هسته D3.js Introduction to Data Joins: The Core of D3.js

  • مقدمه ای بر اتصال داده ها: هسته D3.js Introduction to Data Joins: The Core of D3.js

  • وارد، به‌روزرسانی و خروج از گزینه‌ها در نسخه 3 شوید Enter, Update and Exit Selections in Version 3

  • وارد، به‌روزرسانی و خروج از گزینه‌ها در نسخه 3 شوید Enter, Update and Exit Selections in Version 3

  • کد منبع: وارد، به روز رسانی و خروج از انتخاب در نسخه 3 Source Code: Enter, Update and Exit Selections in Version 3

  • وارد، به‌روزرسانی و خروج از انتخاب‌ها در نسخه 5 شوید Enter, Update and Exit Selections in Version 5

  • کد منبع: وارد، به روز رسانی و خروج از انتخاب در نسخه 5 Source Code: Enter, Update and Exit Selections in Version 5

  • جادوی واقعی D3 The Real Magic of D3

  • کد منبع: جادوی واقعی D3 Source Code: The Real Magic of D3

  • کد منبع: جادوی واقعی D3 Source Code: The Real Magic of D3

  • پروژه 1: نمودار میله ای افقی Project 1: Horizontal Bar Chart

  • پروژه 1: نمودار میله ای افقی Project 1: Horizontal Bar Chart

  • پروژه 2: نمودار میله ای عمودی Project 2: Vertical Bar Chart

اتصالات داده D3.js (هسته اصلی D3.js) D3.js Data Joins (The Core of D3.js)

  • کد منبع: به آرایه ای از داده ها با عناصر انتخاب شده بپیوندید Source Code: Join an Array of Data with Selected Elements

  • کد منبع: وارد، به روز رسانی و خروج از انتخاب در نسخه 3 Source Code: Enter, Update and Exit Selections in Version 3

  • وارد، به‌روزرسانی و خروج از انتخاب‌ها در نسخه 5 شوید Enter, Update and Exit Selections in Version 5

  • کد منبع: وارد، به روز رسانی و خروج از انتخاب در نسخه 5 Source Code: Enter, Update and Exit Selections in Version 5

  • جادوی واقعی D3 The Real Magic of D3

  • پروژه 2: نمودار میله ای عمودی Project 2: Vertical Bar Chart

تنظیم اندازه بالا یا پایین (مقیاس‌های D3.js) Adjust the Size Up or Down (D3.js Scales)

  • مقدمه ای بر مقیاس ها در D3.js Introduction to Scales in D3.js

  • مقدمه ای بر مقیاس ها در D3.js Introduction to Scales in D3.js

  • مقیاس های خطی Linear Scales

  • کد منبع: مقیاس های خطی Source Code : Linear Scales

  • از کدنویسی با حداقل و حداکثر اجتناب کنید Avoid Hardcoding with min and max

  • کد منبع: از کدنویسی با حداقل و حداکثر اجتناب کنید Source Code : Avoid Hardcoding with min and max

  • مقیاس های رنگی Color Scales

  • مقیاس های رنگی Color Scales

  • کد منبع: مقیاس رنگ Source Code: Color Scales

  • کد منبع: مقیاس رنگ Source Code: Color Scales

  • مقیاس های قدرت و لگاریتمی Power and Logarithmic Scales

  • کد منبع: مقیاس های قدرت و لگاریتمی Source Code: Power and Logarithmic Scales

  • مقیاس های زمانی: قسمت 1 Time Scales: Part 1

  • مقیاس های زمانی: قسمت 2 Time Scales: Part 2

  • مقیاس های زمانی: قسمت 2 Time Scales: Part 2

  • کد منبع: مقیاس های زمانی Source Code: Time Scales

  • کد منبع: مقیاس های زمانی Source Code: Time Scales

  • مقیاس های ترتیبی Sequential Scales

  • مقیاس های ترتیبی Sequential Scales

  • کد منبع: مقیاس های متوالی Source Code: Sequential Scales

  • کد منبع: مقیاس های متوالی Source Code: Sequential Scales

  • مقیاس های کوانتیز Quantize Scales

  • مقیاس های کوانتیز Quantize Scales

  • مقیاس چندکی و آستانه Quantile & Threshold Scales

  • کد منبع: مقیاس های کمی، کمی و آستانه ای Source Code: Quantize, Quantile & Threshold Scales

  • کد منبع: مقیاس های کمی، کمی و آستانه ای Source Code: Quantize, Quantile & Threshold Scales

  • ترازوی ترتیبی Ordinal Scales

  • کد منبع: ترازوی ترتیبی Source Code: Ordinal Scales

  • کد منبع: ترازوی ترتیبی Source Code: Ordinal Scales

تنظیم اندازه بالا یا پایین (مقیاس‌های D3.js) Adjust the Size Up or Down (D3.js Scales)

  • مقیاس های خطی Linear Scales

  • کد منبع: مقیاس های خطی Source Code : Linear Scales

  • از کدنویسی با حداقل و حداکثر اجتناب کنید Avoid Hardcoding with min and max

  • کد منبع: از کدنویسی با حداقل و حداکثر اجتناب کنید Source Code : Avoid Hardcoding with min and max

  • مقیاس های قدرت و لگاریتمی Power and Logarithmic Scales

  • کد منبع: مقیاس های قدرت و لگاریتمی Source Code: Power and Logarithmic Scales

  • مقیاس های زمانی: قسمت 1 Time Scales: Part 1

  • مقیاس چندکی و آستانه Quantile & Threshold Scales

  • ترازوی ترتیبی Ordinal Scales

یک محور برای مرجع داشته باشید (محورهای D3.js) Have an Axis for Reference (D3.js Axes)

  • محور X و Y را اضافه کنید Add X and Y Axis

  • کد منبع: محور X و Y را اضافه کنید Source Code: Add X and Y Axis

  • کد منبع: محور X و Y را اضافه کنید Source Code: Add X and Y Axis

  • به محور آنطور که می خواهید سبک دهید - قسمت 1 Style the Axis as You Want - Part 1

  • به محور آنطور که می خواهید سبک دهید - قسمت 1 Style the Axis as You Want - Part 1

  • به Axis همانطور که می خواهید سبک دهید - قسمت 2 (به روز رسانی به قسمت 1) Style the Axis as You Want - Part 2 (Update to Part 1)

  • کد منبع: محور را همانطور که می خواهید سبک کنید Source Code: Style the Axis as You Want

  • کد منبع: محور را همانطور که می خواهید سبک کنید Source Code: Style the Axis as You Want

  • Hands-On: نمایش 4 محور بر اساس ورودی کاربر - قسمت 1 Hands-On: Display 4 Axes Based on User Input - Part 1

  • Hands-On: نمایش 4 محور بر اساس ورودی کاربر - قسمت 1 Hands-On: Display 4 Axes Based on User Input - Part 1

  • Hands-On: نمایش 4 محور بر اساس ورودی کاربر - قسمت 2 Hands-On: Display 4 Axes Based on User Input - Part 2

  • Hands-On: نمایش 4 محور بر اساس ورودی کاربر - قسمت 2 Hands-On: Display 4 Axes Based on User Input - Part 2

  • Hands-On: نمایش 4 محور بر اساس ورودی کاربر - قسمت 3 (سخنرانی به روز رسانی) Hands-On: Display 4 Axes Based on User Input - Part 3 (Update Lecture)

  • Hands-On: نمایش 4 محور بر اساس ورودی کاربر - قسمت 3 (سخنرانی به روز رسانی) Hands-On: Display 4 Axes Based on User Input - Part 3 (Update Lecture)

  • کد منبع - Hands-On: نمایش 4 محور بر اساس ورودی کاربر Source Code - Hands-On: Display 4 Axes Based on User Input

  • پروژه 3: نمودار میله ای عمودی با محورها - قسمت 1 Project 3: Vertical Bar Chart with Axes - Part 1

  • پروژه 3: نمودار میله ای عمودی با محورها - قسمت 2 (به روز رسانی به قسمت 1) Project 3: Vertical Bar Chart with Axes - Part 2 (Update to Part 1)

  • پروژه 4: طرح پراکنده Project 4: Scatterplot

یک محور برای مرجع داشته باشید (محورهای D3.js) Have an Axis for Reference (D3.js Axes)

  • محور X و Y را اضافه کنید Add X and Y Axis

  • به Axis همانطور که می خواهید سبک دهید - قسمت 2 (به روز رسانی به قسمت 1) Style the Axis as You Want - Part 2 (Update to Part 1)

  • کد منبع - Hands-On: نمایش 4 محور بر اساس ورودی کاربر Source Code - Hands-On: Display 4 Axes Based on User Input

  • پروژه 3: نمودار میله ای عمودی با محورها - قسمت 1 Project 3: Vertical Bar Chart with Axes - Part 1

  • پروژه 3: نمودار میله ای عمودی با محورها - قسمت 2 (به روز رسانی به قسمت 1) Project 3: Vertical Bar Chart with Axes - Part 2 (Update to Part 1)

  • پروژه 4: طرح پراکنده Project 4: Scatterplot

رسم اشکال مختلف (اشکال D3.js) Draw Different Shapes (D3.js Shapes)

  • ژنراتور خط - قسمت 1 Line Generator - Part 1

  • ژنراتور خط - قسمت 2 Line Generator - Part 2

  • ژنراتور خط - قسمت 2 Line Generator - Part 2

  • کد منبع: Line Generator Source Code: Line Generator

  • پروژه 5: نمودار خطی - قسمت 1 Project 5: Line Chart - Part 1

  • پروژه 5: نمودار خطی - قسمت 1 Project 5: Line Chart - Part 1

  • پروژه 5: نمودار خط - قسمت 2 (به روز رسانی به قسمت 1) Project 5: Line Chart - Part 2 (Update to Part 1)

  • پروژه 5: نمودار خط - قسمت 2 (به روز رسانی به قسمت 1) Project 5: Line Chart - Part 2 (Update to Part 1)

  • ژنراتور منطقه Area Generator

  • ژنراتور منطقه Area Generator

  • کد منبع: Area Generator Source Code: Area Generator

  • کد منبع: Area Generator Source Code: Area Generator

  • پروژه 6: نمودار منطقه - قسمت 1 Project 6: Area Chart - Part 1

  • پروژه 6: نمودار منطقه - قسمت 2 Project 6: Area Chart - Part 2

  • پروژه 6: نمودار منطقه - قسمت 2 Project 6: Area Chart - Part 2

  • Stack Generator Stack Generator

  • Stack Generator Stack Generator

  • کد منبع: Stack Generator Source Code: Stack Generator

  • کد منبع: Stack Generator Source Code: Stack Generator

  • پروژه 7: نمودار مساحت انباشته - قسمت 1 Project 7: Stacked Area Chart - Part 1

  • پروژه 7: نمودار مساحت انباشته - قسمت 1 Project 7: Stacked Area Chart - Part 1

  • پروژه 7: نمودار مساحت انباشته - قسمت 2 Project 7: Stacked Area Chart - Part 2

  • پروژه 7: نمودار مساحت انباشته - قسمت 3 Project 7: Stacked Area Chart - Part 3

  • پروژه 7: نمودار مساحت انباشته - قسمت 3 Project 7: Stacked Area Chart - Part 3

  • Arc Generator - Part 1 Arc Generator - Part 1

  • Arc Generator - Part 1 Arc Generator - Part 1

  • کد منبع: Arc Generator - Part 1 Source Code: Arc Generator - Part 1

  • کد منبع: Arc Generator - Part 1 Source Code: Arc Generator - Part 1

  • Arc Generator - Part 2 Arc Generator - Part 2

  • کد منبع: Arc Generator - Part 2 Source Code: Arc Generator - Part 2

  • کد منبع: Arc Generator - Part 2 Source Code: Arc Generator - Part 2

  • Arc Generator - Part 3 Arc Generator - Part 3

  • Arc Generator - Part 3 Arc Generator - Part 3

  • کد منبع: Arc Generator - Part 3 Source Code: Arc Generator - Part 3

  • مولد پای Pie Generator

  • مولد پای Pie Generator

  • کد منبع: Pie Generator Source Code: Pie Generator

  • مولد نماد Symbol Generator

  • مولد نماد Symbol Generator

  • کد منبع: Symbol Generator Source Code: Symbol Generator

  • پروژه 8: نمودار دایره ای با افسانه - قسمت 1 Project 8: Pie Chart with Legend - Part 1

  • پروژه 8: نمودار پای با افسانه - قسمت 2 Project 8: Pie Chart with Legend - Part 2

  • پروژه 8: نمودار پای با افسانه - قسمت 2 Project 8: Pie Chart with Legend - Part 2

رسم اشکال مختلف (اشکال D3.js) Draw Different Shapes (D3.js Shapes)

  • ژنراتور خط - قسمت 1 Line Generator - Part 1

  • کد منبع: Line Generator Source Code: Line Generator

  • پروژه 6: نمودار منطقه - قسمت 1 Project 6: Area Chart - Part 1

  • پروژه 7: نمودار مساحت انباشته - قسمت 2 Project 7: Stacked Area Chart - Part 2

  • Arc Generator - Part 2 Arc Generator - Part 2

  • کد منبع: Arc Generator - Part 3 Source Code: Arc Generator - Part 3

  • کد منبع: Pie Generator Source Code: Pie Generator

  • کد منبع: Symbol Generator Source Code: Symbol Generator

  • پروژه 8: نمودار دایره ای با افسانه - قسمت 1 Project 8: Pie Chart with Legend - Part 1

تصاویر خود را متحرک کنید (Transitions D3.js) Animate Your Visualizations (D3.js Transitions)

  • مقدمه ای بر انتقال Introduction to Transitions

  • کد منبع: مقدمه ای بر انتقال Source Code: Introduction to Transitions

  • کد منبع: مقدمه ای بر انتقال Source Code: Introduction to Transitions

  • سرعت انیمیشن های خود را کنترل کنید Control the Speed of Your Animations

  • کد منبع: سرعت انیمیشن های خود را کنترل کنید Source Code: Control the Speed of Your Animations

  • پروژه 9: نمودار میله ای متحرک Project 9: Animated Bar Chart

  • زنجیره انتقال Transition Chaining

  • کد منبع: زنجیره انتقال Source Code: Transition Chaining

  • توئینینگ Tweening

  • کد منبع: توئینینگ Source Code: Tweening

  • پروژه 10: ستارگان متحرک Project 10: Moving Stars

  • پروژه 10: ستارگان متحرک Project 10: Moving Stars

  • پروژه 11: مرا بخندان - قسمت 1 Project 11: Make Me Laugh - Part 1

  • پروژه 11: مرا بخندان - قسمت 2 Project 11: Make Me Laugh - Part 2

تصاویر خود را متحرک کنید (Transitions D3.js) Animate Your Visualizations (D3.js Transitions)

  • مقدمه ای بر انتقال Introduction to Transitions

  • سرعت انیمیشن های خود را کنترل کنید Control the Speed of Your Animations

  • کد منبع: سرعت انیمیشن های خود را کنترل کنید Source Code: Control the Speed of Your Animations

  • پروژه 9: نمودار میله ای متحرک Project 9: Animated Bar Chart

  • زنجیره انتقال Transition Chaining

  • کد منبع: زنجیره انتقال Source Code: Transition Chaining

  • توئینینگ Tweening

  • کد منبع: توئینینگ Source Code: Tweening

  • پروژه 11: مرا بخندان - قسمت 1 Project 11: Make Me Laugh - Part 1

  • پروژه 11: مرا بخندان - قسمت 2 Project 11: Make Me Laugh - Part 2

تجسم های خود را تعاملی کنید (کشیدن و بزرگنمایی) Make Your Visualizations Interactive (Dragging and Zooming)

  • تعامل با استفاده از ماوس - قسمت 1 Interact using Mouse - Part 1

  • تعامل با استفاده از ماوس - قسمت 1 Interact using Mouse - Part 1

  • تعامل با استفاده از ماوس - قسمت 2 Interact using Mouse - Part 2

  • تعامل با استفاده از ماوس - قسمت 2 Interact using Mouse - Part 2

  • کد منبع: با استفاده از ماوس تعامل کنید Source Code: Interact using Mouse

  • کد منبع: با استفاده از ماوس تعامل کنید Source Code: Interact using Mouse

  • تجسم ها را قابل کشیدن کنید Make Visualizations Draggable

  • کد منبع: تجسم ها را قابل کشیدن کنید Source Code: Make Visualizations Draggable

  • کد منبع: تجسم ها را قابل کشیدن کنید Source Code: Make Visualizations Draggable

  • بزرگنمایی و کوچکنمایی تجسم در سطح فردی Zoom In and Zoom Out Visualization at Individual Level

  • بزرگنمایی و کوچکنمایی تجسم در سطح فردی Zoom In and Zoom Out Visualization at Individual Level

  • کد منبع: بزرگنمایی و کوچکنمایی تجسم در سطح فردی Source Code: Zoom In and Zoom Out Visualization at Individual Level

  • کد منبع: بزرگنمایی و کوچکنمایی تجسم در سطح فردی Source Code: Zoom In and Zoom Out Visualization at Individual Level

  • بزرگنمایی و کوچک نمایی تجسم به عنوان یک کل Zoom In and Zoom Out Visualization as a Whole

  • بزرگنمایی و کوچک نمایی تجسم به عنوان یک کل Zoom In and Zoom Out Visualization as a Whole

  • کد منبع: بزرگنمایی و کوچک نمایی تجسم به عنوان یک کل Source Code: Zoom In and Zoom Out Visualization as a Whole

  • کد منبع: بزرگنمایی و کوچک نمایی تجسم به عنوان یک کل Source Code: Zoom In and Zoom Out Visualization as a Whole

تجسم های خود را تعاملی کنید (کشیدن و بزرگنمایی) Make Your Visualizations Interactive (Dragging and Zooming)

  • تجسم ها را قابل کشیدن کنید Make Visualizations Draggable

با داده های خارجی در قالب های مختلف برخورد کنید Deal with External Data in Different Formats

  • چگونه داده های CSV را واکشی و پردازش کنیم؟ How to Fetch and Process CSV Data?

  • چگونه داده های CSV را واکشی و پردازش کنیم؟ How to Fetch and Process CSV Data?

  • چگونه داده های JSON را واکشی و پردازش کنیم؟ How to Fetch and Process JSON Data?

  • چگونه داده های XML را واکشی و پردازش کنیم؟ How to Fetch and Process XML Data?

  • چگونه داده های XML را واکشی و پردازش کنیم؟ How to Fetch and Process XML Data?

با داده های خارجی در قالب های مختلف برخورد کنید Deal with External Data in Different Formats

  • چگونه داده های JSON را واکشی و پردازش کنیم؟ How to Fetch and Process JSON Data?

ایجاد تجسم های پیشرفته بیشتر (طرح بندی های D3.js) Create More Advanced Visualisations (D3.js Layouts)

  • مقدمه ای بر چیدمان درختی - قسمت 1 Introduction to Tree Layout - Part 1

  • مقدمه ای بر چیدمان درختی - قسمت 1 Introduction to Tree Layout - Part 1

  • مقدمه ای بر چیدمان درختی - قسمت 2 Introduction to Tree Layout - Part 2

  • کد منبع: مقدمه ای بر طرح بندی درختی Source Code: Introduction to Tree Layout

  • کد منبع: مقدمه ای بر طرح بندی درختی Source Code: Introduction to Tree Layout

  • درخت در جهتی متفاوت Tree in a Different Direction

  • درخت در جهتی متفاوت Tree in a Different Direction

  • کد منبع: درخت در جهتی متفاوت Source Code: Tree in a Different Direction

  • کد منبع: درخت در جهتی متفاوت Source Code: Tree in a Different Direction

  • پروژه 12: درخت خانواده - قسمت 1 Project 12: Family Tree - Part 1

  • پروژه 12: درخت خانواده - قسمت 2 Project 12: Family Tree - Part 2

  • پروژه 12: درخت خانواده - قسمت 2 Project 12: Family Tree - Part 2

  • راه حل تعارض نام در شجره نامه Solution to Name Conflict in Family Tree

  • راه حل تعارض نام در شجره نامه Solution to Name Conflict in Family Tree

  • کد منبع: راه حل تعارض نام در شجره نامه Source Code: Solution to Name Conflict in Family Tree

  • پروژه 13: درخت خانوادگی کلاسیک - قسمت 1 Project 13: Classic Family Tree - Part 1

  • پروژه 13: درخت خانواده کلاسیک - قسمت 2 Project 13: Classic Family Tree - Part 2

  • پروژه 13: درخت خانواده کلاسیک - قسمت 2 Project 13: Classic Family Tree - Part 2

  • پروژه 13: درخت خانواده کلاسیک - قسمت 3 Project 13: Classic Family Tree - Part 3

  • پروژه 13: درخت خانواده کلاسیک - قسمت 3 Project 13: Classic Family Tree - Part 3

  • پروژه 14: درخت با تصاویر Project 14: Tree with Images

  • پروژه 15: درخت خانواده کامل Project 15: Complete Family Tree

  • پروژه 16: درخت خانوادگی قابل بزرگنمایی Project 16: Zoomable Family Tree

  • پروژه 17: نمودار اجداد - قسمت 1 Project 17: Ancestry Chart - Part 1

  • پروژه 17: نمودار اجداد - قسمت 1 Project 17: Ancestry Chart - Part 1

  • پروژه 17: نمودار اجداد - قسمت 2 Project 17: Ancestry Chart - Part 2

  • پروژه 17: نمودار اجداد - قسمت 3 Project 17: Ancestry Chart - Part 3

  • پروژه 17: نمودار اجداد - قسمت 4 Project 17: Ancestry Chart - Part 4

  • پروژه 17: نمودار اجداد - قسمت 4 Project 17: Ancestry Chart - Part 4

ایجاد تجسم های پیشرفته بیشتر (طرح بندی های D3.js) Create More Advanced Visualisations (D3.js Layouts)

  • مقدمه ای بر چیدمان درختی - قسمت 2 Introduction to Tree Layout - Part 2

  • پروژه 12: درخت خانواده - قسمت 1 Project 12: Family Tree - Part 1

  • کد منبع: راه حل تعارض نام در شجره نامه Source Code: Solution to Name Conflict in Family Tree

  • پروژه 13: درخت خانوادگی کلاسیک - قسمت 1 Project 13: Classic Family Tree - Part 1

  • پروژه 14: درخت با تصاویر Project 14: Tree with Images

  • پروژه 15: درخت خانواده کامل Project 15: Complete Family Tree

  • پروژه 16: درخت خانوادگی قابل بزرگنمایی Project 16: Zoomable Family Tree

  • پروژه 17: نمودار اجداد - قسمت 2 Project 17: Ancestry Chart - Part 2

  • پروژه 17: نمودار اجداد - قسمت 3 Project 17: Ancestry Chart - Part 3

بخش پاداش BONUS Section

  • سخنرانی جایزه: پیشنهاد ویژه در دوره دیگر ما BONUS Lecture: Special OFFER on Our Other Course

بخش پاداش BONUS Section

  • سخنرانی جایزه: پیشنهاد ویژه در دوره دیگر ما BONUS Lecture: Special OFFER on Our Other Course

نمایش نظرات

Udemy (یودمی)

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

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش D3.js در عمل: 17 پروژه تجسم داده D3.js بسازید
جزییات دوره
17 hours
145
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
2,926
4.5 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Crypters Infotech Crypters Infotech

راه حل های آموزشی ارتقای شغلی