آموزش D3.js: راهنمای کامل تجسم داده های توسعه دهنده [ویدئو]

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

معرفی Introduction

• مسیر یادگیری - چگونه از دوره بیشترین بهره را ببرید Learning Path - How to Get the Most out of The Course

نصب ابزار توسعه Installing Development Tools

• نصب VSCode IDE و افزونه های مفید Installing VSCode IDE and Helpful Extensions

• با استفاده از مرورگر کروم Using Chrome Browser

مقدمه ای بر D3.JS Introduction to D3.JS

• مقدمه مختصر D3 D3 Brief Introduction

• وب سایت و دموهای D3 D3 Website and Demos

• راه اندازی پروژه با D3 Setting Up Project with D3

• SVG - مقدمه SVG - Introduction

• SVG Inline HTML - ایجاد یک دایره SVG Inline HTML - Creating a Circle

• SVG MDN Docs SVG MDN Docs

• ایجاد بوم و دایره D3 Creating D3 Canvas and Circle

• دو نقل قول یا نه برای Attr Double Quotes or Not for Attr

• ایجاد خطوط با SVG در D3 Creating Lines with SVG in D3

• متن SVG SVG Text

ایجاد تجسم به صورت پویا Creating Visualizations Dynamically

• ایجاد یک نوار و حرکت آن به صورت پویا Creating a Bar and Move it Dynamically

• نمایش سه میله روی صفحه ( وارونه ) Showing Three Bars on Screen (Upside Down)

• معکوس کردن yAxis Inverting the yAxis

• درک تابع "Enter()" و ساختن همه آن به صورت پویا Understanding the "Enter()" function and Making it All Dynamically

• پاک کردن کد Cleaning up the Code

• سفارشی کردن آرایه داده ما با اشیاء Customizing Our Data Array with Objects

• تجزیه JSON محلی و راه دور Parsing Local and Remote JSON

پروژه تجسم زلزله Earthquake Visualization Project

• راه اندازی پروژه Project Setup

• نمایش زمین لرزه ها - دایره ها در محور X Showing Earthquakes - Circles in the X-Axis

• نمایش زمین لرزه ها - به صورت پویا Showing Earthquakes - Dynamically

• اضافه کردن رویداد MouseOver Adding Event MouseOver

• نمایش یک راهنمای ابزار Showing a Tooltip

• نمایش راهنمای ابزار با داده Showing Tooltip with Data

مقیاس ها و نمودارهای بار - بازبینی شده Scales & BarCharts - Revisited

• بازبینی بارچارت ها و مقدمه ای بر مقیاس ها Revisiting Barcharts and Introduction to Scales

• مقیاس خطی چیست؟ What is Linear Scale

• ایجاد و پیاده سازی yScale Creating and Implementing yScale

• مقیاس باند Band Scale

• نهایی کردن مقیاس باند Finalizing Band Scale

• حاشیه ها و گروه ها Margins and Groups

• ایجاد xAxis و yAxis Creating xAxis and yAxis

• xAxis و نمودار نهایی معکوس شده است Final xAxis and Graph Inverted

• پاداش - اضافه کردن انیمیشن Bonus - Adding Animation

• رفع مشکل محور Fixing the Axis Issue

مسیرهای SVG SVG Paths

• معرفی مسیرهای SVG SVG Paths Introduction

• ایجاد مسیرهای SVG Creating SVG Paths

• ایجاد مسیرهای SVG با D3JS Creating SVG Paths with D3JS

• منحنی های D3 D3 Curves

• ایجاد نمودار منطقه ای - قسمت 1 Creating an Area Chart - Part 1

• تنظیم محدوده ها و دامنه ها - قسمت 2 Setting Ranges and Domains - Part 2

• افزودن محور - قسمت 3 Adding Axis - Part 3

• سفارشی سازی های CSS - قسمت 4 CSS Customizations - Part 4

• افزودن خط - قسمت 5 Adding Line - Part 5

• ترفندهای نهایی Final Tweaks

ایجاد نمودار دایره ای Creating a Pie Chart

• راه اندازی پروژه DACA Setting Up DACA Project

• مفاهیم نمودار دایره ای Pie Chart Concepts

