D3 এর Pie Layout মডিউল

D3.js-এর Pie Layout মডিউলটি ডেটাকে পাই চার্টে রূপান্তরিত করতে ব্যবহৃত হয়। এটি একটি অত্যন্ত জনপ্রিয় ভিজ্যুয়ালাইজেশন প্যাটার্ন, যেখানে সেকশনগুলির (slice) আকার ডেটার মানের অনুপাত অনুযায়ী প্রদর্শিত হয়। D3.js এর d3.pie() মেথড ব্যবহার করে পাই চার্ট তৈরি করা হয় এবং এটি স্বয়ংক্রিয়ভাবে ডেটাকে উপযুক্ত কোণ (angle) এর মধ্যে রূপান্তরিত করে।

১. d3.pie() মেথড

d3.pie() মেথডটি একটি পাই চার্ট তৈরি করার জন্য ব্যবহৃত হয়। এটি একটি ডেটা সেট নেয় এবং প্রতিটি উপাদানের জন্য একটি অঙ্গুলার মান (angle value) প্রদান করে, যা পাই চার্টে উপযুক্ত সেকশন তৈরি করতে ব্যবহৃত হয়।

সিনট্যাক্স:

d3.pie()
  .value(function(d) { return d.value; })
  .sort(null);

• value(): এই ফাংশনটি প্রতিটি ডেটা পয়েন্টের মান নির্ধারণ করে যা সেকশনের আকার নির্ধারণ করবে।
• sort(): ডেটা সোর্ট করা যায়, তবে যদি null সেট করা হয়, তাহলে ডেটা সোর্ট করা হবে না। সাধারণত, পাই চার্টের সেকশনগুলি সজ্জিত করার জন্য এটি ব্যবহার করা হয়।

২. পাই চার্ট তৈরি করার প্রাথমিক পদক্ষেপ

একটি পাই চার্ট তৈরি করতে সাধারণত নিম্নলিখিত স্টেপগুলি অনুসরণ করতে হয়:

1. ডেটা সেট তৈরি করা।
2. স্কেল এবং সাইজ নির্ধারণ করা।
3. d3.pie() ব্যবহার করে পাই চার্টে ডেটা রূপান্তর করা।
4. arc() মেথডের মাধ্যমে সেকশন তৈরি করা।
5. সেকশনগুলিকে SVG এর মধ্যে যোগ করা।

৩. উদাহরণ: একটি বেসিক পাই চার্ট তৈরি

এখানে একটি বেসিক পাই চার্ট তৈরি করার জন্য কোড উদাহরণ দেয়া হয়েছে:

কোড:

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

// SVG ক্যানভাস তৈরি
const svg = d3.select("body").append("svg")
  .attr("width", 400)
  .attr("height", 400)
  .append("g")
  .attr("transform", "translate(200,200)");  // ক্যানভাসের কেন্দ্রবিন্দুতে সেন্টার করা

// পাই চার্টের জন্য d3.pie() ফাংশন
const pie = d3.pie();

// আর্ক (arc) তৈরি করতে d3.arc() ফাংশন
const arc = d3.arc()
  .innerRadius(0)    // সেকশনগুলির ভিতরের রেডিয়াস
  .outerRadius(150); // সেকশনগুলির বাইরের রেডিয়াস

// পাই চার্টের সেকশন তৈরি করা
const arcs = svg.selectAll("path")
  .data(pie(data))  // ডেটা পাই ফাংশনে পাঠানো
  .enter()
  .append("path")
  .attr("d", arc)    // arc ফাংশন ব্যবহার করে সেকশন তৈরি করা
  .attr("fill", function(d, i) { return d3.schemeCategory10[i]; }); // বিভিন্ন রঙ ব্যবহার করা

ব্যাখ্যা:

1. d3.pie() ফাংশন ডেটাকে পাই সেকশনে রূপান্তরিত করেছে।
2. d3.arc() ফাংশন পাই সেকশনগুলির আকৃতি নির্ধারণ করে।
3. pie(data) ডেটার উপর ভিত্তি করে কোণ নির্ধারণ করে এবং এই কোণগুলো ব্যবহার করে arc() মেথডটি সেকশন তৈরি করে।
4. পাই সেকশনগুলো SVG-এর মধ্যে <path> এলিমেন্ট হিসেবে যোগ করা হয়েছে এবং প্রতিটি সেকশনের জন্য আলাদা রঙ ব্যবহৃত হয়েছে।

