X এবং Y অক্ষ তৈরি

D3.js ব্যবহার করে X এবং Y অক্ষ তৈরি করা একটি গুরুত্বপূর্ণ অংশ, বিশেষ করে ডেটা ভিজ্যুয়ালাইজেশন যেমন চার্ট, গ্রাফ ইত্যাদি তৈরি করার সময়। D3.js-এর scale এবং axis মডিউল ব্যবহার করে X এবং Y অক্ষ তৈরি করা হয়। এই অক্ষগুলোর মাধ্যমে ডেটাকে উপস্থাপন করা হয় এবং ডেটার সাথে সম্পর্কিত বিভিন্ন মান বা ক্যাটেগরি দেখানো হয়।

X এবং Y অক্ষ তৈরির জন্য প্রস্তুতি

1. SVG ক্যানভাস তৈরি করা: প্রথমে SVG ক্যানভাস তৈরি করতে হবে, যেখানে অক্ষ এবং অন্যান্য ভিজ্যুয়াল উপাদানগুলি প্রদর্শিত হবে।
2. স্কেল (Scale) তৈরি করা: X এবং Y অক্ষের জন্য স্কেল তৈরি করতে হবে, যাতে ডেটার মান গুলোকে সঠিকভাবে উপস্থাপন করা যায়।
3. অক্ষ (Axis) তৈরি করা: D3.js-এর axis মডিউল ব্যবহার করে X এবং Y অক্ষ তৈরি করা হয়।

ধাপ ১: SVG ক্যানভাস তৈরি

প্রথমে একটি SVG এলিমেন্ট তৈরি করুন, যেখানে অক্ষগুলি এবং গ্রাফের অন্যান্য অংশ উপস্থাপিত হবে।

const width = 500;
const height = 300;

const svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

এটি একটি svg এলিমেন্ট তৈরি করবে যার প্রস্থ 500px এবং উচ্চতা 300px।

ধাপ ২: স্কেল তৈরি

ডেটা অনুযায়ী X এবং Y স্কেল তৈরি করতে D3.js এর scaleLinear() বা scaleBand() মেথড ব্যবহার করা হয়। scaleLinear() সংখ্যার জন্য ব্যবহৃত হয়, আর scaleBand() ক্যাটেগরিকাল ডেটার জন্য।

X স্কেল

const xScale = d3.scaleLinear()
    .domain([0, 100])  // ডেটার রেঞ্জ (যেমন 0 থেকে 100)
    .range([0, width]); // SVG ক্যানভাসের রেঞ্জ (0 থেকে width)

Y স্কেল

const yScale = d3.scaleLinear()
    .domain([0, 100])  // ডেটার রেঞ্জ (যেমন 0 থেকে 100)
    .range([height, 0]); // SVG ক্যানভাসের রেঞ্জ (height থেকে 0)

এখানে, domain() ডেটার মানের পরিসর এবং range() SVG ক্যানভাসে সেই পরিসরের স্কেলিং সেট করে।

ধাপ ৩: অক্ষ তৈরি

D3.js-এর axis মডিউল ব্যবহার করে X এবং Y অক্ষ তৈরি করা হয়। d3.axisBottom() এবং d3.axisLeft() মেথড ব্যবহার করে X এবং Y অক্ষ তৈরি করা হয়।

X অক্ষ তৈরি

const xAxis = d3.axisBottom(xScale);  // xScale-এর ওপর ভিত্তি করে X অক্ষ তৈরি

Y অক্ষ তৈরি

const yAxis = d3.axisLeft(yScale);  // yScale-এর ওপর ভিত্তি করে Y অক্ষ তৈরি

এখন, X এবং Y অক্ষকে SVG ক্যানভাসে সংযুক্ত করতে হবে।

ধাপ ৪: অক্ষের রেন্ডারিং

অক্ষগুলি g (group) এলিমেন্টে অ্যাপেন্ড করা হয় এবং তারপরে call() মেথড ব্যবহার করে অক্ষের স্থাপন করা হয়।

X অক্ষ রেন্ডারিং

svg.append("g")
    .attr("transform", "translate(0," + height + ")")  // Y অক্ষের অবস্থান
    .call(xAxis);  // xAxis কল করে অক্ষের মান দেখানো

Y অক্ষ রেন্ডারিং

svg.append("g")
    .call(yAxis);  // yAxis কল করে অক্ষের মান দেখানো

পূর্ণ উদাহরণ

নিচে একটি পূর্ণ উদাহরণ দেয়া হলো যেখানে একটি সোজা লিনিয়ার চার্টের জন্য X এবং Y অক্ষ তৈরি করা হয়েছে।

const width = 500;
const height = 300;

// SVG ক্যানভাস তৈরি করা
const svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

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

// X এবং Y স্কেল তৈরি করা
const xScale = d3.scaleLinear()
    .domain([0, d3.max(data)])  // ডেটার সর্বোচ্চ মান
    .range([0, width]);

const yScale = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([height, 0]);

// X এবং Y অক্ষ তৈরি করা
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

// X অক্ষ রেন্ডারিং
svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Y অক্ষ রেন্ডারিং
svg.append("g")
    .call(yAxis);

// ডেটার ভিত্তিতে একটি সোজা লাইন তৈরি করা
svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", d => xScale(d))
    .attr("cy", d => yScale(d))
    .attr("r", 5)
    .style("fill", "blue");

ব্যাখ্যা:

1. SVG ক্যানভাস: এখানে SVG এলিমেন্টের প্রস্থ 500px এবং উচ্চতা 300px সেট করা হয়েছে।
2. স্কেল তৈরি: xScale এবং yScale লিনিয়ার স্কেল তৈরি করা হয়েছে, যা ডেটা পরিসরের সাথে ক্যানভাসের স্কেল সঠিকভাবে মানিয়ে নেবে।
3. অক্ষ তৈরি: axisBottom() এবং axisLeft() মেথড ব্যবহার করে X এবং Y অক্ষ তৈরি করা হয়েছে।
4. রেন্ডারিং: g এলিমেন্টে অক্ষগুলি স্থাপন করা হয়েছে এবং circle এলিমেন্ট ব্যবহার করে ডেটা পয়েন্টগুলি প্রদর্শন করা হয়েছে।

D3.js-এ X এবং Y অক্ষ তৈরি করা একটি গুরুত্বপূর্ণ অংশ যেটি ডেটা ভিজ্যুয়ালাইজেশনের ভিত্তি তৈরি করে। স্কেল এবং অক্ষ ব্যবহার করে আপনি ডেটা প্রস্থ এবং উচ্চতার সাথে সম্পর্কিত বিভিন্ন তথ্য ভিজ্যুয়ালি উপস্থাপন করতে পারবেন। D3.js-এর মাধ্যমে এই ধরনের কাস্টম অক্ষ তৈরি এবং ম্যানিপুলেশন খুবই সহজ এবং শক্তিশালী।