• ایجاد زوایای پای Creating Pie Angles

• نمایش قوس روی صفحه Showing an Arc on Screen

• نمایش پویا نمودار دایره ای روی صفحه Dynamically Showing a Pie Chart on Screen

• افزودن رنگ های پویا به پای Adding Dynamic Colors to Pie

• افزودن یک راهنمای ابزار Adding a Tooltip

• زیباسازی نمودار پای Beautifying the Pie Chart

• اضافه شدن انیمیشن Tween Adding Tween Animation

پروژه نهایی - خدمات مهاجرت ایالات متحده Final Project - U.S. Immigration Services

• تجسم مهاجرت - نسخه ی نمایشی Immigration Visualization - Demo

• راه اندازی پروژه Project Setup

• کشیدن داده های CSV Pulling CSV Data

• ایجاد خوشه - قسمت 1 Creating Clusters - Part 1

• ایجاد خوشه - قسمت 2 Creating Clusters - Part 2

• ایجاد حلقه های خوشه - قسمت 3 Creating Clusters Circles - Part 3

• نمایش خوشه ها روی صفحه Showing Clusters on Screen

• نمایش نکته D3 Showing D3 Tip

• افسانه رنگ Color Legend

• اضافه کردن افسانه اندازه Adding Size Legend

• پروژه تمام شده Finished Project

ملزومات توسعه وب - HTML، CSS و جاوا اسکریپت The Essentials of Web Development - HTML, CSS and JavaScript

• وب جهانی (WWW) چیست و چگونه کار می کند What's the World Wide Web (WWW) And How it Works

• فناوری های وب و وب Web Technologies and the Web

• جاوا اسکریپت، HTML و CSS - مدفوع 3 پا JavaScript, HTML and CSS - The 3 Legged Stool

• آشنایی با ساختار سند HTML Understanding the HTML Document Structure

• عنوان HTML HTML Heading

• تگ پاراگراف HTML HTML Paragraph Tag

• برچسب خط شکست The Break line Tag

• قالب بندی HTML - Bio Page Formatting HTML - Bio Page

• اضافه کردن آدرس و خط شکست Adding Address and Break line

• تاکید و قالب بندی متن Emphasizing and Formatting Text

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

• عناصر HTML بیشتر More HTML Elements

• نهایی کردن قالب بندی HTML Finalizing HTML Formatting

ویژگی های HTML HTML Attributes

• ویژگی های HTML HTML Attributes

• ویژگی HTML - HREF و سبک HTML Attribute - HREF and Style

• تگ تصویر HTML HTML Image Tag

• عنوان HTML و ویژگی زبان HTML Title and Lang Attribute

• فهرست ویژگی های بیشتر HTML List of More HTML Attributes

• لیست نامرتب در HTML Unordered List in HTML

• نوع لیست ویژگی ها و لیست های تودرتو List Type Attributes and Nested Lists

• جدول HTML - مقدمه HTML Table - Introduction

• ایجاد یک جدول HTML Creating an HTML Table

• افزودن سبک حاشیه به جدول - CSS درون خطی Adding Border Style to Table - Inline CSS

CSS - استایل دادن به صفحات HTML CSS - Styling HTML Pages

• مقدمه ای بر CSS Introduction to CSS

• میز خود را با استایل شیت داخلی طراحی کنید Styling our Table with Internal Style Sheet

• چالش: یک صفحه HTML ساده ایجاد کنید CHALLENGE: Create a Simple HTML Page

• SOLUTION و بیشتر در مورد CSS و Button SOLUTION And More on CSS and Button

• قوانین CSS - سبک های قلم CSS Rules - Font Styles

• ویژگی کلاس The Class Attribute

• ویژگی ID The ID Attribute

ساخت یک صفحه ناوبری Building a Navigation Page

• ایجاد یک صفحه ناوبری - قسمت 1 Creating a Navigation Page - Part1

• ایجاد صفحه ناوبری - اضافه کردن Hover Navigation Page Creation - Adding Hover

• درک مدل جعبه Understanding the Box Model

• حذف حاشیه و بالشتک Removing Margin and Padding