৪. d3.pie() এর কাস্টমাইজেশন

d3.pie() মেথডটি কিছু কাস্টমাইজেশন সমর্থন করে, যেমন:

• startAngle(): পাই চার্টের শুরুর কোণ নির্ধারণ করা।
• endAngle(): পাই চার্টের শেষ কোণ নির্ধারণ করা।
• padAngle(): সেকশনগুলির মধ্যে ব্যবধান নির্ধারণ করা।
• sort(): ডেটা সোর্ট করার জন্য ব্যবহৃত হয় (যেমন ছোট থেকে বড় অথবা বড় থেকে ছোট)।

উদাহরণ: কাস্টমাইজড পাই চার্ট

const pie = d3.pie()
  .startAngle(0)       // শুরুর কোণ 0 ডিগ্রি
  .endAngle(Math.PI)    // শেষ কোণ 180 ডিগ্রি
  .padAngle(0.03);      // সেকশনগুলির মধ্যে একটু ব্যবধান

const arc = d3.arc()
  .innerRadius(0)
  .outerRadius(150);

const data = [10, 20, 30, 40];

const svg = d3.select("body").append("svg")
  .attr("width", 400)
  .attr("height", 400)
  .append("g")
  .attr("transform", "translate(200,200)");

svg.selectAll("path")
  .data(pie(data))
  .enter()
  .append("path")
  .attr("d", arc)
  .attr("fill", function(d, i) { return d3.schemeCategory10[i]; });

এখানে, startAngle() এবং endAngle() ব্যবহার করে পাই চার্টের আঙ্গুলগুলি নির্দিষ্ট কোণে সীমাবদ্ধ করা হয়েছে। padAngle() ব্যবহার করে সেকশনগুলির মধ্যে ব্যবধান যোগ করা হয়েছে।

৫. পাই চার্টে লেবেল যোগ করা

প্রতিটি পাই সেকশনের জন্য আপনি লেবেলও যোগ করতে পারেন, যা সাধারণত টুকরা বা সেকশনের নাম বা মান প্রদর্শন করতে ব্যবহৃত হয়।

উদাহরণ: পাই সেকশনের লেবেল যোগ করা

const data = [10, 20, 30, 40];

const svg = d3.select("body").append("svg")
  .attr("width", 400)
  .attr("height", 400)
  .append("g")
  .attr("transform", "translate(200,200)");

const pie = d3.pie();
const arc = d3.arc().innerRadius(0).outerRadius(150);

svg.selectAll("path")
  .data(pie(data))
  .enter()
  .append("path")
  .attr("d", arc)
  .attr("fill", function(d, i) { return d3.schemeCategory10[i]; });

svg.selectAll("text")
  .data(pie(data))
  .enter()
  .append("text")
  .attr("transform", function(d) {
    const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
    const x = Math.sin(midAngle) * 150;
    const y = -Math.cos(midAngle) * 150;
    return "translate(" + x + "," + y + ")";
  })
  .attr("text-anchor", "middle")
  .text(function(d) { return d.data; });

ব্যাখ্যা:

• প্রতিটি সেকশনের জন্য টেক্সট লেবেল (যেমন, সেকশনের মান) যোগ করা হয়েছে।
• transform ব্যবহার করে টেক্সটকে সেকশনের মাঝামাঝি অবস্থানে স্থানান্তরিত করা হয়েছে।

D3.js-এর Pie Layout মডিউলটি ডেটাকে পাই চার্টে রূপান্তর করতে এবং কাস্টমাইজড ভিজ্যুয়ালাইজেশন তৈরি করতে খুবই কার্যকর। d3.pie() এবং d3.arc() ফাংশনের মাধ্যমে আপনি সহজেই পাই চার্ট তৈরি এবং কাস্টমাইজ করতে পারবেন, যেখানে Tick Marks, Arc Angles, এবং Labels কাস্টমাইজ করার সুবিধা রয়েছে।