Pie Chart এবং Donut Chart এর ধারণা

D3.js একটি শক্তিশালী JavaScript লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি বিভিন্ন ধরনের ভিজ্যুয়ালাইজেশন যেমন বার চার্ট, লাইন গ্রাফ, পাই চার্ট, ডোনাট চার্ট ইত্যাদি তৈরি করতে পারেন। এই টিউটোরিয়ালে আমরা Pie Chart এবং Donut Chart তৈরি করার ধারণা এবং পদ্ধতি আলোচনা করবো।

১. Pie Chart

Pie Chart একটি গোলাকার চার্ট যা ডেটাকে বিভিন্ন সেগমেন্টে ভাগ করে প্রদর্শন করে। প্রতিটি সেগমেন্ট ডেটার একটি অংশ বা শতাংশ প্রদর্শন করে। এটি সাধারণত শেয়ার, ভগ্নাংশ বা শতাংশ হিসেবে ডেটাকে উপস্থাপন করার জন্য ব্যবহৃত হয়।

Pie Chart তৈরির উপাদান:

• Arc: প্রতিটি সেগমেন্ট বা অংশের জন্য একটি আর্ক (বিভক্ত করা অংশ) তৈরি করতে হয়।
• Scale: ডেটার মানের উপর ভিত্তি করে আর্কের প্রস্থ নির্ধারণ করা হয়।
• Pie Layout: পাই চার্টের জন্য বিশেষভাবে তৈরি করা D3.js এর d3.pie() লেআউট ব্যবহার করা হয়।

২. Donut Chart

Donut Chart হল পাই চার্টের একটি পরিবর্তিত রূপ, যার মধ্যে কেন্দ্রটি খালি থাকে। এটি প্রায়শই গতি বা প্রবণতা দেখানোর জন্য ব্যবহার করা হয়। ডোনাট চার্টের মূল পার্থক্য হল যে এতে একটি খালি মাঝখানের অংশ থাকে, যা কিছু ক্ষেত্রে আরও স্পষ্টভাবে তথ্য উপস্থাপন করতে সহায়তা করে।

৩. D3.js-এ Pie Chart এবং Donut Chart তৈরির পদ্ধতি

৩.১ Pie Chart তৈরির উদাহরণ

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

// SVG তৈরি
const width = 300, height = 300, radius = Math.min(width, height) / 2;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height)
              .append("g")
              .attr("transform", `translate(${width / 2}, ${height / 2})`);

// Pie লেআউট তৈরি
const pie = d3.pie();
const arc = d3.arc().outerRadius(radius).innerRadius(0);

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

arcs.append("path")
    .attr("d", arc)
    .style("fill", (d, i) => d3.schemeCategory10[i]); // রঙের সেট

// টেক্সট যুক্ত করা
arcs.append("text")
    .attr("transform", d => `translate(${arc.centroid(d)})`)
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(d => d.data);

ব্যাখ্যা:

• d3.pie(): পাই চার্টের জন্য ডেটাকে অংশে ভাগ করতে ব্যবহৃত হয়।
• d3.arc(): আর্কের আকৃতি এবং আউটার রেডিয়াস নির্ধারণ করে, যা পাই চার্টের সেগমেন্ট তৈরিতে ব্যবহৃত হয়।
• pie(data): ডেটাকে সেগমেন্টে ভাগ করে।
• path: পাই চার্টের প্রতিটি সেগমেন্ট (আর্ক) তৈরি করা হয়।
• text: সেগমেন্টের মধ্যে ডেটা মান প্রদর্শন করা হয়।

৩.২ Donut Chart তৈরির উদাহরণ

ডোনাট চার্ট তৈরির জন্য আপনি পাই চার্টের সাথে innerRadius ব্যবহার করবেন, যা চার্টের কেন্দ্রকে খালি করে দেয়।

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

// SVG তৈরি
const width = 300, height = 300, radius = Math.min(width, height) / 2;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height)
              .append("g")
              .attr("transform", `translate(${width / 2}, ${height / 2})`);

// Pie লেআউট তৈরি
const pie = d3.pie();
const arc = d3.arc().outerRadius(radius).innerRadius(radius - 50); // innerRadius ব্যবহার

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

arcs.append("path")
    .attr("d", arc)
    .style("fill", (d, i) => d3.schemeCategory10[i]); // রঙের সেট

// টেক্সট যুক্ত করা
arcs.append("text")
    .attr("transform", d => `translate(${arc.centroid(d)})`)
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(d => d.data);

ব্যাখ্যা:

• innerRadius(radius - 50): ডোনাট চার্ট তৈরির জন্য innerRadius সেট করা হয়েছে, যা পাই চার্টের কেন্দ্র খালি করে দেয়।
• বাকি অংশটি পাই চার্টের মতোই।

৪. কাস্টমাইজেশন

D3.js-এ Pie Chart এবং Donut Chart কাস্টমাইজ করার জন্য বিভিন্ন ফিচার ব্যবহার করা যেতে পারে:

• ডেটা লেবেল: সেগমেন্টের মধ্যে ডেটা লেবেল প্রদর্শন করা।
• রঙ: প্রতিটি সেগমেন্টের জন্য আলাদা রঙ সেট করা।
• টিক মার্ক এবং কাস্টম টেক্সট: কাস্টম টেক্সট এবং টিক মার্কগুলো যোগ করা।

উদাহরণ: সেগমেন্টের মধ্যে লেবেল প্রদর্শন

arcs.append("text")
    .attr("transform", d => `translate(${arc.centroid(d)})`)
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .style("fill", "white")
    .text(d => `${d.data}%`);  // ডেটার শতাংশ লেবেল হিসেবে দেখানো

রঙের কাস্টমাইজেশন:

arcs.append("path")
    .attr("d", arc)
    .style("fill", (d, i) => d3.scaleOrdinal(d3.schemeCategory10)(i)); // কাস্টম রঙ স্কেল

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