• افزودن صفحات HTML بیشتر Adding More HTML Pages

• اضافه کردن مسیرهای صحیح به صفحات HTML Adding Correct Paths to HTML Pages

• برگه‌های سبک خارجی و پیوند دادن External Style Sheets adn Linking

• مقدمه ای بر DIV Introduction to DIV

• DIV و Float DIVs and Float

• ساختار محتوا در یک صفحه وب Structuring Content in a Web Page

• بازسازی دستی صفحات Manually Restructuring Pages

بخش بندی عناصر Sectioning Elements

• با استفاده از بخش بندی عناصر Using Sectioning Elements

• استفاده از بخش بندی عناصر در صفحه Using Sectioning Elements on a Page

• ساختار پاورقی ما Structuring our Footer

• نظرات نهایی در مورد HTML Final Thoughts About HTML

مبانی جاوا اسکریپت JavaScript Fundamentals

• مدفوع 3 پا - مقدمه ای بر جاوا اسکریپت 3 Legged Stool - Introduction to Javascript

• جاوا اسکریپت در کنسول کروم JavaScript in the Chrome Console

• اطلاعات بیشتر در مورد جاوا اسکریپت در کنسول More on JavaScript in the Console

• درک DOM Understanding the DOM

• محل تگ اسکریپت و چرا Location of the Script Tag and Why

• الحاق جاوا اسکریپت و متغیرها JavaScript Concatenation and Variables

• پوچ و تعریف نشده و بولی Null and Undefined and Boolean

• عملیات حسابی Arithmetic Operations

• باقی مانده Remainder

• علامت پلاس The Plus Sign

• مقدمه ای بر If Statement Introduction to If Statement

• مقایسه همسانی Identicality Comparison

• عملگرهای منطقی با عملگرهای شرطی Logical Operators with Conditional Operators

• اپراتور سه تایی The Ternary Operator

آرایه ها و حلقه های جاوا اسکریپت JavaScript Arrays & Loops

• مقدمه ای بر آرایه ها Introduction to Arrays

• دریافت آخرین مورد از یک آرایه Getting the Last Item of an Array

• برای حلقه ها For Loops

توابع و اشیاء جاوا اسکریپت JavaScript Functions and Objects

• مقدمه ای بر توابع Introduction to Functions

• انواع مختلف توابع Different Types of Functions

• پارامترهای تابع و بازده Function Parameters and Returns

• متغیرهای محلی و جهانی Local and Global Variables

• درک Local و اجازه Scope Variables Understanding Local and let Scope Variables

• مقدمه ای بر اشیاء Introduction to Objects

• ایجاد اولین شی JS ما Creating our First JS Object

• نمونه سازی اشیاء خودمان - سازندگان Instantiating our Own Objects - Constructors

DOM و BOM The DOM and The BOM

• DOM و BOM - استفاده از JS برای دسترسی به DOM The DOM and The BOM - Using JS to Access the DOM

• با استفاده از انتخابگر getElementById Using getElementById Selector

• با استفاده از querySelectors Using the querySelectors

• استفاده از CSS درون خطی با جاوا اسکریپت Applying inline CSS with JavaScript

• رویداد OnClick OnClick Event

• رهگیری رویدادهای بیشتر Intercepting More Events

• EventListeners EventListeners

• بیشتر در مورد EventListeners More on EventListeners

ساخت یک ماشین حساب نکته Building a Tip Calculator

• ساخت یک ماشین حساب نکته - قسمت 1 Build a Tip Calculator - Part 1

• ماشین حساب نکته - CSS - قسمت 2 Tip Calculator - CSS - Part 2

• ساخت یک ماشین حساب نکته - قسمت 3 Build a Tip Calculator - Part 3

• ساخت یک ماشین حساب نکته - قسمت 4 - گرفتن مقادیر فیلد ورودی Build a Tip Calculator - Part 4 - Grabbing Input Field Values

• ماشین حساب نکته - UI نهایی شده Tip Calculator - Finalized UI

• ماشین حساب نکته - نهایی Tip Calculator - Final

کجا برو بعد، از اینجا Where to Go Next, from Here

• بعد از اینجا کجا برویم؟ Where to Go Next, from Here?