کتاب Learn D3.js

کتاب Learn D3.js: Create Stunning Interactive Web Visualizations with D3.js v7 and Modern JavaScript (یادگیری D3.js: ایجاد تجسم‌های تعاملی خیره‌کننده تحت وب با D3.js نسخه ۷ و جاوااسکریپت مدرن) نوشته هِلدر دا روچا، یک راهنمای جامع و به‌روز برای ساخت تجسم‌های داده تعاملی و مبتنی بر وب با استفاده از نسخه ۷ کتابخانه D3.js و جاوااسکریپت مدرن است.

کتاب Learn D3.js که نسخه دوم به شمار می‌رود، با مفاهیم پایه‌ای مانند انتخاب‌کننده‌ها، اتصال داده و SVG شروع شده و به‌تدریج مباحث پیشرفته‌تری مانند مقیاس‌ها، محورها، انیمیشن‌ها، داده‌های سلسله‌مراتبی و نقشه‌های جغرافیایی را پوشش می‌دهد.

در ادامه مقدمه‌ای از کتاب Learn D3.js را از زبان نویسنده شرح خواهیم داد.

مقدمه‌ای بر کتاب Learn D3.js:

کتاب Learn D3.js یک مقدمه کاربردی و عملی (hands-on) برای کار با D3.js (اسناد هدایت‌شده توسط داده یا Data-driven documents) است؛ یک کتابخانه متن‌باز جاوااسکریپت برای خلق مصورسازی‌های پویا و تعاملی داده‌ها در وب. D3 که بر پایه فناوری‌های استاندارد وب توسعه یافته است، ابزارهایی را برای متصل کردن داده‌ها به عناصر بصری و کنترل نحوه رندر (ترسیم) و به‌روزرسانی آن عناصر در مرورگر فراهم می‌کند.

برخلاف کتابخانه‌های نمودار که انواع نمودارهای آماده و پیش‌فرض را ارائه می‌دهند، D3 بلوک‌های سازنده اصلی را در اختیار شما می‌گذارد تا مصورسازی‌های خود را با استفاده از HTML، CSS، SVG و Canvas خلق کنید. اگرچه این امر به این معنی است که حتی نمودارهای ساده نیز در ابتدا ممکن است به کدنویسی بیشتری نیاز داشته باشند، اما در عین حال انعطاف‌پذیری فوق‌العاده‌ای به شما می‌دهد تا مصورسازی‌های کاملاً سفارشی‌شده و متناسب با داده‌ها و نیازهای طراحی خود ایجاد کنید.

در کتاب Learn D3.js، از طریق یک رویکرد عملی و نمونه‌محور، درک عمیق و محکمی از مفاهیم کلیدی، ماژول‌ها و فرآیندهای کاری D3 به دست خواهید آورد. شما کار خود را با اصول اولیه آغاز می‌کنید و به‌تدریج به سراغ موضوعات پیشرفته‌تر می‌روید. در طول این مسیر، طیف وسیعی از مصورسازی‌ها را خواهید ساخت؛ از نمودارهای میله‌ای، خطی، دایره‌ای و پراکندگی گرفته تا نمودارهای درختی، نقشه‌های درختی (Treemaps)، دسته‌بندی‌های دایره‌ای (Circle packs)، نمودارهای سنکی (Sankey)، شبکه‌های مبتنی بر نیرو (Force-directed networks) و نقشه‌های موضوعی.

هر فصل کتاب Learn D3.js توضیحات متمرکز را با مثال‌های کاربردی و مصورسازی‌های گام‌به‌گام ترکیب می‌کند تا به شما در پیاده‌سازی آموخته‌هایتان کمک کند. این کتاب همچنین شامل نمونه کدهای قابل دانلود و تمرین‌هایی به همراه پاسخ‌های کامل است که به شما امکان می‌دهد بیشتر آزمایش کنید و همگام با پیشرفت خود، یادگیری‌تان را تثبیت کنید.

تمام کدهای استفاده‌شده در کتاب Learn D3.js در یک مخزن عمومی گیت‌هاب (GitHub) در دسترس است (جزئیات آن در ادامه آمده است). از آنجا که بسیاری از کدهای چاپ‌شده در کتاب روی مفاهیم خاصی تمرکز دارند، اغلب تنها بخشی از سورس‌کد کامل را نشان می‌دهند. کد کامل هر مثال را می‌توان دانلود و به صورت محلی (Local) اجرا کرد؛ همچنین ارجاع به فایل‌های مربوطه در سراسر کتاب ارائه شده است.

محتوای کتاب Learn D3.js هم ویژگی‌های پایه و هم پیشرفته D3 را پوشش می‌دهد و بر اساس نسخه ۷.۹.۰ دی‌تری (D3 version 7.9.0) و جاوااسکریپت نسخه ES2019 نگارش شده است.

در حین نوشتن این کتاب، تمام تلاش خود را به کار بسته‌ام تا مطالب را با بیشترین دقت ممکن ارائه دهم. کدهای درج‌شده از نمونه‌های واقعی و در حال کار استخراج شده‌اند و دقت مضاعفی صورت گرفته تا اطمینان حاصل شود که به تمام مثال‌ها به درستی ارجاع داده شده و طبق انتظار کار می‌کنند.

من از نسخه ۳ به بعد از D3 استفاده کرده و آن را آموزش داده‌ام و بخش زیادی از کتاب Learn D3.js تحت تأثیر این تجربه شکل گرفته است. انگیزه اصلی من از نوشتن این کتاب، به اشتراک گذاشتن چیزهایی بود که در طول سال‌ها کاوش، استفاده و تدریس D3 آموخته‌ام. امیدوارم این کتاب را هم مفید و هم لذت‌بخش بیابید.

کتاب Learn D3.js برای چه کسانی است؟

کتاب Learn D3.js برای توسعه‌دهندگان وب، روزنامه‌نگاران داده، طراحان، تحلیلگران و هر کسی است که می‌خواهد مصورسازی‌های تعاملی داده را برای وب ایجاد کند. آشنایی اولیه با HTML، CSS و جاوااسکریپت توصیه می‌شود. هیچ دانش قبلی از SVG یا D3 نیاز نیست.

آنچه در کتاب Learn D3.js پوشش داده می‌شود:

فصل ۱: اسناد هدایت‌شده توسط داده (Data-driven Documents)

به معرفی کتابخانه جاوااسکریپت D3.js، توصیف ویژگی‌ها و مفاهیم اصلی آن، و نحوه هدایت داده‌ها برای تغییر شکل اسناد می‌پردازد. یاد خواهید گرفت که چگونه محیط کار خود را آماده کرده و یک برنامه بسیار ساده با D3 ایجاد کنید.

فصل ۲: جاوااسکریپت ضروری برای D3

فناوری‌های پایه وب که پشتوانه D3 هستند را معرفی می‌کند؛ از جمله جاوااسکریپت مدرن، DOM، بوم نقاشی (Canvas) و فرمت‌های رایج داده. این فصل همچنین می‌تواند به عنوان یک مرجع عمومی مورد استفاده قرار گیرد.

فصل ۳: SVG ضروری برای D3

یک راهنما و مرجع کوتاه درباره SVG است که فرمت گرافیکی اصلی مورد استفاده در D3 به شمار می‌رود. این فصل از کتاب Learn D3.js عناصر ضروری، ویژگی‌ها (Attributes)، استایل‌دهی، تبدیل سیستم‌های مختصات و API مربوط به SVG DOM را پوشش می‌دهد.

فصل ۴: شروع سریع (Quick Start)

D3 را از طریق یک نمودار میله‌ای ساده معرفی می‌کند. شما اتصال داده‌ها (Data binding)، انتخاب‌های بصری، تعامل‌پذیری و انیمیشن‌های انتقالی (Transitions) را به همراه یک آموزش آنلاین جانبی درباره بارگذاری داده‌ها و ترسیم نقشه یاد خواهید گرفت. در پایان این فصل از کتاب Learn D3.js، قادر خواهید بود با داده‌های خود نمودارهای ساده بسازید.

فصل ۵: بارگذاری و تجزیه داده‌ها (Loading and Parsing Data)

نشان می‌دهد که چگونه فایل‌های داده خارجی را با استفاده از ماژول‌های `d3-dsv` و `d3-fetch` بارگذاری و تجزیه (Parse) کنید. یک آموزش آنلاین این ویژگی‌ها را در یک مصورسازی کامل با استفاده از فایل‌های خارجی بررسی می‌کند.

فصل ۶: انتخاب‌ها و اتصال داده (Selections and Data Binding)

بخش زیادی از ماژول `d3-selection` را که برای انتخاب، به‌روزرسانی، پیوندها (Joins) و تغییرات DOM استفاده می‌شود پوشش می‌دهد و استراتژی‌های اتصال داده را در عمل از طریق قطعه‌کدهای کوتاهی که می‌توانید در کنسول مرورگر خود اجرا کنید، نشان می‌دهد. این فصل از کتاب Learn D3.js آموزش آنلاین فصل ۵ را با افزودن انتخاب‌های پیشرفته و برخی تعامل‌ها ادامه می‌دهد (که در فصل‌های بعدی بیشتر بررسی می‌شوند).

