D3.js

توسعه‌دهنده(ها)	Mike Bostock, Jeffrey Heer, Vadim Ogievetsky, and community
انتشار اولیه	۱۸ فوریه ۲۰۱۱؛ ۱۳ سال پیش
انتشار پایدار	۳٫۵٫۱۲ / ۱۷ دسامبر ۲۰۱۵؛ ۸ سال پیش
مخزن	github.com/d3/d3 ;
نوشته‌شده با	JavaScript
نوع	مصورسازی داده، JavaScript library
مجوز	BSD
وبگاه	d3js.org

D3.js (یا فقط D3، مخفف Data-Driven Documents) یک کتاب‌خانهٔ JavaScript برای تولید مصورسازهای دادهٔ پویا و تعاملی در مرورگرهای وب هست. این کتاب‌خانه از استانداردهای SVG, HTML5 و CSS که به صورت گسترده پیاده‌سازی شده‌اند استفاده می‌کند. این کتاب‌خانه جانشین فریم‌ورک قبلی یعنی Protovis می‌باشد. برخلاف خیلی از کتاب‌خانه‌های دیگر، D3.js کنترل فراوانی را برای نتیجهٔ بصری نهایی فراهم می‌آورد. توسعه آن در سال ۲۰۱۱ میلادی انجام شد، هنگامی که نسخهٔ ۲٫۰٫۰ در ماه اوت ۲۰۱۱ منتشر شده‌بود.

کمپانی مصورسازی دادهٔ Datameer به صورت رسمی از D3.js در هستهٔ تکنولوژی خود استفاده می‌کند، در حالی که روزنامه نیویورک تایمز، گاهی اوقات برای نمودارهای غنی از آن استفاده می‌کند. این کتاب‌خانه توسط ویراستار 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، پروفسور جف هیر، داشجوی دکترا مایک باستاک و دانشجوی ارشد وادیم اویودسکی از گروه مصورسازی دانشگاه 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، افراد می‌توانند تمام عناصر <p> … </p> مربوط به HTML را انتخاب کنند، و سپس، به عنوان مثال، رنگ متن آن‌ها را به بنفش کمرنگ (lavender) تغییر دهند:

 d3.selectAll("p")                 // select all <p> 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ها و سبک‌ها می‌تواند به نرمی در زمانی معین درون‌یابی شود. کد زیر باعث می‌شود تا عناصر <p>…</p> مربوط به HTML، بر روی یک صفحه، به صورت تدریجی رنگ متن خود را به صورتی تغییر دهند:

 d3.selectAll("p")             // select all <p> 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 = [
     { name:"Ireland",  income:53000, life: 78, pop:6378, color: "green"},
     { name:"Norway",   income:73000, life: 87, pop:5084, color: "blue" },
     { name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" }
  ];
// 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 circle's id according to the country name
        .attr("cx", function(d) { return d.income /1000  })  // set the circle's horizontal position according to income
        .attr("cy", function(d) { return d.life })           // set the circle's vertical position according to life expectancy
        .attr("r",  function(d) { return d.pop /1000 *2 })   // set the circle's radius according to country's population
        .attr("fill",function(d){ return d.color });         // set the circle's color according to country's 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 این عملکرد را با موارد زیر گسترش می‌دهد: