آموزش جامع و ضروری D3.js - آخرین آپدیت

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

مقدمه Introduction

• توضیح در مورد D3 Explaining D3

• تحول بصری داده‌های شما با D3.js Transform your data visuals with D3.js

• استفاده از فایل‌های تمرینی Using the exercise files

• پیش‌نیازهای لازم What you need to know

1. مرور دانش پایه‌ای وب 1. Foundational Web Knowledge Refresher

• نحوه درک HTML توسط مرورگرها How browsers make sense of HTML

• بازنگری در CSS: چرا CSS معمولی با SVG سازگار نیست Unlearning CSS: Why HTML CSS doesn't work with SVG

• طراحی واکنش‌گرا (Responsive) Responsive design

• افزودن کتابخانه D3 به صفحه HTML Pulling the D3 library into your HTML page

• درک DOM و کنسول Understanding the DOM and console

• معرفی SVG Introducing SVG

2. ساخت یک نمودار میله‌ای ساده با D3 2. Making a Simple Bar Chart with D3

• افزودن SVG با استفاده از D3 Adding an SVG with D3

• راه حل: افزودن دایره برای هر نقطه داده Solution: Add circles for each datapoint

• افزودن مستطیل‌های داده‌محور Adding data-driven rectangles

• ویژگی‌های پویا برای اشکال Dynamic attributes for shapes

• چالش: افزودن دایره برای هر نقطه داده Challenge: Add circles for each datapoint

• مشاهده کدها از دیدگاه مرورگر Seeing the code how the browser sees it

3. معرفی تمامی اشکال پایه SVG 3. Introducing All of SVG's Basic Shapes

• رسم دایره‌ها و بیضی‌ها Drawing circles and ellipses

• افزودن متن Adding text

• رسم خطوط و استایل‌دهی به آن‌ها Drawing lines and styling them

• چالش: ساخت یک چراغ راهنمایی Challenge: Create a traffic light

• راه حل: ساخت یک چراغ راهنمایی Solution: Create a traffic light

4. اشکال پیشرفته با المان Path در D3 4. Advanced Shapes with D3's Path Element

• استفاده از المان‌های گروه (Group) برای سازماندهی Using group elements to organize your elements

• چالش: نمودار خطی با داده‌های ناقص Challenge: Line chart with missing data

• معرفی Path Introducing path

• استفاده از تولیدکننده‌های خط و ناحیه Using line and area generators

• مدیریت مقادیر NaN با استفاده از defined() Dealing with NaNs using defined()

• راه حل: نمودار خطی با داده‌های ناقص Solution: Line chart with missing data

5. مقیاس‌ها و محورها 5. Scales and Axes

• ایجاد مقیاس و محور ترتیبی (Ordinal) Creating an ordinal scale and axis

• جای‌گذاری و قالب‌بندی محورها Positioning and formatting our axis

• جای‌گذاری المان‌ها با مقیاس خطی Position elements with a linear scale

• راه حل: افزودن مقیاس فارنهایت Solution: Add Fahrenheit scale

• معرفی مقیاس‌ها (Scales) Introducing scales

• استفاده از مقیاس‌های رنگی Using color scales

• چالش: افزودن مقیاس فارنهایت Challenge: Add Fahrenheit scale

• ایجاد مقیاس زمانی Creating a time scale

• ایجاد محور سری زمانی Creating a time series axis

• ایجاد محور خطی Creating a linear axis

6. وارد کردن داده‌ها به D3 6. Importing Data into D3

• درک و استفاده از D3 fetch Understanding and using D3 fetch

• رسم نمودار خطی از داده‌های CSV Drawing a line chart from CSV data

• چالش: ساخت نمودار خطی از صفر (مقیاس‌ها و تولیدکننده‌ها) Challenge: Line chart from scratch scales and generators

• راه حل: ساخت نمودار خطی از صفر (مقیاس‌ها و تولیدکننده‌ها) Solution: Line chart from scratch scales and generators

• تجزیه فایل CSV با استفاده از promises() Parsing a CSV file using promises()

• تجزیه و نمایش JSON تو در تو با انتخاب‌های تو در تو Parsing and displaying nested JSON with nested selections

7. ماژول‌های چیدمان (Layout) 7. Layout Modules

• نمودارهای دایره‌ای و قوس‌ها با D3 shape Pie charts and arcs with D3-shape

• چالش: ساخت یک نمودار دوناتی Challenge: Create a donut chart

• ساخت درخت از JSON با استفاده از D3 hierarchy Making a tree from JSON using D3-hierarchy

• راه حل: ساخت یک نمودار دوناتی Solution: Create a donut chart

• بهره‌گیری از پلاگین‌های جامعه کاربری: استفاده از D3 hexbin Leveraging community plugins: Using D3-hexbin

• ایجاد Treemap با استفاده از D3 hierarchy Powering a treemap from D3-hierarchy

8. مباحث پیشرفته داده‌ها و انتخاب‌ها 8. Advancing Data and Selections

• تسلط بر متدهای merge() ،map() ،sort() و filter() Mastering merge(), map(), sort() and .filter()

• چالش: ساخت یک نمودار پشته‌ای (Stack Chart) Challenge: Create a stack chart

• مدیریت تغییرات داده‌ها با انتخاب‌های enter و exit Handling data changes with enter and exit selections

• دستکاری داده‌ها با group() و rollup() Manipulating data with. group() and .rollup()

• بهینه‌سازی انتخاب‌های enter و exit با merge() و join() Streamline enter and exit selections with merge() and join()

• رسم ناحیه پشته‌ای با D3.stack() و D3.area() Drawing a stack area with D3.stack() and D3.area()

• راه حل: ساخت یک نمودار پشته‌ای Solution: Create a stack chart

• رسم نمودار ناحیه‌ای پشته‌ای Drawing a stack area chart

9. تعاملی‌سازی 9. Interactivity

• واکنش‌گرا کردن گرافیک‌ها Making your graphic responsive

• رویدادهای D3 و داده‌های استخراج شده از آن‌ها D3 events and the data they expose

• چالش: ایجاد Hover و Tooltips Challenge: Hovering and tool tips

• استفاده از CSS برای ایجاد انتقال‌ها (Transitions) Using CSS to create transitions

• راه حل: ایجاد Hover و Tooltips Solution: Hovering and tool tips

• معرفی Zooming، Dragging و Brushing در D3 Introducing zooming, dragging, and brushing with D3

• درک انتقال‌های (Transitions) در D3 Making sense of D3 transitions

جمع‌بندی Conclusion

• ارتقای سطح در D3 Leveling up in D3