Arc Generator মেথড ব্যবহার করে চার্ট তৈরি

D3.js-এ Arc Generator একটি শক্তিশালী টুল যা আপনাকে পাই চার্ট বা ডোনাট চার্ট তৈরি করতে সাহায্য করে। এই মেথডটি বিভিন্ন আর্ক (বিভিন্ন কিউবিক আর্ক বা পাথ) তৈরি করার জন্য ব্যবহৃত হয়, যা সেগমেন্টাল বা চক্রাকার ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য উপযুক্ত। এটি সাধারণত ডোনাট চার্ট এবং পাই চার্ট তৈরির জন্য ব্যবহৃত হয়।

এখানে, আমরা D3.js এর Arc Generator মেথড ব্যবহার করে একটি পাই চার্ট তৈরি করার প্রক্রিয়া দেখব।

১. Arc Generator কি?

Arc Generator হল D3.js-এর একটি বিশেষ মেথড যা সেক্টর আকারে আর্ক তৈরি করতে সাহায্য করে। এটি বিশেষভাবে ডোনাট চার্ট বা পাই চার্ট তৈরি করতে ব্যবহৃত হয়। আপনি যেকোনো সংখ্যক সেক্টরের আকার, রেডিয়াস ইত্যাদি কাস্টমাইজ করতে পারেন।

২. Arc Generator সেটআপ

ডেটা সেগমেন্টের আকার অনুযায়ী আর্ক (অংশ) তৈরি করতে d3.arc() মেথড ব্যবহার করা হয়। এটি একটি ফাংশন যা একটি আর্ক তৈরি করে এবং তাকে SVG পাথ হিসেবে আউটপুট দেয়।

উদাহরণ ১: Arc Generator সেটআপ

// SVG এলিমেন্ট তৈরি করা
const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 500)
  .append("g")
  .attr("transform", "translate(250,250)"); // সেন্টারিং

// ডেটা সেট
const data = [10, 20, 30, 40];

// রেডিয়াসের জন্য স্কেল তৈরি করা
const radius = Math.min(500, 500) / 2;

// Arc Generator তৈরি করা
const arc = d3.arc()
  .innerRadius(0)  // ডোনাট চার্ট হলে ইননার রেডিয়াস হবে
  .outerRadius(radius);  // আউটার রেডিয়াস সেট করা

// পাই চার্ট তৈরি করা
const pie = d3.pie()
  .value(d => d);  // ডেটার মান থেকে পাই চার্টের সেগমেন্ট তৈরি

// পাই চার্টের আর্ক তৈরি করা
const arcs = svg.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "arc");

// প্রতিটি আর্কের জন্য পাথ তৈরি করা
arcs.append("path")
  .attr("d", arc)  // আর্কের পাথ
  .attr("fill", (d, i) => d3.schemeCategory10[i]); // রঙের স্কিম ব্যবহার করা

এই কোডটি একটি সাধারণ পাই চার্ট তৈরি করবে যা একটি ডেটাসেটের ভিত্তিতে সেগমেন্ট করবে। এখানে আমরা d3.arc() এবং d3.pie() দুটি প্রধান ফাংশন ব্যবহার করেছি।

৩. কাস্টম আর্ক সেক্টর তৈরি করা

আমরা D3.js-এ কাস্টম আর্ক তৈরি করতে পারি, যেমন ইননার এবং আউটার রেডিয়াস পরিবর্তন করা, অথবা আর্কের কোণ কাস্টমাইজ করা।

উদাহরণ ২: কাস্টম আর্ক সেক্টর

// Arc Generator সেটিং
const arc = d3.arc()
  .innerRadius(50)  // ইননার রেডিয়াস (ডোনাট চার্টের জন্য)
  .outerRadius(radius);  // আউটার রেডিয়াস

// পাই চার্টের আর্ক তৈরি করা
const arcs = svg.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "arc");

// আর্কের পাথ তৈরি করা
arcs.append("path")
  .attr("d", arc)
  .attr("fill", (d, i) => d3.schemeCategory10[i]); // রঙ যোগ করা

// আর্কে লেবেল যোগ করা
arcs.append("text")
  .attr("transform", (d) => "translate(" + arc.centroid(d) + ")") // লেবেল সেন্টারে বসানো
  .attr("dy", "0.35em")
  .style("text-anchor", "middle")
  .text(d => d.data); // সেক্টরের মান

