آموزش تسلط بر تجسم داده ها در D3.js

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

معرفی Introduction

• معرفی دوره Introduction to the course

• تجسم داده چیست؟ What is a data visualization?

• فعالیت: تجسم مورد علاقه شما Activity: Your favorite visualization

• قدرت D3 The power of D3

• ساختار این دوره چگونه است How this course is structured

• خلاصه بخش Section Summary

• دوره مخزن GitHub Course GitHub Repository

معرفی Introduction

• معرفی دوره Introduction to the course

• تجسم داده چیست؟ What is a data visualization?

• فعالیت: تجسم مورد علاقه شما Activity: Your favorite visualization

• قدرت D3 The power of D3

• ساختار این دوره چگونه است How this course is structured

• خلاصه بخش Section Summary

• دوره مخزن GitHub Course GitHub Repository

شروع کار با D3 Getting started with D3

• مقدمه - شروع کار با D3 Introduction - Getting started with D3

• تنظیم محیط خود Setting up your environment

• آشنایی با SVG ها Understanding SVGs

• افزودن SVG با D3 Adding SVGs with D3

• فعالیت: افزودن SVG به صفحه Activity: Adding SVGs to the screen

• انتخاب ها و داده ها می پیوندد Selections and data joins

• در حال بارگیری داده های خارجی Loading external data

• فعالیت: اولین تجسم شما! Activity: Your first visualization!

• خلاصه بخش Section Summary

شروع کار با D3 Getting started with D3

• مقدمه - شروع کار با D3 Introduction - Getting started with D3

• تنظیم محیط خود Setting up your environment

• آشنایی با SVG ها Understanding SVGs

• افزودن SVG با D3 Adding SVGs with D3

• فعالیت: افزودن SVG به صفحه Activity: Adding SVGs to the screen

• انتخاب ها و داده ها می پیوندد Selections and data joins

• در حال بارگیری داده های خارجی Loading external data

• فعالیت: اولین تجسم شما! Activity: Your first visualization!

• خلاصه بخش Section Summary

ترازو و تبر Scales and Axes

• مقدمه - ترازوها و محورها Introduction - Scales and Axes

• مقیاس های خطی Linear Scales

• مقیاس لگاریتمی Logarithmic Scales

• مقیاس های زمانی Time Scales

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

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

• D3 دقیقه، حداکثر، و وسعت D3 min, max, and extent

• ترازو در D3 Scales in D3

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

• محورها و برچسب ها Axes and labels

• ساخت نمودار میله ای Making a bar chart

• پروژه 1: قهوه بریک ستاره Project 1: StarBreak Coffee

• فعالیت: پروژه 1 Activity: Project 1

• خلاصه بخش Section Summary

ترازو و تبر Scales and Axes

• مقدمه - ترازوها و محورها Introduction - Scales and Axes

• مقیاس های خطی Linear Scales

• مقیاس لگاریتمی Logarithmic Scales

• مقیاس های زمانی Time Scales

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

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

• D3 دقیقه، حداکثر، و وسعت D3 min, max, and extent

• ترازو در D3 Scales in D3

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

• محورها و برچسب ها Axes and labels

• ساخت نمودار میله ای Making a bar chart

• پروژه 1: قهوه بریک ستاره Project 1: StarBreak Coffee

• فعالیت: پروژه 1 Activity: Project 1

• خلاصه بخش Section Summary

مبانی طراحی The basics of design

• مقدمه - مبانی طراحی Introduction - The basics of design

• طراحی برای وضوح Designing for clarity

• ذهنیت در طراحی Subjectivity in design

• فعالیت: نقد تجسم ها Activity: Critiquing visualizations

• جعبه ابزار طراحی The design toolkit

• مقدمه ای بر طراحی An introduction to sketching

• فعالیت: ساخت طرح Activity: Making sketches

• سیستم شبکه بوت استرپ The Bootstrap grid system

• خلاصه بخش Section Summary

مبانی طراحی The basics of design

• مقدمه - مبانی طراحی Introduction - The basics of design

• طراحی برای وضوح Designing for clarity

• ذهنیت در طراحی Subjectivity in design

