D3.js
D3.js (یا فقط D3، مخفف Data-Driven Documents) یک کتاب‌خانهٔ JavaScript برای تولید مصورسازهای دادهٔ پویا و تعاملی در مرورگرهای وب هست. این کتاب‌خانه از استانداردهای SVG, HTML5و CSS که به صورت گسترده پیاده‌سازی شده‌اند استفاده می‌کند. این کتاب‌خانه جانشین فریم‌ورک قبلی یعنی Protovis می‌باشد. برخلاف خیلی از کتاب‌خانه‌های دیگر، D3.js کنترل فراوانی را برای نتیجهٔ بصری نهایی فراهم می‌آورد. توسعه آن در سال ۲۰۱۱ میلادی انجام شد، هنگامی که نسخهٔ ۲٫۰٫۰ در ماه اوت ۲۰۱۱ منتشر شده‌بود.
کمپانی مصورسازی دادهٔ Datameer به صورت رسمی از D3.js در هستهٔ تلکنولوژی خود استفاده می‌کند، در حالی که The New York Times، گاهی اوقات برای نمودارهای غنی از آن استفاده می‌کند. این کتاب‌خانه توسط ویراستار iD برای ویرایش OpenStreetMap مورد استفاده قرار گرفته‌است. D3.js به صورت گسترده برای GIS map making، مدیریت GeoJSON و Topojson به عنوان فایل‌های ورودی مورد استفاده قرار گرفته‌است.
اولین مرورگرهای وب در اوایل دهه ۹۰ میلادی پدیدار شدند. آن‌ها در ابتدا تنها قادر به نمایش صفحه‌های ایستا (static) وب بودند: تنها راه یک کاربر برای ارتباط با وب از طریق کلیک کردن روی لینک‌ها و پیمایش صفحات بود. تلاش‌های بسیاری برای غلبه بر این محدودیت‌ها انجام شد. یکی از مهم‌ترین آن‌ها انضمام JavaScript به عنوان زبان اسکریپتی برای مرورگرهای وب بود. JavaScript به مرور، به زبان استاندارد بالفعل برای ساخت صفحات وب با تعامل غنی تبدیل شد. این امر نقشی حیاتی در تصمیم برای استفاده از JavaScript به عنوان زبان D3.js داشت.
در همان زمان، محققان، مهندسان و شاغلان از شاخه‌های گوناگون مهندسی و علوم، در جستجوی ابزاری بودند که بتواند مرورگرهای وب را برای ارایهٔ بصری داده در صفحات وب قادر سازند. پروژه‌های بسیاری با این هدف وجود داشت، که هر کدام موفقیت‌ها و شکست‌های خود را داشت، و الهام‌بخش برای پروژه‌های پسین خود بود. قابل توجه‌ترین مثال‌ها، Prefuse, Flare، و Protovis toolkits بود، که همگی می‌توانند به عنوان پیشینیان مستقیم D3.js در نظر گرفته‌شوند.
Prefuse که در سال ۲۰۰۵ میلادی ساخته‌شد، یک ابزار مصورسازی بود که نیازمند استفاده از Java بود، و مصورسازی‌ها در مرورگرها توسط یک پلاگین Java ارائه می‌شد. Flare، که در سال ۲۰۰۷ میلادی ساخته‌شد، یک ابزار مشابه بود که از ActionScript استفاده می‌کرد و برای ارائه به یک پلاگین Flash نیازمند بود.
در سال ۲۰۰۹ میلادی، بر پایهٔ تجربهٔ توسعه و بهره‌بری Prefuse و Flare، پروفسور Jeff Heer، داشجوی دکترا Mike Bostock و دانشجوی ارشد Vadim Ogievetsky از گروه مصورسازی دانشگاه Stanford, Protovis را ساختند، یک کتاب‌خانهٔ JavaScript که نمودارهای SVG را از داده تولید می‌کند. این کتاب‌خونه به صورت قابل توجه‌ای توسط دانشگاهیان و شاغلان مصورسازی داده، مورد پذیرش قرار گرفت.
در سال ۲۰۱۱ میلادی، توسعه Protovis متوقف شد تا بر روی پروژه‌ای جدید، یعنی D3.js تمرکز شود. Bostock، به همراهی Heer و Ogievetsky، با توجه به تجربه‌ای که از Protovis داشتند، D3.js را به گونه‌ای توسعه دادند که بتواند فرم‌ورک رساتری را ارائه کند که، در همان زمان، بر روی استانداردهای وب تمرکز کند و عمکرد بهتری را ارائه کند.
D3.js، این کتاب‌خونهٔ JavaScript، که با صفحات HTML تعبیه شده، از توابع از پیش ساخته‌شده JavaScript برای انتخاب عناصر، ایجاد شئ‌های SVG, style بخشیدن به آن‌ها، یا اضافه کردن تأثیرهای پویا و انتقالی یا tooltips به آن‌ها، استفاده می‌کند. این اشیاء، همچنین می‌توانند به صورت گسترده توسط CSS مدل داده شوند. مجموعه داده‌های بزرگ به راحتی می‌توانند توسط اشیاء SVG، با استفاده از توابع ساده D3.js برای تولید گرافیک، متن، جدول و نمودارهای غنی محدود شوند. داده می‌تواند در فرمت‌های گوناگون باشد که رایج‌ترین آن‌ها JSON, comma-separated values (CSV) یا geoJSON هستند، اما، اگر نیاز باشد، توابع JavaScript می‌توانند برای خواندن فرمت‌های دیگر داده نوشته‌شوند.
اصل مرکزی طراحی D3.js این است که برنامه‌نویس را قادر سازد که ابتدا از یک CSS-style selector برای انتخاب مجموعه‌ای از گره‌های دریافتی Document Object Model (DOM) استفاده کند، سپس از عملگرها برای دستکاری آن‌ها در روشی شبیه به jQuery استفاده کند. برای مثال، با استفاده از D3.js، افراد می‌توانند تمام عناصر  …  مربوط به HTML را انتخاب کنند، و سپس، به عنوان مثال، رنگ متن آن‌ها را به بنفش کمرنگ (lavender) تغییر دهند: این انتخاب می‌تواند بر پایهٔ tag (همانند مثال بالا)، class, identifier, attribute، یا مکانی در سلسله‌مراتب قرار گیرد. هنگامی که عناصر انتخاب شدند، فرد می‌تواند عملگرها را بر روی آن‌ها اجرا کند. این امر، دریافت و تنظیم attributeها، نمایش متن‌ها و سبک‌ها (همانند مثال بالا) را شامل شوند. عناصر همچنین می‌توانند اضافه و حذف شوند. این روند اصلاح، ایجاد و حذف عناصر HTML می‌تواند به صورت وابسته به داده ایجاد شود، که پایه مفهوم D3.js می‌باشد.
با اعلام کردن یک انتقال، مقادیر برای attributeها و سبک‌ها می‌تواند به نرمی در زمانی معین درون‌یابی شود. کد زیر باعث می‌شود تا عناصر … مربوط به HTML، بر روی یک صفحه، به صورت تدریجی رنگ متن خود را به صورتی تغییر دهند: برای استفاده‌های پیشرفته‌تر، داده‌های بارگذاری‌شده، ایجاد عناصر را انجام می‌دهند. D3.js یک مجموعه گرفته‌شده را بارگذاری می‌کند، سپس، برای هر عنصر از آن، یک شئ SVG با ویژگی‌های مرتبط (شکل، رنگ‌ها، مقادیر) و رفتارها (انتقال، وقایع) ایجاد می‌کند. // Data // Create SVG container // Create SVG elements from data
گرافیک‌های SVG تولیدشده، براساس داده‌های ارائه شده، طراحی می‌شوند.
هنگامی که یک مجموعهٔ داده به یک سند محدود است، استفاده از D3.js به صورت معمول الگویی را دنبال می‌کند که یک تابع صریح codice_1 ، یک "update" و یک تابع صریح codice_2 برای هر عنصر در مجموعه دادهٔ محدود، فراخوانی می‌شود. هر متد زنجیره‌ای بعد از دستور codice_1 ، برای هر عنصر در مجموعهٔ داده که توسط یک گرهٔ DOM در مجموعه نشان داده نشده‌است، فراخوانی می‌شود. به همین ترتیب، تابع ضمنی update بر روی تمامی گره‌های انتخاب‌شده، که برای هرکدام از آن‌ها در مجموعه یک عنصر وجود دارد، فراخوانی می‌شود، و تابع codice_2 بر روی تمامی گره‌های انتخاب‌شده‌ای که برای آن‌ها عضوی در مجموعه داده وجود ندارد که محدودشان کند، فراخوانی می‌شود. مستندات D3.js مثال‌هایی از نحوهٔ کارکرد این موضوع ارائه می‌کنند.
API مربوط به D3.js چندصد تابع را شامل می‌شود، که آن‌ها را می‌توان به گروه‌های منطقی زیر تقسیم کرد:آرایهٔ عملگرهای D3.js، برای کامل کردن پشتیبانی آرایه در JavaScript به وجود آمده‌است (متدهای mutator: sort, reverse, splice, shift و unshift؛ متدهای accessor: concat, join, slice, indexOf, lastIndexOf؛ متدهای iteration: filter, every, forEach, map, some, reduce و reduceRight).
D3.js این عملکرد را با موارد زیر گسترش می‌دهد: