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

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

معرفی دوره 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

معرفی دوره Course Introduction

مبانی 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

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

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

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

استفاده از داده با 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 )

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

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

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

نمودارهای مقیاس و میله 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

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

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

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

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

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

• تیک Formatting Tick Formatting

پایگاه داده 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

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

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

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

الگوی به روز رسانی 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 The D3 Update Pattern

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

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

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

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

انتقالات 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

انتقالات D3 D3 Transitions

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

• Tweens و Interpolation Tweens and Interpolation

پروژه یک - نمودار دونات (برنامه ریز بودجه) 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

پروژه یک - نمودار دونات (برنامه ریز بودجه) 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

تعامل و رویدادها با کاربر 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

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

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

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

• نکات ابزار Tooltips

پروژه دو - ردیاب تناسب اندام (نمودارهای خطی) 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

پروژه دو - ردیاب تناسب اندام (نمودارهای خطی) 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

سلسله مراتب داده ها 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)

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

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

پروژه سه - نمودار درختی (نینجا 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

پروژه سه - نمودار درختی (نینجا 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

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

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

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

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

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

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

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

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

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

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

D3 v6/v7 D3 v6/v7

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

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

D3 v6/v7 D3 v6/v7

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

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

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

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