چرا D3.js برای تجسم داده ها

تجسم داده ها شکاف بین اعداد خام و درک انسانی را در میان بسیاری از ابزارهای موجود، D3.js (اطلاعات-Driven Documents) به عنوان یک کتابخانه جاوا اسکریپت چند منظوره و سطح پایین است که به توسعه دهندگان کنترل مستقیم بر فرمت های سند شی و کتابخانه های نمودار سطح بالا که سفارشی سازی محدود ارائه می دهند، D3 به شما اجازه می دهد دقیقا نمایندگی بصری را که از نمودار های ساده برای پردازش داده های متنوع استفاده می کند و تجزیه و تحلیل داده های متنوع آن را تضمین می کند.

مفاهیم اصلی D3.js

برای استفاده از D3 به طور موثر، شما باید اصول بنیادی آن را درک کنید: انتخاب ها، اتصال داده ها، مقیاس ها و SVG. D3 با انتخاب عناصر DOM، داده های اتصال به آنها و اعمال تغییرات بیان می شود.این الگو از طریق زنجیره ای روش بیان شده و بهترین تصویر با یک مثال ساده است.

انتخاب ها و داده های Binding

D3 از انتخاب کنندگان CSS برای هدف گذاری عناصر استفاده می کند، سپس داده ها را به آنها متصل می کند. روش به آرایه ای از ارزش ها با گره های انتخاب شده متصل می شود و روش عناصر جدیدی را برای هر نقطه داده ای که فاقد یک گره DOM متناظر است، ایجاد می کند.این الگوی به روز رسانی به روز به شما اجازه می دهد تا داده تا داده های پویا را به طور موثر اداره کنید.

به عنوان مثال، برای ایجاد دایره برای مجموعه داده ها:

const data = [10, 25, 40, 30];
const svg = d3.select("body").append("svg")
 .attr("width", 400)
 .attr("height", 200);

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d)
 .attr("fill", "steelblue");

مقیاس ها و Axes

داده های خام اغلب محدوده هایی را که مستقیماً به مختصات پیکسلی نمی پردازند، در اختیار دارند.[۱۰] مقیاس ها که دامنه (ارزش های داده) را به محدوده (موقعیت های پیکسلی) نقشه برداری می کنند، شامل هر مقیاسی از (FLT:3،FLT: ۴، و Axها از تجسم های کمی استفاده می کنند و یا با هم ترکیب می شوند.

مثالی از مقیاس خطی:

const xScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([0, width]);

const yScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
svg.append("g")
 .attr("transform", `translate(0, ${height})`)
 .call(xAxis);

ساخت Visualizations با D3.js

Interactive تبدیل نمودار استاتیک به داستان های قابل بازدید. D3 از کنترل رویداد، انتقال و به روز رسانی های پویا پشتیبانی می کند.شما می توانید ابزار، زوم، کشیدن، فیلترینگ و انیمیشن با حداقل سربار را اضافه کنید.

Tooltips و Highlighting

Tooltips ارزش های دقیق داده ها را در مورد استفاده از سیستم رویداد D3 ارائه می دهد، شما می توانید یک تغییر شناور ایجاد کنید (FLT:9) که جزئیات را نشان می دهد، به عنوان مثال، گسترش یک نمودار نوار با ابزار در کد اصلی نشان داده شده است؛ در اینجا ما همچنین اضافه می کنیم (FLT:0color Change [F:1 در وا:]

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", d => height - d * 3)
 .attr("width", 50)
 .attr("height", d => d * 3)
 .attr("fill", "steelblue")
 .on("mouseover", function(event, d) {
 d3.select(this).attr("fill", "orange");
 tooltip.style("display", "block").text(`Value: ${d}`);
 })
 .on("mousemove", (event) => {
 tooltip.style("left", (event.pageX + 10) + "px")
 .style("top", (event.pageY - 20) + "px");
 })
 .on("mouseout", function() {
 d3.select(this).attr("fill", "steelblue");
 tooltip.style("display", "none");
 });

زوم و پان

برای داده های بزرگ یا داده های سری زمان، زوم کردن و پنینگ به کاربران کمک می کند تا بر روی مناطق مورد علاقه تمرکز کنند. D3 (FLT:11) رفتار سیستم مختصات را تبدیل می کند.

const zoom = d3.zoom()
 .scaleExtent([1, 10])
 .on("zoom", (event) => {
 g.attr("transform", event.transform);
 });

svg.call(zoom);

Dynamic Data Updates

داشبورد های تعاملی اغلب نیاز به تازه سازی داده ها بدون بارگذاری مجدد صفحه دارند. الگوی به روز رسانی D3 به طور ماهرانه ای به اضافه کردن، حذف و اصلاح عناصر می پردازد. کلید این است که پیوند را با داده های جدید و استفاده از آن (FLT13) برای گره های اضافی دوباره اجرا کنید.

function updateData(newData) {
 const circles = svg.selectAll("circle").data(newData);
 circles.exit().remove(); // remove old
 circles.enter().append("circle") // add new
 .merge(circles) // merge with existing
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d);
}

تکنیک های پیشرفته D3

طرح ها و تجسم جغرافیایی

D3 شامل ماژول های طرح تخصصی برای نمودار های پیچیده است: ایجاد اطلاعات پایه و / پایه، شبیه سازی فیزیک برای نمودار شبکه، پروژه نقشه داده با استفاده از GeoJSON. این ماژول ها به طور چشمگیری کد مورد نیاز برای تجسم های پیچیده را کاهش می دهد.

const simulation = d3.forceSimulation(nodes)
 .force("link", d3.forceLink(links))
 .force("charge", d3.forceManyBody())
 .force("center", d3.forceCenter(width / 2, height / 2));

انتقال و انیمیشن

انتقال های آهسته تجربه کاربری را بهبود می بخشد. D3 (FLT 19) یک هم اتاقی تغییرات را در طول زمان نسبت می دهد.شما می توانید مدت زمان، کاهش و تاخیر را کنترل کنید.

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", height)
 .attr("width", 50)
 .attr("height", 0)
 .attr("fill", "steelblue")
 .transition()
 .duration(800)
 .ease(d3.easeBounce)
 .attr("y", d => height - d * 3)
 .attr("height", d => d * 3);

بهترین روش ها برای تولید-Ready D3

بهینه سازی عملکرد

برای مجموعه داده های بزرگ (هزاران امتیاز)، دستکاری مستقیم DOM کند می شود.[۱۰] استفاده از canvas] رندر از طریق D3canvas یا در نظر گرفتن WebGL با کتابخانه هایی مانند عرشه.gl.

