آموزش با D3.js و Firebase تجسم داده بسازید

Build Data Visualizations with D3.js & Firebase

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: با نحوه استفاده از D3 (v5) و Firebase (Firestore) برای ایجاد تجسم داده های پویا SVG آشنا شوید. نمودارهای میله‌ای، نمودارهای دایره‌ای... آموزش D3 JS & Firebase (Firestore) از پایه ایجاد تجسم‌های مبتنی بر داده (نمودارها، نمودارها، نمودارها) با D3 JS ذخیره (و بازیابی) داده‌ها در یک پایگاه داده بلادرنگ به نام Firestore ( از Firebase) بصری سازی داده ها در زمان واقعی با Firestore ایجاد 3 پروژه با D3 و Firebase (Firestore) پیش نیازها: سطح پایه تا متوسط ​​جاوا اسکریپت سطح پایه تا متوسط ​​HTML سطح پایه تا متوسط ​​CSS

بیاموزید که چگونه با D3.js

تصاویری با ظاهر عالی ایجاد کنید

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

درباره انتخاب D3، تغییر سبک‌های ویژگی‌های SVG، مقیاس‌ها، محورها، انتقال‌ها، داده‌های سلسله مراتبی و بسیاری موارد دیگر خواهیم آموخت...

از Firebase Firestore برای به روز رسانی نمودارهای D3.js خود در زمان واقعی استفاده کنید

من همچنین به شما یاد خواهم داد که چگونه از Firestore (از Google Firebase) استفاده کنید - یک پایگاه داده NoSQL بلادرنگ که می توانیم داده های خود را در آن ذخیره کنیم. ما از این برای تقویت تجسم‌های D3.js خود در زمان واقعی (بدون به‌روزرسانی مرورگر) و ایجاد پویایی تعاملی و سرگرم‌کننده استفاده می‌کنیم.

ما همچنین 3 پروژه ایجاد خواهیم کرد تا مهارت های D3 Firebase خود را آزمایش کنیم - اول از همه یک برنامه ریز پول به نام Ninja Wonga، سپس یک ردیاب تناسب اندام به نام The Dojo و در نهایت یک نمودار درختی کارمند شرکت به نام Ninja Corp.

...چرا این همه نینجا؟

من در YouTube با بیش از 200000 مشترک و نزدیک به 1000 آموزش توسعه رایگان به عنوان Net Ninja نیز شناخته می شوم. قبل از اینکه دوره من را بخرید، می توانید سبک تدریس من را در آنجا بررسی کنید :).



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

معرفی دوره Course Introduction

معرفی دوره Course Introduction

  • معرفی Introduction

  • معرفی Introduction

  • نمونه هایی از D3.js در وب Examples of D3.js on the Web

  • نمونه هایی از D3.js در وب Examples of D3.js on the Web

  • ویرایشگر متن و بسته ها Text Editor & Packages

  • ویرایشگر متن و بسته ها Text Editor & Packages

  • فایل های دوره Course Files

  • فایل های دوره Course Files

  • منابع اضافی Extra Resources

  • منابع اضافی Extra Resources

مبانی SVG و D3 SVG and D3 Basics

  • الحاق عناصر Appending Elements

  • روش زنجیره‌ای و ویژگی‌ها Method Chaining & Attributes

مبانی SVG و D3 SVG and D3 Basics

  • SVG چیست؟ What are SVG's?

  • SVG چیست؟ What are SVG's?

  • اشکال SVG ساده Simple SVG Shapes

  • اشکال SVG ساده Simple SVG Shapes

  • مسیرهای SVG SVG Paths

  • مسیرهای SVG SVG Paths

  • راه اندازی D3.js Setting up D3.js

  • راه اندازی D3.js Setting up D3.js

  • انتخاب عناصر Selecting Elements

  • انتخاب عناصر Selecting Elements

  • الحاق عناصر Appending Elements

  • روش زنجیره‌ای و ویژگی‌ها Method Chaining & Attributes

  • SVG را پیامک کنید Text SVG's

  • SVG را پیامک کنید Text SVG's

  • گروه ها Groups

  • گروه ها Groups

  • خلاصه بخش Section Summary

  • خلاصه بخش Section Summary

استفاده از داده با D3 Using Data with D3

  • پیوستن داده ها به یک عنصر Joining Data to an Element

  • استفاده از توابع پیکان Using Arrow Functions

