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) تغییر دهند:
d3.selectAll("p") // select all elements
.style("color", "lavender") // set style "color" to value "lavender"
.attr("class", "squares") // set attribute "class" to value "squares"
.attr("x", 50); // set attribute "x" (horizontal position) to value 50px
این انتخاب می‌تواند بر پایه tag (همانند مثال بالا)، class, identifier, attribute، یا مکانی در سلسله‌مراتب قرار گیرد. هنگامی که عناصر انتخاب شدند، فرد می‌تواند عملگرها را بر روی آن‌ها اجرا کند. این امر، دریافت و تنظیم attributeها، نمایش متن‌ها و سبک‌ها (همانند مثال بالا) را شامل شوند.
عناصر همچنین می‌توانند اضافه و حذف شوند. این روند اصلاح، ایجاد و حذف عناصر HTML می‌تواند به صورت وابسته به داده ایجاد شود، که پایه مفهوم D3.js می‌باشد.
انتقال‌ها
با اعلام کردن یک انتقال، مقادیر برای attributeها و سبک‌ها می‌تواند به نرمی در زمانی معین درون‌یابی شود. کد زیر باعث می‌شود تا عناصر مربوط به HTML، بر روی یک صفحه، به صورت تدریجی رنگ متن خود را به صورتی تغییر دهند:
d3.selectAll("p") // select all elements
.transition("trans_1") // transition with name "trans_1"
.delay(0) // transition starting 0ms after trigger
.duration(500) // transitioning during 500ms
.ease("linear") // transition easing progression is linear…
.style("color", "pink"); // … to color:pink
اتصال داده‌ها
برای استفاده‌های پیشرفته‌تر، داده‌های بارگذاری‌شده، ایجاد عناصر را انجام می‌دهند. D3.js یک مجموعه گرفته‌شده را بارگذاری می‌کند، سپس، برای هر عنصر از آن، یک شی SVG با ویژگی‌های مرتبط (شکل، رنگ‌ها، مقادیر) و رفتارها (انتقال، وقایع) ایجاد می‌کند.
// Data
var data = ;
// Create SVG container
var svg = d3.select("#hook").append("svg")
.attr("width", 120)
.attr("height", 120)
.style("background-color", "#D0D0D0");
// Create SVG elements from data
svg.selectAll("circle") // create virtual circle template
.data(data) // bind data
.enter() // for each row in data…
.append("circle") // bind circle - data row such that…
.attr("id", function(d) { return d.name ) // set the circles id according to the country name
.attr("cx", function(d) { return d.income /1000 ) // set the circles horizontal position according to income
.attr("cy", function(d) { return d.life ) // set the circles vertical position according to life expectancy
.attr("r", function(d) { return d.pop /1000 *2 ) // set the circles radius according to countrys population
.attr("fill",function(d){ return d.color ); // set the circles color according to countrys color
گرافیک‌های SVG تولیدشده، براساس داده‌های ارائه شده، طراحی می‌شوند.
پیوست کردن گره‌ها با استفاده از داده
هنگامی که یک مجموعه داده به یک سند محدود است، استفاده از D3.js به صورت معمول الگویی را دنبال می‌کند که یک تابع صریح .enter() ، یک "update" و یک تابع صریح .exit() برای هر عنصر در مجموعه داده محدود، فراخوانی می‌شود. هر متد زنجیره‌ای بعد از دستور .enter() ، برای هر عنصر در مجموعه داده که توسط یک گره DOM در مجموعه نشان داده نشده‌است، فراخوانی می‌شود. به همین ترتیب، تابع ضمنی update بر روی تمامی گره‌های انتخاب‌شده، که برای هرکدام از آن‌ها در مجموعه یک عنصر وجود دارد، فراخوانی می‌شود، و تابع .exit() بر روی تمامی گره‌های انتخاب‌شده‌ای که برای آن‌ها عضوی در مجموعه داده وجود ندارد که محدودشان کند، فراخوانی می‌شود. مستندات D3.js مثال‌هایی از نحوه کارکرد این موضوع ارائه می‌کنند.
ساختار API
API مربوط به D3.js چندصد تابع را شامل می‌شود، که آن‌ها را می‌توان به گروه‌های منطقی زیر تقسیم کرد:
انتخاب‌ها
انتقال‌ها
آرایه‌ها
ریاضیات
رنگ
مقیاس‌ها
SVG
زمان
طرح‌ها
جغرافیا
هندسه
رفتارها
ریاضیات
نسل اعداد تصادفی با توزیع‌های normal, log-normal, Bates و Irwin-Hall
دگرگونی در دوبعدی: ترجمه، چرخش، انحراف و مقیاس‌گذاری
آرایه‌ها
آرایه عملگرهای 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 این عملکرد را با موارد زیر گسترش می‌دهد:
توابعی برای یافتن کوچک‌ترین، بزرگ‌ترین، حد، مجموع، متوسط، میانه و چندک یک آرایه
توابعی برای مرتب‌سازی، مخلوط کردن، پس و پیش کردن، ادغام و دونیم کردن آرایه‌ها
توابعی برای تودرتو کردن آرایه‌ها
توابعی برای دستکاری آرایه‌های انجمنی
پشتیبانی از map و set collections
هندسه
محاسبه convex hull برای مجموعه‌ای از نقاط
محاسبه Voronoi tessellation برای مجموعه‌ای از نقاط
پشتیبانی از ساختمان‌داده نقاط چاردرخت
پشتیبانی از عملگرهای ساده بر روی چندضلعی
رنگ
پشتیبانی از رنگ‌های RGB, HSL, HCL و L*a*b
سفاف‌سازی، تیره‌سازی و ادغام رنگ‌ها