فصل ۷: کار با داده‌ها (Working with Data)

ابزارهای شش ماژول را بررسی می‌کند: `d3-array` ،`d3-random` ،`d3-interpolate` ،`d3-format` ،`d3-time` و `d3-time-format`. یاد خواهید گرفت که چگونه آرایه‌های داده را تغییر دهید، داده‌ها را گروه‌بندی کنید، توزیع‌های تصادفی بسازید، هیستوگرام ایجاد کنید، داده‌ها را درون‌یابی (Interpolate) کنید، بازه‌های زمانی را تغییر دهید و تاریخ‌ها و اعداد را متناسب با زبان و فرهنگ محلی فرمت‌دهی کنید.

فصل ۸: محورها (Axes)

نشان می‌دهد که چگونه محورهای SVG بسازید و پیکربندی کنید تا برای نمودارهای شما با شبکه‌های دکارتی یا شعاعی زمینه و مقیاس (Context) فراهم کنند (`d3-axis`).

فصل ۹: مقیاس‌ها (Scales)

به توابع مقیاس‌دهی اختصاص دارد که داده‌های دریافتی از یک دامنه ورودی (Domain) را به محدوده خروجی (Range) تبدیل می‌کنند. این فصل ماژول `d3-scale` و توابع آن را برای تولید مقیاس‌های پیوسته، درون‌یابی‌شده و گسسته پوشش می‌دهد. در آموزش آنلاین این فصل، از محورها و مقیاس‌ها برای ساخت یک نمودار پراکندگی (Scatterplot) استفاده می‌شود.

فصل ۱۰: رنگ‌ها (Colors)

هر آنچه را که باید درباره رنگ‌ها در D3 بدانید پوشش می‌دهد. طرح‌های رنگی (Color schemes)، درون‌یاب‌ها و ابزارهای مدیریت رنگ در قالب مثال‌هایی با استفاده از ماژول‌های `d3-color` ،`d3-scale-chromatic` و `d3-interpolate` ارائه می‌شوند. شما آموزش آنلاین فصل ۹ را برای افزودن رنگ‌ها و ویژگی‌های تعاملی ادامه خواهید داد.

فصل ۱۱: ساخت نمودارهای خطی و مساحتی (Creating Line and Area Charts)

نشان می‌دهد که چگونه از توابع تولیدکننده شکل در ماژول `d3-shape` برای خلق انواع نمودارهای کلاسیک مانند نمودارهای خطی و مساحتی (Area charts) استفاده کنید. این نمودارها ابتدا از طریق مثال‌های ساده معرفی شده و سپس در آموزش‌های گام‌به‌گام روی مصورسازی‌های کامل اعمال می‌شوند.

فصل ۱۲: ساخت نمودارهای دایره‌ای و انباشته (Creating Pies and Stacks)

توابع تولیدکننده چیدمان (Layout) را در ماژول `d3-shape` بررسی می‌کند که برای ایجاد ساختارهای داده در نمودارهای دایره‌ای (Pie) و نمودارهای انباشته مساحتی و میله‌ای (Stacked area and bar) استفاده می‌شوند. این فصل همچنین نحوه تولید داده‌ها برای رندر کردن نمودارها با استفاده از Canvas را نشان می‌دهد.

فصل ۱۳: انتقال‌ها و پویانمایی (Transitions and Animation)

تنظیمات پیشرفته انتقال (`d3-transition`)، اجرای انتقال‌های چندگانه، تغییر توابع حرکت نرم (`d3-ease`) و کنترل انیمیشن‌های زمان‌بندی‌شده (`d3-timer`) را پوشش می‌دهد. این فصل همچنین نشان می‌دهد که چگونه از انیمیشن‌های بومی CSS و SVG همراه با D3 استفاده کنید.

فصل ۱۴: رویدادها و تعامل‌پذیری (Events and Interactivity)

موضوعات پیشرفته مدیریت رویدادها و رفتارهای خاص D3 را بررسی می‌کند: چگونگی استفاده و تنظیم قابلیت‌های بزرگ‌نمایی (`d3-zoom`)، کشیدن و رها کردن (`d3-drag`) و ابزار انتخاب محدوده‌ای (`d3-brush`) و اعمال آن‌ها روی نمودارهای ساده و مصورسازی‌های بزرگ‌تر.

فصل ۱۵: ساخت مصورسازی‌های درختی (Creating Tree Visualizations)

