‏Particle Charts: نمودارهایی از جنس ذره‌های نور

تو صفحهٔ معرفی Particle Charts اومده که این کتابخونه داده‌ها رو به‌جای شکل‌های توپر، با یه ابر زندهٔ ذره می‌کشه. شش نوع نمودار داره (میله‌ای، خطی، پای، دونات، حبابی و رادار) و همه‌شون روی یه موتور مشترک سوارن: یه میدان ذره که فقط جور دیگه‌ای چیده می‌شه. ورودی‌ش JSON سادست؛ آرایهٔ عدد، رکوردهای {label, value} یا چند سری داده، همه یه‌جور نرمال‌سازی می‌شن و محور و تیک و لجند خودکار از روی همون داده ساخته می‌شه.

نویسنده تأکید می‌کنه که کتابخونه هیچ وابستگی‌ای نداره: یه فایل و یه تگ script کافیه و لازم نیست build step (یعنی مرحلهٔ باندل‌کردن کد با ابزارهایی مثل Vite یا Webpack) داشته باشی. نسخهٔ ESM هم کنارش می‌آد تا با باندلرها کار کنه، و چون index.d.ts رو خودش می‌فرسته، تو TypeScript بدون نصب پکیج @types راه می‌افته. نسخهٔ CommonJS هم برای require هست و حداقل Node 18 می‌خواد.

چیزی که ظاهرش رو می‌سازه، ترکیب افزایشی ذره‌هاست: ذره‌ها روی یه لایهٔ offscreen (یعنی یه بوم پنهان که مستقیم دیده نمی‌شه) روی هم جمع می‌شن و بعد تو دو پاس بلور، درخشش می‌گیرن. یعنی اون گلوی چشمگیر فقط یه draw اضافه خرج داره. یه ResizeObserver هم با هر تغییر اندازهٔ کانتینر دوباره چیدمان رو حساب می‌کنه و HiDPI خودکار مدیریت می‌شه؛ تنها شرطش اینه که کانتینر ارتفاع داشته باشه.

از نظر دسترس‌پذیری، هر نمودار یه جدول دادهٔ مخصوص screen reader هم کنار خودش می‌ذاره، prefers-reduced-motion رو رعایت می‌کنه و وقتی از دید کاربر خارج می‌شه انیمیشن رو نگه می‌داره. تقریباً همه‌چیزش هم قابل تنظیمه: particleDensity برای تراکم، particleBloom برای شدت درخشش، particleJitter برای اون لرزش زنده، و particleCount که سقف سختش ۵۰٬۰۰۰ ذره‌ست. متدهای update، setOptions، toDataURL و destroy هم برای کار زنده با نمودار در دسترسن.

نکات کلیدی:

• شش نوع نمودار (میله‌ای، خطی، پای، دونات، حبابی و رادار) روی یک موتور ذره‌ای مشترک
• بدون وابستگی و بدون build step؛ نسخهٔ ESM و فایل index.d.ts برای TypeScript همراهشه
• سقف پیش‌فرض ۵۰٬۰۰۰ ذره با particleCount و تراکم پیش‌فرض ۱۵ با particleDensity
• تم پیش‌فرض dark هست و رنگ ذره‌ها هیچ‌وقت با تم عوض نمی‌شه
• جدول دادهٔ مخصوص screen reader و احترام به prefers-reduced-motion