পাই চার্ট এবং ডোনাট চার্ট

D3.js ব্যবহার করে আপনি পাই চার্ট এবং ডোনাট চার্ট তৈরি করতে পারেন, যা ডেটাকে আংশিকভাবে বা একে অপরের সাথে তুলনা করে দেখানোর জন্য ব্যবহৃত হয়। পাই চার্টে একটি বৃত্তের মধ্যে বিভিন্ন অংশ (segments) প্রদর্শিত হয়, এবং ডোনাট চার্টে একই বৃত্তের মধ্যে একটি খালি অংশ থাকে যা এটি দেখতে ডোনাটের মতো বানিয়ে তোলে।

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

পাই চার্ট তৈরি করা

পাই চার্ট তৈরি করতে Arc Generator এবং Pie Layout ব্যবহার করা হয়, যা D3.js-এ সরাসরি উপলব্ধ।

ধাপ ১: ডেটা প্রস্তুতি

একটি সিম্পল ডেটাসেট তৈরি করতে হবে যেখানে বিভিন্ন ক্যাটেগরি এবং তাদের মান থাকবে।

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

ধাপ ২: স্কেল এবং পাই আর্ক জেনারেটর তৈরি করা

D3.js-এর d3.pie() এবং d3.arc() মেথড ব্যবহার করে পাই চার্টের আর্ক তৈরি করা হয়।

// ডেটার জন্য পাই লেআউট তৈরি করা
const pie = d3.pie();

// আর্ক (বিভাগ) তৈরি করার জন্য আর্ক জেনারেটর তৈরি করা
const arc = d3.arc()
    .innerRadius(0)  // ভিতরের রেডিয়াস (পাই চার্টের জন্য 0)
    .outerRadius(100);  // বাইরের রেডিয়াস

ধাপ ৩: পাই চার্ট তৈরি

const width = 500;
const height = 500;

const svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // সেন্টারিং

// পাই লেআউটের মাধ্যমে ডেটা মাপানো
const pieData = pie(data);

// আর্ক এলিমেন্টের মাধ্যমে পাই চার্ট আঁকা
svg.selectAll("path")
    .data(pieData)
    .enter().append("path")
    .attr("d", arc)
    .attr("fill", (d, i) => d3.schemeCategory10[i]); // বিভিন্ন রঙের জন্য ডিফল্ট স্কিম

এখানে, d3.pie() ডেটাকে পাই সেগমেন্টে রূপান্তরিত করে এবং d3.arc() সেই সেগমেন্টগুলিকে আকার দেয়।

ডোনাট চার্ট তৈরি করা

ডোনাট চার্ট আসলে একটি পাই চার্টের মতোই, তবে এর মধ্যে একটি খালি অংশ থাকে। এই খালি অংশের জন্য innerRadius ব্যবহৃত হয়।

ধাপ ১: ডেটা এবং আর্ক জেনারেটর তৈরি করা

ডোনাট চার্টের জন্য শুধু innerRadius সেট করতে হবে।

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

const arc = d3.arc()
    .innerRadius(50)  // ভিতরের রেডিয়াস (ডোনাটের জন্য)
    .outerRadius(100);  // বাইরের রেডিয়াস

ধাপ ২: ডোনাট চার্ট তৈরি

const width = 500;
const height = 500;

const svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // সেন্টারিং

// পাই লেআউটের মাধ্যমে ডেটা মাপানো
const pieData = d3.pie()(data);

// আর্ক এলিমেন্টের মাধ্যমে ডোনাট চার্ট আঁকা
svg.selectAll("path")
    .data(pieData)
    .enter().append("path")
    .attr("d", arc)
    .attr("fill", (d, i) => d3.schemeCategory10[i]); // বিভিন্ন রঙের জন্য ডিফল্ট স্কিম

এখানে, ডোনাট চার্ট তৈরি করার জন্য innerRadius 50 পিক্সেল এবং outerRadius 100 পিক্সেল হিসাবে সেট করা হয়েছে।

পাই চার্ট এবং ডোনাট চার্টে লেবেল যোগ করা

লেবেলগুলি যোগ করার জন্য সাধারণত সেগমেন্টের সেন্টার পজিশনে text এলিমেন্ট যোগ করা হয়। এখানে, d3.arc() এর মাধ্যমে সেন্টার পজিশন বের করা যায়।

উদাহরণ: লেবেল যোগ করা

svg.selectAll("text")
    .data(pieData)
    .enter().append("text")
    .attr("transform", function(d) {
        const pos = arc.centroid(d);  // সেগমেন্টের সেন্টার পজিশন বের করা
        return "translate(" + pos + ")";
    })
    .attr("text-anchor", "middle")  // টেক্সট সেন্টার করতে
    .text(function(d) { return d.data; });  // লেবেলে ডেটার মান দেখানো

এটি প্রতিটি সেগমেন্টের কেন্দ্রে লেবেল দেখাবে, যেখানে লেবেলটি সেগমেন্টের ডেটা মান হবে।

পূর্ণ উদাহরণ: পাই এবং ডোনাট চার্ট

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

const width = 500;
const height = 500;

const svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// পাই লেআউট তৈরি
const pie = d3.pie();

// আর্ক জেনারেটর তৈরি
const arc = d3.arc()
    .innerRadius(50)  // ডোনাটের জন্য innerRadius 50
    .outerRadius(100);  // বাইরের রেডিয়াস

// ডেটা প্রক্রিয়া করা
const pieData = pie(data);

// ডোনাট চার্ট তৈরি
svg.selectAll("path")
    .data(pieData)
    .enter().append("path")
    .attr("d", arc)
    .attr("fill", (d, i) => d3.schemeCategory10[i]);

// লেবেল যোগ করা
svg.selectAll("text")
    .data(pieData)
    .enter().append("text")
    .attr("transform", function(d) {
        const pos = arc.centroid(d);
        return "translate(" + pos + ")";
    })
    .attr("text-anchor", "middle")
    .text(function(d) { return d.data; });

D3.js ব্যবহার করে পাই চার্ট এবং ডোনাট চার্ট তৈরি করা সহজ এবং কাস্টমাইজেবল। d3.pie() এবং d3.arc() ব্যবহার করে আপনি ডেটাকে সেগমেন্টে ভাগ করে এবং সুন্দরভাবে ভিজ্যুয়ালাইজ করতে পারেন। ডোনাট চার্টের জন্য innerRadius যোগ করা হয়, যা পাই চার্টের তুলনায় ভিন্ন। D3.js-এর সাহায্যে আপনি সহজেই এই চার্টগুলিতে লেবেল যোগ করতে পারেন এবং আরো কাস্টমাইজেশন করতে পারেন।

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() লেআউট ব্যবহার করে আপনি সহজেই পাই চার্ট এবং ডোনাট চার্ট তৈরি করতে পারেন। আপনি চাইলে আরও কাস্টমাইজেশন, যেমন সেগমেন্টের মধ্যে লেবেল, রঙ এবং অন্যান্য বৈশিষ্ট্য যুক্ত করতে পারেন। ডোনাট চার্টটি পাই চার্টের একটি উন্নত রূপ, যা কেন্দ্রে খালি স্থান রেখে আরও বেশি তথ্য উপস্থাপন করতে সহায়ক।

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 কাস্টমাইজ করার সুবিধা রয়েছে।

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 আপনাকে একে অপরের সাথে সুন্দরভাবে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য শক্তিশালী সরঞ্জাম প্রদান করে, যা অত্যন্ত ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব হয়।

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 এর মাধ্যমে এই সমস্ত কাস্টমাইজেশন এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা খুবই সহজ।