اولین فصل از دو فصلی است که به مصورسازی داده‌های سلسله‌مراتبی اختصاص یافته است. در اینجا یاد خواهید گرفت که چگونه با استفاده از تکنیک‌های تو در تو سازی و ابزارهای ارائه شده توسط ماژول `d3-hierarchy` یک مجموعه داده را برای نمایش سلسله‌مراتب آماده کنید. سپس از تولیدکننده‌های چیدمان درختی برای نمایش این ساختارهای داده تغییریافته به عنوان مصورسازی‌های درختی تعاملی استفاده خواهید کرد.

فصل ۱۶: ساخت بخش‌بندی‌ها و محصورکننده‌ها (Creating Partitions and Enclosures)

سه تولیدکننده چیدمان دیگر را معرفی می‌کند که اشیاء سلسله‌مراتبی تولیدشده در فصل ۱۵ را دریافت کرده و نقشه‌های درختی (Treemaps)، دسته‌بندی‌های دایره‌ای (Circle packs) و بخش‌بندی‌های تعاملی ایجاد می‌کنند.

فصل ۱۷: مصورسازی جریان‌ها و شبکه‌ها (Visualizing Flows and Networks)

به بررسی مصورسازی نمودارهای شبکه و جریان می‌پردازد و نشان می‌دهد که چگونه نمودارهایی مانند سنکی (با استفاده از `d3-sankey`)، نمودارهای آکورد/نواری (با استفاده از `d3-chord`) و سایر مصورسازی‌های شبکه را ایجاد کنید.

فصل ۱۸: شبکه‌های مبتنی بر نیرو (Force-Directed Networks)

به شما نشان می‌دهد که چگونه از ماژول `d3-force` برای ساخت نمودارهای شبکه‌ای متحرک استفاده کنید. یاد خواهید گرفت که شبیه‌سازی‌های مبتنی بر نیرو چگونه کار می‌کنند و چگونه نیروهای مختلف می‌توانند برای کنترل مکان‌دهی و حرکت گره‌ها (Nodes) با یکدیگر ترکیب شوند.

فصل ۱۹: مصورسازی‌های نقشه‌نگاری (Cartographical Visualizations)

ماژول `d3-geo` را پوشش می‌دهد و نشان می‌دهد که چگونه نقشه‌های تعاملی را از داده‌های جغرافیایی در فرمت‌هایی مانند GeoJSON و TopoJSON بسازید. یاد خواهید گرفت که چگونه با سیستم‌های تصویر نقشه (Projections) کار کنید، نقشه‌های موضوعی بسازید و تعامل‌هایی مانند بزرگ‌نمایی، جابه‌جایی (Panning) و چرخش را در دامنه‌های فضایی و مسطح اضافه کنید.

فصل ۲۰: مراجع و منابع اضافی (References and Additional Resources)

مجموعه‌ای از مراجع، ابزارها، مجموعه‌داده‌ها و منابع آنلاین استفاده‌شده در سراسر کتاب Learn D3.js را ارائه می‌دهد. این فصل همچنین کتابخانه‌ها، خدمات و مطالب آموزشی دیگری را معرفی می‌کند که می‌توانند به شما در یادگیری عمیق‌تر D3.js و موضوعات مرتبط کمک کنند.

سرفصل‌های کتاب Learn D3.js:

• Learn D3.js
• Second Edition
• Foreword
• Contributors
• About the author
• About the reviewer
• Preface
• Part 1: Getting Started with D3
  • Chapter 1: Data-driven documents
  • Chapter 2: Essential JavaScript for D3 (Online)
  • Chapter 3: Essential SVG for D3 (Online)
  • Chapter 4: Quick Start
• Part 2: Core D3
  • Chapter 5: Loading and Parsing Data
  • Chapter 6: Selections and Data Binding
  • Chapter 7: Working with Data
  • Chapter 8: Axes
  • Chapter 9: Scales
  • Chapter 10: Colors
  • Chapter 11: Creating Line and Area Charts
  • Chapter 12: Creating Pies and Stacks
  • Chapter 13: Transitions and Animation
  • Chapter 14: Events and Interactivity
• Part 3: Advanced D3
  • Chapter 15: Creating Tree Visualizations
  • Chapter 16: Creating Partitions and Enclosures
  • Chapter 17: Visualizing Flows and Networks
  • Chapter 18: Force-Directed Networks
  • Chapter 19: Cartographical Visualizations
  • Chapter 20: References and Additional Resources
  • Chapter 21: Unlock Your Exclusive Benefits
• Index
• Other Books You May Enjoy

جهت دانلود کتاب Learn D3.js می‌توانید پس از پرداخت، دریافت کنید.