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

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

بررسی اجمالی Overview

• بررسی اجمالی Overview

• آماده سازی یک سرور محلی Preparing a Local Server

• درک D3 و تجسم داده ها Understanding D3 & Data Visualization

درک SVG Understanding SVG

• SVG چیست؟ What is SVG?

• ایجاد تصاویر SVG Creating SVG images

• اشکال اولیه SVG Basic SVG Shapes

• مسیرهای SVG SVG Paths

مبانی Fundamentals

• افزودن D3 Adding D3

• بسته های D3 D3 Packages

• انتخاب ها Selections

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

• روش های تبدیل Transformation Methods

• کلاس ها و سبک ها Classes and Styles

• پیوستن به داده ها Joining Data

• انتخاب را وارد کنید The Enter Selection

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

• نمایش داده ها Displaying Data

• وارد شوید، به‌روزرسانی کنید و خارج شوید Enter, Update, and Exit

• الگوی به روز رسانی The Update Pattern

• درخواست های JSON JSON Requests

• درخواست های CSV CSV Requests

ترسیم یک طرح پراکنده Drawing A Scatterplot

• مراحل اول First Steps

• ترسیم تصویر Drawing the Image

• اضافه کردن حاشیه ها Adding Margins

• توابع دسترسی Accessor Functions

• درک مقیاس ها Understanding Scales

• مقیاس های نوشتن Writing Scales

• استفاده از مقیاس ها در تجسم ها Applying Scales to Visualizations

• ترازو پالایش Refining Scales

• اضافه کردن یک محور Adding an Axis

• پالایش محور x Refining the x-axis

• محور y The y-axis

• چرخاندن محور y Flipping the y-axis

• پالایش کنه های محور Refining the Axis Ticks

• خلاصه Summary

ترازو Scales

• پیوسته در مقابل گسسته Continuous vs. Discrete

• مقیاس ()scaleLinear The scaleLinear() scale

• مقدمه ای بر نقشه های حرارتی Introduction to Heatmaps

• ترسیم نقشه حرارتی Drawing the Heatmap

• رنگ ها با مقیاس خطی Colors with a Linear Scale

• مقیاس ()scaleQuantize The scaleQuantize() Scale

• مقیاس ()scaleQuantile The scaleQuantile() Scale

• مقیاس ()scaleThreshold The scaleThreshold() Scale

• Quantize در مقابل Quantile در مقابل Thresholdv Quantize vs. Quantile vs. Thresholdv

• مقیاس های رنگی Color Scales

• درک مقیاس ورود به سیستم Understanding the Log Scale

• مقیاس scaleLog(). The scaleLog() Scale

• خلاصه Summary

انیمیشن ها و تعامل Animations & Interactivity

• مقدمه ای بر انیمیشن و تعامل Introduction to Animations & Interactivity

• هیستوگرام چیست؟ What is a histogram?

• آماده سازی هیستوگرام Preparing the Histogram

• درک مسئله Understanding the Problem

• ایجاد سطل ها Creating Bins

• لمس پایانی هیستوگرام Histogram Finishing Touches

• تغییر معیارها با رویدادها Changing Metrics with Events

• به روز رسانی نمودار Updating the Chart

• انتقال ها Transitions

• درک مسئله Understanding the Problem

• درک مسئله Understanding the Problem

• رفع انتقال Fixing the Transition

• رفع خروج خروج Fixing the Exit Transition

• بهینه سازی نوارها و برچسب ها Tweaking the Bars and Labels

• اضافه کردن میانگین Adding the Mean

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

• رویدادهای ماوس Mouse Events

• قالب بندی Formatting

• درک نمودار ورونوی Understanding the Voronoi Diagram

• ایجاد نمودار ورونوی Creating a Voronoi Diagram

• اصلاح نمودار ورونوی Fixing the Voronoi Diagram

نمودارهای حتی بیشتر! Even More Charts!

• نمودارهای حتی بیشتر Even More Charts

• تهیه نمودار خطی Preparing the Line Chart

• مقیاس های زمانی و تجزیه Time Scales & Parsing

• ژنراتور خط Line Generator

• اضافه کردن یک محور Adding an Axis

• آماده کردن راهنمای ابزار Preparing the Tooltip

• درک نیمسازها Understanding Bisectors

• نیمسازهای سفارشی Custom Bisectors

• در حال اتمام Tooltip Finishing the Tooltip

• شروع کار با نمودارهای پای Getting Started with Pie Charts

• طراحی کمان Drawing Arcs

• درک مقیاس های ترتیبی Understanding Ordinal Scales

• استفاده از مقیاس های ترتیبی Using Ordinal Scales

• افزودن برچسب ها Adding Labels

• اصلاح نمودار پای Fixing the Pie Chart

• آماده سازی نمودار میله ای پشته ای Preparing the Stacked Bar Chart

• تابع پشته The Stack Function

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

• ترسیم میله های انباشته Drawing the Stacked Bars

• ترسیم محور Drawing the Axis

• پایان لمس Finishing Touches

نتیجه Conclusion

• طراحی Sketching

• نمودارهای پاسخگو Responsive Charts

• نتیجه Conclusion