استفاده از داده با D3 Using Data with D3

  • پیوستن داده ها به یک عنصر Joining Data to an Element

  • استفاده از توابع پیکان Using Arrow Functions

  • پیوستن داده ها به چندین عنصر Joining Data to Multiple Elements

  • پیوستن داده ها به چندین عنصر Joining Data to Multiple Elements

  • انتخاب را وارد کنید The Enter Selection

  • انتخاب را وارد کنید The Enter Selection

  • داده های خارجی (JSON) External Data ( JSON )

  • داده های خارجی (JSON) External Data ( JSON )

نمودارهای مقیاس و میله Scales & Bar Charts

  • ایجاد یک مقیاس خطی Creating a Linear Scale

  • حداقل، حداکثر و وسعت Min, Max & Extent

  • ایجاد نمودار میله ای (محورها) Creating a Bar Chart ( Axes )

  • ترازو معکوس Inverting Scales

  • تیک Formatting Tick Formatting

نمودارهای مقیاس و میله Scales & Bar Charts

  • چرا ما به مقیاس های خطی نیاز داریم؟ Why We Need Linear Scales

  • چرا ما به مقیاس های خطی نیاز داریم؟ Why We Need Linear Scales

  • ایجاد یک مقیاس خطی Creating a Linear Scale

  • ترازو باند Band Scales

  • ترازو باند Band Scales

  • حداقل، حداکثر و وسعت Min, Max & Extent

  • ایجاد نمودار میله ای (گروه ها و حاشیه ها) Creating a Bar Chart ( Groups & Margins )

  • ایجاد نمودار میله ای (گروه ها و حاشیه ها) Creating a Bar Chart ( Groups & Margins )

  • ایجاد نمودار میله ای (محورها) Creating a Bar Chart ( Axes )

  • ترازو معکوس Inverting Scales

  • تیک Formatting Tick Formatting

پایگاه داده Firestore Firestore Database

  • تنظیم Firebase Config Setting up the Firebase Config

  • دریافت اطلاعات از Firestore Getting Data from Firestore

پایگاه داده Firestore Firestore Database

  • پایگاه داده Firestore چیست؟ What is a Firestore Database?

  • پایگاه داده Firestore چیست؟ What is a Firestore Database?

  • ایجاد پایگاه داده Firestore Creating a Firestore Database

  • ایجاد پایگاه داده Firestore Creating a Firestore Database

  • تنظیم Firebase Config Setting up the Firebase Config

  • دریافت اطلاعات از Firestore Getting Data from Firestore

الگوی به روز رسانی D3 The D3 Update Pattern

  • ورود و خروج از گروه ها Enter & Exit Groups

  • الگوی به روز رسانی در یک نگاه The Update Pattern at a Glance

  • انتخاب خروج The Exit Selection

  • به روز رسانی داده های ما Updating Our Data

الگوی به روز رسانی D3 The D3 Update Pattern

  • به روز رسانی تجسم ها Updating Visualizations

  • به روز رسانی تجسم ها Updating Visualizations

  • ورود و خروج از گروه ها Enter & Exit Groups

  • الگوی به روز رسانی در یک نگاه The Update Pattern at a Glance

  • ایجاد یک تابع به روز رسانی Creating an Update Function

  • ایجاد یک تابع به روز رسانی Creating an Update Function

  • تابع فاصله D3 D3 Interval Function

  • تابع فاصله D3 D3 Interval Function

  • انتخاب خروج The Exit Selection

  • به روز رسانی داده های بیدرنگ Firestore Firestore Realtime Data Updates

  • به روز رسانی داده های بیدرنگ Firestore Firestore Realtime Data Updates

  • به روز رسانی داده های ما Updating Our Data

انتقالات D3 D3 Transitions

  • Transitions را وارد کنید Enter Transitions

  • Tweens و Interpolation Tweens and Interpolation

انتقالات D3 D3 Transitions

  • D3 Transitions مقدمه D3 Transitions Introduction

  • D3 Transitions مقدمه D3 Transitions Introduction

  • Transitions را وارد کنید Enter Transitions

  • به روز رسانی انتقال Update Transitions

  • به روز رسانی انتقال Update Transitions

  • Merge and Refactor Merge and Refactor

  • Merge and Refactor Merge and Refactor

  • Tweens و Interpolation Tweens and Interpolation

پروژه یک - نمودار دونات (برنامه ریز بودجه) Project One - Donut Chart (Budget Planner)

  • افزودن داده به Firestore Adding Data to Firestore

  • تنظیم بیدرنگ داده Realtime Data Setup

  • راه حل پروژه Project Solution

  • Arc Enter Tween Arc Enter Tween

  • Arc Update Tween Arc Update Tween

  • افسانه ها Legends