• فعالیت: نقد تجسم ها Activity: Critiquing visualizations

• جعبه ابزار طراحی The design toolkit

• مقدمه ای بر طراحی An introduction to sketching

• فعالیت: ساخت طرح Activity: Making sketches

• سیستم شبکه بوت استرپ The Bootstrap grid system

• خلاصه بخش Section Summary

آن را پویا کنید Make it dynamic

• مقدمه - آن را پویا کنید Introduction - Make it dynamic

• حلقه زدن با فواصل Looping with intervals

• اضافه کردن یک تابع به روز رسانی Adding an update function

• الگوی به روز رسانی D3 The D3 update pattern

• به روز رسانی در D3 Updates in D3

• پویا کردن نمودار ما Making our chart dynamic

• انتقالات D3 D3 Transitions

• نمودارهای پراکنده در D3 Scatter plots in D3

• پروژه 2: Gapminder Clone Project 2: Gapminder Clone

• فعالیت: پروژه 2 Activity: Project 2

• خلاصه بخش Section Summary

آن را پویا کنید Make it dynamic

• مقدمه - آن را پویا کنید Introduction - Make it dynamic

• حلقه زدن با فواصل Looping with intervals

• اضافه کردن یک تابع به روز رسانی Adding an update function

• الگوی به روز رسانی D3 The D3 update pattern

• به روز رسانی در D3 Updates in D3

• پویا کردن نمودار ما Making our chart dynamic

• انتقالات D3 D3 Transitions

• نمودارهای پراکنده در D3 Scatter plots in D3

• پروژه 2: Gapminder Clone Project 2: Gapminder Clone

• فعالیت: پروژه 2 Activity: Project 2

• خلاصه بخش Section Summary

آن را تعاملی کنید Make it interactive

• مقدمه - آن را تعاملی کنید Introduction - Make it interactive

• اضافه کردن یک افسانه Adding a legend

• قالب بندی و تجزیه در D3 Formatting and parsing in D3

• معرفی راهنمای ابزار Introducing Tooltips

• شنوندگان و کنترل کننده های رویداد در D3 Event listeners and handlers in D3

• اضافه کردن یک نوار لغزنده jQuery UI Adding a jQuery UI slider

• نمودارهای خطی در D3 Line graphs in D3

• پروژه 3: CoinStats Project 3: CoinStats

• فعالیت: پروژه 3 Activity: Project 3

• خلاصه بخش Section Summary

آن را تعاملی کنید Make it interactive

• مقدمه - آن را تعاملی کنید Introduction - Make it interactive

• اضافه کردن یک افسانه Adding a legend

• قالب بندی و تجزیه در D3 Formatting and parsing in D3

• معرفی راهنمای ابزار Introducing Tooltips

• شنوندگان و کنترل کننده های رویداد در D3 Event listeners and handlers in D3

• اضافه کردن یک نوار لغزنده jQuery UI Adding a jQuery UI slider

• نمودارهای خطی در D3 Line graphs in D3

• پروژه 3: CoinStats Project 3: CoinStats

• فعالیت: پروژه 3 Activity: Project 3

• خلاصه بخش Section Summary

تجسم های پر استفاده Frequently used visualizations

• مقدمه - تجسم های متداول Introduction - Frequently used visualizations

• با استفاده از جامعه D3 Using the D3 community

• انتقال کد به نسخه 5.x Migrating code to version 5.x

• طرح بندی D3 D3 Layouts

• نمودارهای منطقه Area Charts

• نمودارهای منطقه انباشته Stacked Area Charts

• ساختارهای داده و لانه های D3 Data structures and D3 nests

• نمودار پای و دونات Pie and donut charts

• ابرهای کلمه Wordclouds

• طرح بندی در D3 Layouts in D3

• خلاصه بخش Section Summary

تجسم های پر استفاده Frequently used visualizations

• مقدمه - تجسم های متداول Introduction - Frequently used visualizations

• با استفاده از جامعه D3 Using the D3 community

• انتقال کد به نسخه 5.x Migrating code to version 5.x

• طرح بندی D3 D3 Layouts