امکان دسترسی و مسئولیت پذیری

تجسم باید توسط همه کاربران قابل قبول باشد. [FLT 22] تگ ها را در عناصر SVG، استفاده از ویژگی های ARIA، و شامل یک جدول مبتنی بر متن به عنوان یک عقب نشینی برای طراحی پاسخگو، ابعاد پایه SVG در عرض ظرف با استفاده از FLT 23 و گوش دادن به رویدادهای اندازه پنجره با D3.

function resize() {
 const width = container.node().getBoundingClientRect().width;
 svg.attr("width", width)
 .attr("height", width * aspectRatio);
 // redraw scales and axes
}
window.addEventListener("resize", resize);

سازمان Code

حتی در یک برنامه تک صفحه ای، کد D3 خود را به ماژول ها ساختار دهید: یکی برای جمع آوری داده ها، یکی برای مقیاس /axes، یکی برای ترسیم، و یکی برای تعاملات استفاده از ماژول های ES6 یا یک بسته بندی مانند Webpack. از مخلوط کردن D3 با قلاب های چرخه به طور مستقیم؛ به جای آن، ایجاد یک کلاس D3 که چارچوب شما را می نامد.

ادغام D3 با چارچوب های مدرن

React، Angular و Vue برای جلوگیری از درگیری ها، از D3 فقط برای محاسبات (مقیاس، شکل) استفاده می کنند و اجازه می دهند چارچوب SVG را جایگزین کند، از یک بسته بندی اختصاصی مانند (FLT:25 یا (FLT 26) استفاده کنید.

مثال های واقعی و جهانی و استفاده از موارد

D3 بسیاری از پروژه های تجسمی با مشخصات بالا را به نمایش می گذارد: گالری صدها نمونه را نشان می دهد، از choropleth های متحرک گرفته تا جدول زمانی تعاملی، سازمان های خبری مانند نیویورک تایمز از D3 برای داستان های داده سفارشی استفاده می کنند.در تنظیمات سازمانی، D3 داشبورد سفارشی برای داده های مالی یا انعطاف پذیری رابط کاربری مجازی را قادر می سازد.

مثال: Interactive Scatter با Tooltips و Brushing

تصور کنید مجموعه ای از ۵۰۰ امتیاز با x، y و دسته بندی با استفاده از D3، شما می توانید یک طرح پراکنده با دایره های رنگی را با دسته ایجاد کنید، یک ابزار نشان دادن مختصات دقیق و یک قلم که نقاط انتخاب شده را برجسته می کند، ساختار کد از الگوهای فوق پیروی می کند:

const brush = d3.brush()
 .extent([[0, 0], [width, height]])
 .on("brush end", brushed);

svg.append("g").call(brush);

function brushed(event) {
 if (event.selection) {
 const [[x0, y0], [x1, y1]] = event.selection;
 circles.classed("selected", d =>
 x0 <= xScale(d.x) && xScale(d.x) <= x1 &&
 y0 <= yScale(d.y) && yScale(d.y) <= y1
 );
 } else {
 circles.classed("selected", false);
 }
}

یادگیری منابع و مراحل بعدی

برای تسلط بر D3، شروع به کار با [FLT1] و آموزش های رایگان در اسناد و مدارک کار از طریق دفترچه یادداشت های تمیز، که کد زنده را فراهم می کند که شما همچنین بخوانید تمرین فعال برای ایجاد نمودار های کلاسیک (F2، با معرفی مجدد وب سایت:5.

نتیجه گیری

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