پروژه یک - نمودار دونات (برنامه ریز بودجه) Project One - Donut Chart (Budget Planner)

  • معرفی و راه اندازی Introduction & Setup

  • معرفی و راه اندازی Introduction & Setup

  • قالب HTML و مادیت سازی HTML Template & Matetrialize

  • قالب HTML و مادیت سازی HTML Template & Matetrialize

  • راه اندازی Firestore Firestore Setup

  • راه اندازی Firestore Firestore Setup

  • افزودن داده به Firestore Adding Data to Firestore

  • افزودن داده به Firestore Adding Data to Firestore

  • نمودارهای پای و کمان Pie Charts & Arcs

  • نمودارهای پای و کمان Pie Charts & Arcs

  • تنظیم یک نمودار دایره ای Setting up a Pie Chart

  • تنظیم یک نمودار دایره ای Setting up a Pie Chart

  • ژنراتور مسیر قوس Arc Path Generator

  • ژنراتور مسیر قوس Arc Path Generator

  • تنظیم بیدرنگ داده Realtime Data Setup

  • تنظیم بیدرنگ داده Realtime Data Setup

  • رسم انتخاب Enter Drawing the Enter Selection

  • رسم انتخاب Enter Drawing the Enter Selection

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

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

  • چالش پروژه Project Challenge

  • چالش پروژه Project Challenge

  • راه حل پروژه Project Solution

  • Arc Enter Tween Arc Enter Tween

  • Arc Exit Tween Arc Exit Tween

  • Arc Exit Tween Arc Exit Tween

  • Arc Update Tween Arc Update Tween

  • افسانه ها Legends

تعامل و رویدادها با کاربر User Interaction & Events

  • رویدادهای موشواره Mouseover Events

  • انتقال های نامگذاری شده (رفع اشکال) Named Transitions (bug fix)

  • نکات ابزار Tooltips

تعامل و رویدادها با کاربر User Interaction & Events

  • تصاویر تعاملی D3 Interactive D3 Visuals

  • تصاویر تعاملی D3 Interactive D3 Visuals

  • شنوندگان رویداد Event Listeners

  • شنوندگان رویداد Event Listeners

  • رویدادهای موشواره Mouseover Events

  • انتقال های نامگذاری شده (رفع اشکال) Named Transitions (bug fix)

  • روی رویدادها کلیک کنید Click Events

  • روی رویدادها کلیک کنید Click Events

  • نکات ابزار Tooltips

پروژه دو - ردیاب تناسب اندام (نمودارهای خطی) Project Two - Fitness Tracker (Line Graphs)

  • پیش نمایش و راه اندازی پروژه Project Preview & Setup

  • افزودن داده به Firestore Adding Data to Firestore

  • تنظیم بیدرنگ داده Realtime Data Setup

  • تنظیم نمودار و حاشیه ها Graph Setup & Margins

  • قالب‌بندی زمان‌ها و محورها Formatting Times & Axes

  • افزودن داده های ساختگی Adding Dummy Data

  • فیلتر کردن داده ها Filtering Data

  • چالش پروژه (خطوط SVG) Project Challenge (SVG Lines)

  • راه حل چالش Challenge Solution

پروژه دو - ردیاب تناسب اندام (نمودارهای خطی) Project Two - Fitness Tracker (Line Graphs)

  • پیش نمایش و راه اندازی پروژه Project Preview & Setup

  • راه اندازی قالب HTML HTML Template Setup

  • راه اندازی قالب HTML HTML Template Setup

  • افزودن رویدادهای DOM Adding DOM Events

  • افزودن رویدادهای DOM Adding DOM Events

  • افزودن داده به Firestore Adding Data to Firestore

  • افزودن داده به Firestore Adding Data to Firestore

  • تنظیم بیدرنگ داده Realtime Data Setup

  • تنظیم نمودار و حاشیه ها Graph Setup & Margins

  • مقیاس‌های زمانی و گروه‌های محور Time Scales & Axes Groups

  • مقیاس‌های زمانی و گروه‌های محور Time Scales & Axes Groups

  • دامنه ها و محورها Domains & Axes

  • دامنه ها و محورها Domains & Axes

  • قالب‌بندی زمان‌ها و محورها Formatting Times & Axes

  • ورود و خروج از انتخاب ها Enter & Exit Selections

  • ورود و خروج از انتخاب ها Enter & Exit Selections

  • افزودن داده های ساختگی Adding Dummy Data

  • فیلتر کردن داده ها Filtering Data

  • ژنراتور مسیر خط Line Path Generator

  • ژنراتور مسیر خط Line Path Generator

  • اثر شناور نقطه داده Data Point Hover Effect

  • اثر شناور نقطه داده Data Point Hover Effect

  • چالش پروژه (خطوط SVG) Project Challenge (SVG Lines)

  • راه حل چالش Challenge Solution

  • خلاصه ی پروژه Project Summary

سلسله مراتب داده ها Data Hierarchy

  • در نظر گرفتن ساختار داده ها Data Structure Consideration

سلسله مراتب داده ها Data Hierarchy

  • سلسله مراتب داده چیست؟ What is Data Hierarchy?

  • سلسله مراتب داده چیست؟ What is Data Hierarchy?

  • در نظر گرفتن ساختار داده ها Data Structure Consideration

  • D3 Stratify & Root Nodes D3 Stratify & Root Nodes

  • D3 Stratify & Root Nodes D3 Stratify & Root Nodes

  • بسته بندی دایره ای (قسمت 1) Circle Packing (part 1)

  • بسته بندی دایره ای (قسمت 1) Circle Packing (part 1)

  • بسته بندی دایره ای (قسمت 2) Circle Packing (part 2)

  • بسته بندی دایره ای (قسمت 2) Circle Packing (part 2)

پروژه سه - نمودار درختی (نینجا Corp) Project Three - Tree Diagram (Ninja Corp)

  • پیش نمایش و راه اندازی پروژه Project Preview & Setup

  • افزودن اطلاعات Firestore Adding Firestore Data

  • تنظیم بیدرنگ داده Realtime Data Setup

  • تنظیم نمودار Graph Setup

  • مولدهای درختی Tree Generators

  • چالش پروژه - مقیاس ترتیبی Project Challenge - Ordinal Scale

  • راه حل چالش Challenge Solution

  • خلاصه ی پروژه Project Summary

پروژه سه - نمودار درختی (نینجا Corp) Project Three - Tree Diagram (Ninja Corp)

  • پیش نمایش و راه اندازی پروژه Project Preview & Setup

  • قالب HTML HTML Template

  • قالب HTML HTML Template

  • افزودن اطلاعات Firestore Adding Firestore Data

  • تنظیم بیدرنگ داده Realtime Data Setup

  • تنظیم بیدرنگ داده Realtime Data Setup

  • تنظیم نمودار Graph Setup

  • مولدهای درختی Tree Generators

  • گره ها وارد انتخاب می شوند Nodes Enter Selection

  • گره ها وارد انتخاب می شوند Nodes Enter Selection

  • پیوندها وارد انتخاب می شوند Links Enter Selection

  • پیوندها وارد انتخاب می شوند Links Enter Selection

  • موقعیت های گره Node Positions

  • موقعیت های گره Node Positions

  • چالش پروژه - مقیاس ترتیبی Project Challenge - Ordinal Scale

  • راه حل چالش Challenge Solution

  • خلاصه ی پروژه Project Summary

  • خلاصه ی پروژه Project Summary

ES6 و موارد اضافی ES6 & Extras

  • روش‌های فیلتر و نقشه Filter & Map Methods

  • رشته های الگو Template Strings

ES6 و موارد اضافی ES6 & Extras

  • توابع پیکان Arrow Functions

  • توابع پیکان Arrow Functions

  • مبانی وعده Promise Basics

  • مبانی وعده Promise Basics

  • روش‌های فیلتر و نقشه Filter & Map Methods

  • رشته های الگو Template Strings

D3 v6/v7 D3 v6/v7

D3 v6/v7 D3 v6/v7

  • راهنمای مهاجرت D3 v6/v7 D3 v6/v7 migration guide

  • راهنمای مهاجرت D3 v6/v7 D3 v6/v7 migration guide

راه اندازی Firestore Firestore Setup

راه اندازی Firestore Firestore Setup

  • مراحل راه اندازی Firestore Firestore setup walkthrough

  • مراحل راه اندازی Firestore Firestore setup walkthrough

نمایش نظرات

آموزش با D3.js و Firebase تجسم داده بسازید
جزییات دوره
10.5 hours
107
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
17,075
4.9 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

The Net Ninja (Shaun Pelling) The Net Ninja (Shaun Pelling)

مدرس برنامه نویسی آنلاین و Net Ninja