এটি একটি ডোনাট চার্ট তৈরি করবে যেখানে ইননার রেডিয়াস ৫০px এবং আউটার রেডিয়াস স্কেল অনুযায়ী নির্ধারিত হবে। এছাড়া, এখানে সেক্টরের মান হিসেবে লেবেলও প্রদর্শিত হবে।

৪. Interactivity সহ Arc Generator ব্যবহার

D3.js-এ আপনি interactivity যোগ করতে পারেন, যেমন আর্ক সেক্টরের উপর হোভার করলে রঙ পরিবর্তন করা বা লেবেল দেখানো।

উদাহরণ ৩: Hover Interaction সহ Arc

// আর্ক পাথ তৈরি করা
arcs.append("path")
  .attr("d", arc)
  .attr("fill", (d, i) => d3.schemeCategory10[i])
  .on("mouseover", function(event, d) {  // হোভার করলে রঙ পরিবর্তন
    d3.select(this).attr("fill", "orange");
  })
  .on("mouseout", function(event, d) {  // হোভার ছাড়া আগের রঙে ফিরে আসা
    d3.select(this).attr("fill", (d, i) => d3.schemeCategory10[i]);
  });

এটি আর্ক সেক্টরের উপর হোভার করলে সেগুলোর রঙকে orange-এ পরিবর্তন করবে এবং মাউস আউট করলে আগের রঙে ফিরে আসবে।

৫. Arc Generator ব্যবহার করে ডাইনামিক লেবেলিং

ডাইনামিক লেবেলিং এর মাধ্যমে আপনি প্রতিটি আর্কের উপর সেগমেন্টের মান, শতাংশ অথবা অন্যান্য তথ্য প্রদর্শন করতে পারেন।

উদাহরণ ৪: লেবেল সহ ডাইনামিক আর্ক

// লেবেল যোগ করা
arcs.append("text")
  .attr("transform", (d) => "translate(" + arc.centroid(d) + ")")
  .attr("dy", "0.35em")
  .style("text-anchor", "middle")
  .text(d => `${d.data} (${Math.round(d.endAngle - d.startAngle)}°)`); // আর্কের কোণ দেখানো

এটি প্রতিটি আর্কের উপর সেক্টরের মান এবং সেগমেন্টের কোণ দেখাবে।

৬. Arc Generator-এ কাস্টম ফরম্যাটিং এবং টুলটিপ

D3.js-এ টুলটিপ যোগ করার মাধ্যমে আপনি আর্ক সেক্টরের উপর অতিরিক্ত তথ্য দেখাতে পারেন।

উদাহরণ ৫: টুলটিপ ব্যবহার

// টুলটিপ তৈরি করা
const tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

// আর্কে টুলটিপ যোগ করা
arcs.append("path")
  .attr("d", arc)
  .attr("fill", (d, i) => d3.schemeCategory10[i])
  .on("mouseover", function(event, d) {
    tooltip.transition().duration(200).style("opacity", .9);
    tooltip.html(`Value: ${d.data}<br>Percentage: ${(d.data / d3.sum(data) * 100).toFixed(2)}%`)
      .style("left", (event.pageX + 5) + "px")
      .style("top", (event.pageY - 28) + "px");
  })
  .on("mouseout", function(event, d) {
    tooltip.transition().duration(200).style("opacity", 0);
  });

এটি আর্ক সেক্টরের উপর মাউস হোভার করলে একটি টুলটিপ দেখাবে, যা সেক্টরের মান এবং শতাংশ দেখাবে।

D3.js-এর Arc Generator মেথড ব্যবহার করে আপনি অত্যন্ত কাস্টমাইজড এবং ইন্টারঅ্যাকটিভ পাই চার্ট এবং ডোনাট চার্ট তৈরি করতে পারবেন। এই মেথডের মাধ্যমে আপনি আর্ক সেক্টরের আকার, রঙ, টুলটিপ, লেবেল এবং অন্যান্য ফিচার কাস্টমাইজ করতে পারেন। D3.js আপনাকে একে অপরের সাথে সুন্দরভাবে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য শক্তিশালী সরঞ্জাম প্রদান করে, যা অত্যন্ত ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব হয়।