• نمودارهای منطقه Area Charts

• نمودارهای منطقه انباشته Stacked Area Charts

• ساختارهای داده و لانه های D3 Data structures and D3 nests

• نمودار پای و دونات Pie and donut charts

• ابرهای کلمه Wordclouds

• طرح بندی در D3 Layouts in D3

• خلاصه بخش Section Summary

نقشه ها و شبکه ها Maps and Networks

• مقدمه - نقشه ها و شبکه ها Introduction - Maps and Networks

• تجسم در سراسر جهان Visualization around the globe

• بارگیری مجموعه داده های متعدد با D3 Loading multiple datasets with D3

• نقشه های کوروپلث Choropleth Maps

• نیروهای در D3 Forces in D3

• نمودارهای گره پیوند Node-Link Diagrams

• نقشه ها و شبکه ها Maps and Networks

• خلاصه بخش Section Summary

نقشه ها و شبکه ها Maps and Networks

• مقدمه - نقشه ها و شبکه ها Introduction - Maps and Networks

• تجسم در سراسر جهان Visualization around the globe

• بارگیری مجموعه داده های متعدد با D3 Loading multiple datasets with D3

• نقشه های کوروپلث Choropleth Maps

• نیروهای در D3 Forces in D3

• نمودارهای گره پیوند Node-Link Diagrams

• نقشه ها و شبکه ها Maps and Networks

• خلاصه بخش Section Summary

داده های سلسله مراتبی Hierarchical Data

• مقدمه - داده های سلسله مراتبی Introduction - Hierarchical Data

• ساخت سلسله مراتب در D3 Building hierarchies in D3

• نمودارهای درختی Tree Diagrams

• نقشه های درختی Treemaps

• بسته بندی دایره ای Circle Packing

• توطئه های انفجار آفتاب Sunburst Plots

• فعالیت: تجسم خود را پیدا کنید Activity: Find your own visualization

• خلاصه بخش Section Summary

داده های سلسله مراتبی Hierarchical Data

• مقدمه - داده های سلسله مراتبی Introduction - Hierarchical Data

• ساخت سلسله مراتب در D3 Building hierarchies in D3

• نمودارهای درختی Tree Diagrams

• نقشه های درختی Treemaps

• بسته بندی دایره ای Circle Packing

• توطئه های انفجار آفتاب Sunburst Plots

• فعالیت: تجسم خود را پیدا کنید Activity: Find your own visualization

• خلاصه بخش Section Summary

ساختار فایل و نماهای مرتبط File structure and linked views

• مقدمه - ساختار فایل و نماهای مرتبط Introduction - File structure and linked views

• جداسازی فایل File Separation

• تجسم به عنوان اشیا Visualizations as Objects

• در حال تبدیل کد ما به OOP Converting our code to OOP

• مدیریت رویدادها در سراسر اشیا Handling events across objects

• برس های D3 D3 Brushes

• پروژه 4: داشبورد داده های شرکتی Project 4: A corporate data dashboard

• فعالیت: پروژه 4 Activity: Project 4

• خلاصه بخش Section Summary

ساختار فایل و نماهای مرتبط File structure and linked views

• مقدمه - ساختار فایل و نماهای مرتبط Introduction - File structure and linked views

• جداسازی فایل File Separation

• تجسم به عنوان اشیا Visualizations as Objects

• در حال تبدیل کد ما به OOP Converting our code to OOP

• مدیریت رویدادها در سراسر اشیا Handling events across objects

• برس های D3 D3 Brushes

• پروژه 4: داشبورد داده های شرکتی Project 4: A corporate data dashboard

• فعالیت: پروژه 4 Activity: Project 4

• خلاصه بخش Section Summary

اتمام دوره Wrapping up the course

• مقدمه - پایان دوره Introduction - Wrapping up the course

• چیزی که یاد گرفتی What you learned

• اندیشه های پایانی Concluding Thoughts

اتمام دوره Wrapping up the course

• مقدمه - پایان دوره Introduction - Wrapping up the course

• چیزی که یاد گرفتی What you learned

• اندیشه های پایانی Concluding Thoughts