Pie এবং Donut চার্টে Color এবং Legend যুক্ত করা

Pie চার্ট এবং Donut চার্ট

Pie চার্ট এবং Donut চার্ট দুটি জনপ্রিয় ডেটা ভিজ্যুয়ালাইজেশন যা শতাংশ বা অনুপাতের তুলনা দেখানোর জন্য ব্যবহৃত হয়। Pie চার্ট একটি পূর্ণ বৃত্তের মধ্যে বিভিন্ন সেগমেন্ট তৈরি করে, আর Donut চার্ট একটি বৃত্তের মাঝখান দিয়ে খালি থাকে। D3.js ব্যবহার করে সহজে Pie এবং Donut চার্ট তৈরি করা যায় এবং এই চার্টগুলোতে color এবং legend যুক্ত করা যায়।

Pie চার্ট এবং Donut চার্টে Color যুক্ত করা

D3.js-এ Pie এবং Donut চার্টে প্রতিটি সেগমেন্টের জন্য ভিন্ন ভিন্ন রঙ প্রদান করতে d3.scaleOrdinal() এবং d3.schemeCategory10 বা আপনার নিজস্ব রঙের স্কিম ব্যবহার করা যায়।

১. Pie চার্টে Color যুক্ত করা

উদাহরণ:

const data = [30, 70, 45, 100, 60];

// SVG কন্টেইনার
const width = 400;
const height = 400;
const 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();

// Arc স্কেল (সেগমেন্টের আকার)
const arc = d3.arc()
              .outerRadius(radius)
              .innerRadius(0); // Donut chart এর জন্য innerRadius বড় করে দিন

// Color স্কেল
const color = d3.scaleOrdinal(d3.schemeCategory10); // 10টি রঙ

// Pie চার্টে সেগমেন্ট তৈরি
svg.selectAll("path")
   .data(pie(data))
   .enter()
   .append("path")
   .attr("d", arc)
   .attr("fill", (d, i) => color(i)); // প্রতিটি সেগমেন্টে আলাদা রঙ

এখানে d3.scaleOrdinal() ব্যবহার করে Pie চার্টের সেগমেন্টগুলোতে ভিন্ন ভিন্ন রঙ প্রদান করা হয়েছে। d3.schemeCategory10 রঙের স্কিম থেকে 10টি ভিন্ন রঙের কোড পাওয়া যায়।

২. Donut চার্টে Color যুক্ত করা

Donut চার্টে inner radius বড় করা হয়, যা Pie চার্টের মতোই কাজ করে তবে তার মাঝে খালি থাকে।

উদাহরণ:

const data = [30, 70, 45, 100, 60];

// SVG কন্টেইনার
const width = 400;
const height = 400;
const 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();

// Arc স্কেল (Donut চার্টের জন্য inner radius সেট করা)
const arc = d3.arc()
              .outerRadius(radius)
              .innerRadius(radius - 100); // Inner radius বাড়ানো হয়েছে Donut চেহারা পেতে

// Color স্কেল
const color = d3.scaleOrdinal(d3.schemeCategory10); // 10টি রঙ

// Donut চার্টে সেগমেন্ট তৈরি
svg.selectAll("path")
   .data(pie(data))
   .enter()
   .append("path")
   .attr("d", arc)
   .attr("fill", (d, i) => color(i)); // প্রতিটি সেগমেন্টে আলাদা রঙ

এখানে arc এর innerRadius পরিবর্তন করা হয়েছে, যা Donut চার্ট তৈরি করতে সাহায্য করেছে। অন্যথায় এটি একটি সাধারণ Pie চার্ট হয়ে যেত।

Pie এবং Donut চার্টে Legend যুক্ত করা

Pie বা Donut চার্টের প্রতিটি সেগমেন্টের জন্য একটি Legend তৈরি করতে হয় যাতে ইউজার জানে কোন সেগমেন্ট কী প্রতিনিধিত্ব করছে।

১. Legend তৈরি করা

Legend সাধারণত চার্টের বাইরে রাখা হয়, এবং প্রতিটি সেগমেন্টের নাম এবং রঙ প্রদর্শন করা হয়।

উদাহরণ:

const data = [
  { label: "A", value: 30 },
  { label: "B", value: 70 },
  { label: "C", value: 45 },
  { label: "D", value: 100 },
  { label: "E", value: 60 }
];

// SVG কন্টেইনার
const width = 500;
const height = 400;
const 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().value(d => d.value);

// Arc স্কেল
const arc = d3.arc()
              .outerRadius(radius)
              .innerRadius(0);

// Color স্কেল
const color = d3.scaleOrdinal(d3.schemeCategory10);

// Pie চার্টে সেগমেন্ট তৈরি
svg.selectAll("path")
   .data(pie(data))
   .enter()
   .append("path")
   .attr("d", arc)
   .attr("fill", (d, i) => color(i));

// Legend তৈরি
const legend = svg.append("g")
                  .attr("transform", `translate(${width / 2 + radius + 20}, ${-height / 2 + 20})`);

legend.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", 0)
      .attr("y", (d, i) => i * 20)
      .attr("width", 18)
      .attr("height", 18)
      .attr("fill", (d, i) => color(i));

legend.selectAll("text")
      .data(data)
      .enter()
      .append("text")
      .attr("x", 20)
      .attr("y", (d, i) => i * 20 + 9)
      .attr("dy", ".35em")
      .text(d => d.label);

ব্যাখ্যা:

1. Pie চার্ট তৈরি: d3.pie() এবং d3.arc() ব্যবহার করে Pie চার্টের সেগমেন্ট তৈরি করা হয়েছে। প্রতিটি সেগমেন্টে রঙ দেয়া হয়েছে d3.scaleOrdinal() স্কেল দিয়ে।
2. Legend তৈরি:
   • legend নামে একটি গ্রুপ (<g>) তৈরি করা হয়েছে, যেটি চার্টের বাইরে অবস্থান করবে।
   • rect উপাদান ব্যবহার করে প্রতিটি সেগমেন্টের জন্য একটি রঙের বক্স তৈরি করা হয়েছে।
   • text উপাদান ব্যবহার করে প্রতিটি সেগমেন্টের লেবেল (label) যোগ করা হয়েছে।

D3.js দিয়ে Pie এবং Donut চার্ট তৈরি করার সময়, প্রতিটি সেগমেন্টে আলাদা রঙ দিতে d3.scaleOrdinal() এবং d3.schemeCategory10 ব্যবহার করা হয়। এই রঙগুলোকে আরও কাস্টমাইজ করা যায় যদি আপনার নির্দিষ্ট রঙের স্কিম দরকার হয়। পাশাপাশি, Legend যুক্ত করে আপনি ব্যবহারকারীকে প্রতিটি সেগমেন্টের অর্থ বা লেবেল বুঝিয়ে দিতে পারেন। D3.js এর মাধ্যমে এই সমস্ত কাস্টমাইজেশন এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা খুবই সহজ।