آموزش بصری‌سازی داده‌ها با جاوا اسکریپت، ری‌اکت و D3.js - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• چرا D3 و React را ترکیب کنیم؟ Why combine D3 and React?

• ساختار دوره How the Course is Structured

مرور مفاهیم پایه D3 Review of basic D3 concepts

• مقدمه‌ای بر D3 و مدل شیء سند (DOM) Introduction to D3 and the Document Object Model (DOM)

• اتصال داده با D3 Data binding with D3

• مقیاس‌بندی و استایل‌دهی داده‌ها در D3 Scaling and styling data in D3

یکپارچه‌سازی React و D3: رویکرد اعلانی Integrating React and D3: A Declarative Approach

• مقدمه: سریع‌ترین راه یکپارچه‌سازی React و D3 Introduction: the quickest way to start integrating React and D3

• راه‌اندازی محیط پروژه React Setting up our React project environment

• کامپوننت‌های تابعی Functional Components

• بارگذاری داده از فایل‌های استاتیک Loading data from static files

• تنظیم مقیاس‌ها با استفاده از D3 Setting up scales using D3

• پیمایش المان‌های داده برای ساخت JSX Mapping over data elements to create JSX

• افزودن تعامل با useState Adding interactivity with useState

• مزایا و معایب رویکرد اعلانی Pros and Cons of the declarative approach

یکپارچه‌سازی React و D3: رویکرد ترکیبی Integrating React and D3: A hybrid approach

• مقدمه: بهترین‌های دنیای React و D3 Introduction: the best of both the React and D3 worlds

• راه‌اندازی پروژه و ایجاد ساختار کلی Project setup and creating the general structure

• افزودن هوک useEffect همراه با استایل‌دهی Adding a useEffect hook with styling

• افزودن انتقال‌ها و انیمیشن Adding transitions and animation

• مزایا و معایب این رویکرد Pros and Cons of this approach

پروژه واقعی: ساخت نمودار پراکندگی گپ‌مایندر Real-world Project: Building the Gapminder scatterplot

• مقدمه‌ای بر نمودار گپ‌مایندر Introduction to the Gapminder chart

• بارگذاری داده و ساخت کامپوننت‌های نمودار Loading data and creating the chart components

• افزودن مقیاس‌ها با D3 و هوک useEffect Adding scales using D3 and the useEffect hook

• استایل‌دهی نمودار با D3 Styling the chart using D3

• ساخت محورهای نمودار Building the chart axes

• افزودن خطوط متقاطع برای نمایش میانگین‌ها Adding a crosshair to display averages

• افزودن تعامل: ساخت اسلایدر سال Adding interactivity: building the year slider

• ساخت راهنمای تعاملی Building the interactive Legend

جمع‌بندی دوره Course Wrap-up

• انتشار پروژه شما Publishing your work

• نکات پایانی در مورد React و D3 برای مصورسازی داده Final thoughts on React and D3 for data visualization