অক্ষ এবং লেবেল তৈরি

D3.js ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশনের একটি গুরুত্বপূর্ণ অংশ হলো অক্ষ (Axes) এবং লেবেল (Labels) তৈরি করা। অক্ষ এবং লেবেলগুলি গ্রাফের বা চার্টের একটি মূল উপাদান হিসেবে কাজ করে, যা ডেটার মান এবং পরিসীমা প্রদর্শন করতে সহায়ক। D3.js দিয়ে অক্ষ তৈরি করা এবং লেবেল সংযুক্ত করা একটি সাধারণ কাজ, কিন্তু এটি যথাযথভাবে করার জন্য কিছু টেকনিক্যাল পদ্ধতি জানা প্রয়োজন।

অক্ষ (Axes) তৈরি

D3.js-এ অক্ষ তৈরি করার জন্য সাধারণত d3.axisBottom(), d3.axisLeft(), d3.axisTop(), এবং d3.axisRight() মেথড ব্যবহার করা হয়, যা যথাক্রমে নীচের, বাম, উপরের এবং ডান দিকের অক্ষ তৈরি করতে ব্যবহৃত হয়।

১. অক্ষ তৈরি করার জন্য মৌলিক ধাপ

1. স্কেল তৈরি (d3.scaleLinear(), d3.scaleBand(), ইত্যাদি) — ডেটার জন্য একটি স্কেল সংজ্ঞায়িত করুন।
2. অক্ষ তৈরি — নির্বাচিত স্কেল ব্যবহার করে অক্ষ তৈরি করুন।
3. অক্ষ এবং স্কেল সংযুক্ত করা — অক্ষটি SVG বা অন্য DOM উপাদানে সংযুক্ত করুন।

২. উদাহরণ: বাম অক্ষ এবং নীচের অক্ষ তৈরি

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

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

// X এবং Y স্কেল তৈরি
const xScale = d3.scaleBand()
                 .domain(d3.range(data.length))
                 .range([0, 400])
                 .padding(0.1);

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

// X অক্ষ তৈরি (নিচের দিকে)
const xAxis = d3.axisBottom(xScale);

// Y অক্ষ তৈরি (বাম দিকে)
const yAxis = d3.axisLeft(yScale);

// X অক্ষ SVG এ যোগ করা
svg.append("g")
   .attr("transform", "translate(50, 350)") // X অক্ষকে সঠিক অবস্থানে বসানোর জন্য
   .call(xAxis);

// Y অক্ষ SVG এ যোগ করা
svg.append("g")
   .attr("transform", "translate(50, 0)")  // Y অক্ষকে সঠিক অবস্থানে বসানোর জন্য
   .call(yAxis);

এটি কী করে:

• এখানে, X অক্ষ একটি ব্যান্ড স্কেল (d3.scaleBand()) ব্যবহার করে এবং Y অক্ষ একটি লিনিয়ার স্কেল (d3.scaleLinear()) ব্যবহার করে তৈরি করা হয়েছে।
• call() মেথড ব্যবহার করে D3.js স্কেল এবং অক্ষকে SVG এ সংযুক্ত করা হয়।

অক্ষের লেবেল (Axis Labels)

D3.js-এ অক্ষের লেবেল সাধারণত text() মেথড ব্যবহার করে যোগ করা হয়। অক্ষের লেবেলগুলির জন্য আপনি টেক্সট, পজিশন, এবং ফন্ট স্টাইল কাস্টমাইজ করতে পারেন।

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

// X অক্ষের লেবেল যোগ করা
svg.append("text")
   .attr("x", 250) // লেবেলের অবস্থান
   .attr("y", 390)  // X অক্ষের নিচে
   .attr("text-anchor", "middle")  // লেবেলকে মাঝখানে রাখতে
   .text("X Axis Label");

// Y অক্ষের লেবেল যোগ করা
svg.append("text")
   .attr("x", -150)  // Y অক্ষের বামে
   .attr("y", 150)   // Y অক্ষের মধ্যে
   .attr("text-anchor", "middle")
   .attr("transform", "rotate(-90)") // Y অক্ষের জন্য টেক্সট রোটেট করা
   .text("Y Axis Label");

এটি কী করে:

• X অক্ষের লেবেলকে একেবারে মধ্যস্থানে বসানো হয়েছে, এবং Y অক্ষের লেবেলকে ৯০° ঘুরানো হয়েছে যাতে তা সঠিকভাবে প্রদর্শিত হয়।

অক্ষের এবং লেবেলের কাস্টমাইজেশন

১. অক্ষের টিক মার্ক কাস্টমাইজেশন

d3.axis() মেথডের মাধ্যমে টিক মার্কের স্টাইলও কাস্টমাইজ করা যেতে পারে।

উদাহরণ:

// Y অক্ষের টিক মার্কের রঙ পরিবর্তন করা
svg.selectAll(".tick line")
   .style("stroke", "orange")
   .style("stroke-width", 2);

২. অক্ষের টেক্সট কাস্টমাইজেশন

অক্ষের টেক্সটগুলির ফন্ট সাইজ, রঙ, ফন্ট স্টাইল ইত্যাদি কাস্টমাইজ করা যেতে পারে।

উদাহরণ:

// X অক্ষের টেক্সট ফন্ট স্টাইল পরিবর্তন করা
svg.selectAll(".x-axis text")
   .style("font-size", "12px")
   .style("font-family", "Arial")
   .style("fill", "red");

D3.js-এ অক্ষ এবং লেবেল তৈরি করা একটি গুরুত্বপূর্ণ পদক্ষেপ ডেটা ভিজ্যুয়ালাইজেশনে, কারণ এগুলি দর্শকদের ডেটার মান এবং স্কেল বুঝতে সাহায্য করে। আপনি d3.axis() মেথড ব্যবহার করে সহজেই বিভিন্ন ধরণের অক্ষ তৈরি করতে পারেন এবং text() মেথড দিয়ে অক্ষের লেবেল যোগ করতে পারেন। এছাড়াও, D3.js আপনাকে এই অক্ষ ও লেবেলগুলির কাস্টমাইজেশন করার সুবিধা দেয়, যাতে আপনার ভিজ্যুয়ালাইজেশন আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব হয়।

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

D3.js-এ Axes মডিউল ব্যবহার করে আপনি x-অক্ষ এবং y-অক্ষ তৈরি করতে পারেন, যা ডেটা ভিজ্যুয়ালাইজেশন (যেমন বার চার্ট, লাইন চার্ট ইত্যাদি) এর জন্য অপরিহার্য। axisBottom এবং axisLeft মেথডগুলি D3.js এর অন্তর্ভুক্ত প্রধান অক্ষ তৈরির পদ্ধতি, যা আপনার ভিজ্যুয়ালাইজেশনের x এবং y অক্ষে তথ্য প্রস্থাপন করতে সহায়ক।

১. Axes মডিউলের ধারণা

D3.js-এ অক্ষ (axis) তৈরি করতে D3 এর axisBottom এবং axisLeft মেথডগুলো ব্যবহৃত হয়। এগুলি মূলত x-অক্ষ (horizontal axis) এবং y-অক্ষ (vertical axis) তৈরি করার জন্য ব্যবহৃত হয়। এই অক্ষগুলি একটি scale এর উপর ভিত্তি করে তৈরি হয় এবং তা ডেটার সঠিক মান অনুযায়ী মানচিত্রিত হয়।

২. axisBottom এবং axisLeft এর ব্যাবহার

২.১ axisBottom

axisBottom মেথডটি x-অক্ষ তৈরি করার জন্য ব্যবহৃত হয়। এটি সাধারণত একটি scale (যেমন, d3.scaleLinear() বা d3.scaleBand()) এর সাথে বাইন্ড করা হয়, যা ডেটাকে একটি নির্দিষ্ট রেঞ্জে মানচিত্রিত করে।

সিনট্যাক্স:

d3.axisBottom(scale);

২.২ axisLeft

axisLeft মেথডটি y-অক্ষ তৈরি করার জন্য ব্যবহৃত হয়। এটি সাধারণত একটি scale (যেমন, d3.scaleLinear() বা d3.scaleBand()) এর সাথে বাইন্ড করা হয়, যা ডেটাকে একটি নির্দিষ্ট রেঞ্জে মানচিত্রিত করে।

সিনট্যাক্স:

d3.axisLeft(scale);

৩. উদাহরণ: x-অক্ষ এবং y-অক্ষ তৈরি

এই উদাহরণে, আমরা একটি বেসিক বার চার্ট তৈরি করবো, যেখানে x-অক্ষ এবং y-অক্ষ তৈরি করা হবে axisBottom এবং axisLeft এর মাধ্যমে।

৩.১ কোড:

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

// SVG তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 600)
              .attr("height", 400);

// X এবং Y স্কেল তৈরি
const xScale = d3.scaleBand()
                 .domain(d3.range(data.length))
                 .range([0, 500])
                 .padding(0.1);

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

// X অক্ষ তৈরি (axisBottom)
const xAxis = d3.axisBottom(xScale)
                .tickFormat(i => "Bar " + (i + 1)); // টিক মডিফাই করা

// Y অক্ষ তৈরি (axisLeft)
const yAxis = d3.axisLeft(yScale);

// বার তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("width", xScale.bandwidth())
   .attr("height", d => 300 - yScale(d))
   .attr("x", (d, i) => xScale(i))
   .attr("y", d => yScale(d))
   .style("fill", "steelblue");

// X অক্ষ যোগ করা
svg.append("g")
   .attr("transform", "translate(50, 300)") // X অক্ষের অবস্থান
   .call(xAxis);

// Y অক্ষ যোগ করা
svg.append("g")
   .attr("transform", "translate(50, 0)") // Y অক্ষের অবস্থান
   .call(yAxis);

৩.২ ব্যাখ্যা:

• xScale: এখানে d3.scaleBand() ব্যবহৃত হয়েছে, যা নির্দিষ্ট সংখ্যা (ডেটার ইনডেক্স) কে আক্ষরিকভাবে x-অক্ষের স্থানাঙ্কে মানচিত্রিত করে।
• yScale: এখানে d3.scaleLinear() ব্যবহৃত হয়েছে, যা ডেটার সঠিক মানকে y-অক্ষের উপর মানচিত্রিত করে।
• axisBottom(xScale): এটি x-অক্ষ তৈরি করে xScale এর উপর ভিত্তি করে।
• axisLeft(yScale): এটি y-অক্ষ তৈরি করে yScale এর উপর ভিত্তি করে।
• call(): .call() মেথড ব্যবহার করে আমরা xAxis এবং yAxis তৈরি করে তা SVG-এ অ্যাপ্লাই করি।

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

D3.js এর axisBottom এবং axisLeft অক্ষের স্টাইল কাস্টমাইজ করতে অনেক ফিচার রয়েছে। যেমন টিক মার্ক, লেবেল, রঙ ইত্যাদি পরিবর্তন করা যেতে পারে।

৪.১ টিক মার্কের স্টাইল পরিবর্তন:

// X অক্ষের টিক মার্ক স্টাইল পরিবর্তন
xAxis.tickSize(10); // টিক মার্কের আকার 10px
xAxis.tickPadding(5); // টিক মার্ক এবং লেবেলের মধ্যে 5px গ্যাপ

৪.২ লেবেল পরিবর্তন:

// X অক্ষের লেবেল পরিবর্তন
xAxis.tickFormat(d3.format(".2s")); // সংখ্যা ছোট আকারে প্রদর্শন করবে

৫. axisBottom এবং axisLeft এর অন্যান্য বৈশিষ্ট্য

D3.js-এ axisBottom এবং axisLeft মেথডের মাধ্যমে আরও অনেক কাস্টমাইজেশন করা যেতে পারে, যেমন টিক মার্কের সংখ্যা নির্ধারণ, লেবেল রোটেশন, অক্ষের ধরন পরিবর্তন ইত্যাদি।

৫.১ টিক মার্ক সংখ্যা নির্ধারণ:

// X অক্ষের টিক মার্ক সংখ্যা নির্ধারণ
xAxis.ticks(5); // ৫টি টিক মার্ক

৫.২ টিক মার্কের রঙ পরিবর্তন:

svg.selectAll(".tick line")
   .style("stroke", "red"); // টিক মার্কের রঙ পরিবর্তন

D3.js-এর axisBottom এবং axisLeft মেথডগুলি অত্যন্ত গুরুত্বপূর্ণ টুল, যা আপনাকে ডেটা ভিত্তিক ভিজ্যুয়ালাইজেশন তৈরির জন্য শক্তিশালী x এবং y অক্ষ তৈরি করতে সহায়ক। এই মেথডগুলি দিয়ে আপনি বিভিন্ন ধরনের স্কেল ব্যবহার করে অক্ষ তৈরি করতে পারেন এবং সেই অক্ষের টিক মার্ক, লেবেল, রঙ, আকার ইত্যাদি কাস্টমাইজ করতে পারেন।

D3.js-এ অক্ষ (axes) একটি অত্যন্ত গুরুত্বপূর্ণ অংশ, বিশেষত যখন আপনি ডেটা ভিজ্যুয়ালাইজেশন তৈরি করেন। অক্ষের সাহায্যে আপনি আপনার ডেটাকে গ্রাফিক্যালি উপস্থাপন করতে পারেন এবং Tick Marks এবং Labels ব্যবহার করে অক্ষের উপর সঠিক মান বা বিভাগ প্রদর্শন করতে পারেন। D3.js এর d3.axis() মেথড আপনাকে এই অক্ষগুলি তৈরি এবং কনফিগার করতে সহায়তা করে।

১. D3.js-এ অক্ষ তৈরি

D3.js-এ অক্ষ তৈরির জন্য আপনি d3.axisBottom(), d3.axisLeft(), d3.axisTop(), এবং d3.axisRight() মেথড ব্যবহার করতে পারেন। এই মেথডগুলির মাধ্যমে অনুভূমিক এবং 수직 অক্ষ তৈরি করা যায়।

• d3.axisBottom(): অনুভূমিক (horizontal) অক্ষ
• d3.axisLeft(): 수직 (vertical) অক্ষ
• d3.axisTop(): উপরের (top) অনুভূমিক অক্ষ
• d3.axisRight(): ডান (right) 수직 অক্ষ

২. Tick Marks কনফিগার করা

Tick Marks অক্ষের উপর ছোট মার্কার (চিহ্ন) হিসেবে কাজ করে, যা ডেটার মান বা বিভাগগুলোকে চিহ্নিত করে। D3.js-এ টিক মার্কস কনফিগার করতে tickValues(), tickSize(), ticks() ইত্যাদি ফাংশন ব্যবহার করা যেতে পারে।

• tickValues(): নির্দিষ্ট মানের জন্য টিক মার্ক তৈরি করতে ব্যবহৃত হয়।
• ticks(): কতগুলি টিক মার্ক চান তা সেট করতে ব্যবহৃত হয়।
• tickSize(): টিক মার্কের আকার নির্ধারণ করতে ব্যবহৃত হয়।

৩. Tick Labels কনফিগার করা

অক্ষের টিক মার্কের পাশে টিক লেবেল (যেমন সংখ্যা বা ক্যাটেগরি নাম) দেখানো হয়। D3.js এ টিক লেবেল কাস্টমাইজ করতে tickFormat() মেথড ব্যবহার করা হয়, যা টিক লেবেলের ফর্ম্যাট নির্ধারণ করে।

৪. উদাহরণ: অনুভূমিক অক্ষের জন্য Tick Marks এবং Labels

এখানে একটি উদাহরণ দেওয়া হলো যেখানে অনুভূমিক অক্ষের জন্য টিক মার্ক এবং লেবেল কনফিগার করা হয়েছে।

কোড:

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

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

// স্কেল তৈরি
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data)])  // ডেটার সর্বোচ্চ মানের মধ্যে স্কেল
  .range([0, 480]);            // SVG এর প্রস্থে স্কেল

// অনুভূমিক অক্ষ তৈরি
const xAxis = d3.axisBottom(xScale)
  .ticks(5)                      // ৫টি টিক মার্ক
  .tickSize(10)                  // টিক মার্কের আকার
  .tickFormat(d3.format(".1f"));  // টিক লেবেল ফরম্যাট, এক দশমিক স্থান পর্যন্ত

// অক্ষ SVG-তে যোগ করা
svg.append("g")
  .attr("transform", "translate(20,150)")  // অক্ষের অবস্থান নির্ধারণ
  .call(xAxis);

ব্যাখ্যা:

• xScale একটি স্কেল ফাংশন, যা ডেটার মানকে SVG ক্যানভাসে উপযুক্ত স্থানান্তরিত করে।
• d3.axisBottom(xScale) দিয়ে অনুভূমিক অক্ষ তৈরি করা হয় এবং ticks(5) ফাংশন দিয়ে ৫টি টিক মার্ক নির্ধারণ করা হয়েছে।
• tickSize(10) দিয়ে টিক মার্কের আকার নির্ধারণ করা হয়েছে।
• tickFormat(d3.format(".1f")) দিয়ে টিক লেবেলটি একটি দশমিকের সাথে প্রদর্শিত হবে (যেমন 10.0, 20.0, ইত্যাদি)।

৫. উদাহরণ: 수직 অক্ষের জন্য Tick Marks এবং Labels

এখানে একটি উদাহরণ দেওয়া হলো যেখানে 수직 অক্ষের জন্য টিক মার্ক এবং লেবেল কনফিগার করা হয়েছে।

কোড:

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

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

// স্কেল তৈরি
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([280, 0]);  // 수직 অক্ষের জন্য স্কেল

// 수직 অক্ষ তৈরি
const yAxis = d3.axisLeft(yScale)
  .ticks(5)                     // ৫টি টিক মার্ক
  .tickSize(8)                   // টিক মার্কের আকার
  .tickFormat(d3.format("d"));    // টিক লেবেল ফরম্যাট (পুরো সংখ্যা)

// অক্ষ SVG-তে যোগ করা
svg.append("g")
  .attr("transform", "translate(30,0)")  // অক্ষের অবস্থান নির্ধারণ
  .call(yAxis);

ব্যাখ্যা:

• yScale একটি স্কেল ফাংশন, যা ডেটার মানকে 수직 অক্ষের মধ্যে স্থানান্তরিত করে।
• d3.axisLeft(yScale) দিয়ে 수직 অক্ষ তৈরি করা হয় এবং ticks(5) ফাংশন দিয়ে ৫টি টিক মার্ক নির্ধারণ করা হয়েছে।
• tickSize(8) দিয়ে টিক মার্কের আকার নির্ধারণ করা হয়েছে এবং tickFormat(d3.format("d")) দিয়ে টিক লেবেলকে একটি পূর্ণসংখ্যায় ফরম্যাট করা হয়েছে।

৬. Tick Marks এবং Labels কাস্টমাইজেশন

D3.js-এ আপনি টিক মার্ক এবং লেবেল কাস্টমাইজ করতে বিভিন্ন বিকল্প ব্যবহার করতে পারেন, যেমন:

• tickValues([val1, val2, ...]): নির্দিষ্ট মানের জন্য টিক মার্কগুলি নির্ধারণ।
• tickPadding(padding): টিক মার্ক এবং লেবেলের মধ্যে ব্যবধান নির্ধারণ।
• tickFormat(formatFunction): টিক লেবেলের জন্য কাস্টম ফর্ম্যাটিং ফাংশন।

উদাহরণ:

// Tick values কাস্টমাইজ করা
const customAxis = d3.axisBottom(xScale)
  .tickValues([10, 20, 30, 40])
  .tickPadding(10)
  .tickFormat(d3.format(".0f"));

svg.append("g")
  .attr("transform", "translate(20,150)")
  .call(customAxis);

এখানে, tickValues([10, 20, 30, 40]) দিয়ে নির্দিষ্ট মানের টিক মার্ক গুলি প্রদর্শিত হবে, এবং tickPadding(10) দিয়ে টিক মার্ক এবং লেবেলের মধ্যে ১০ পিক্সেল ব্যবধান রাখা হয়েছে।

উপসংহার

D3.js-এ অক্ষ তৈরি এবং Tick Marks এবং Labels কনফিগার করা সহজ এবং অত্যন্ত কাস্টমাইজযোগ্য। আপনি d3.axis() মেথডের সাহায্যে অক্ষ তৈরি করতে পারেন, এবং tickSize(), tickValues(), tickPadding(), এবং tickFormat() ফাংশনগুলির মাধ্যমে টিক মার্ক এবং টিক লেবেলগুলি কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশনগুলি ভিজ্যুয়ালাইজেশনকে আরও পরিষ্কার এবং ব্যবহারকারীর জন্য সহায়ক করে তোলে।

D3.js-এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশনে axes (অক্ষ) এবং labeling (লেবেলিং) অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে। কাস্টম অক্ষ তৈরি করা এবং উন্নত লেবেলিং কৌশলগুলি আপনাকে আরো ইন্টারঅ্যাকটিভ এবং স্পষ্ট ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক হতে পারে। এই গাইডে, আমরা কাস্টম অক্ষ তৈরি এবং উন্নত লেবেলিং কৌশলগুলির জন্য D3.js এর ব্যবহার দেখব।

১. কাস্টম অক্ষ (Custom Axes) তৈরি

D3.js-এ অক্ষ তৈরি করার জন্য d3.axis API ব্যবহার করা হয়। D3.js ডিফল্ট অক্ষ তৈরি করতে সক্ষম, কিন্তু কাস্টম অক্ষ তৈরি করার জন্য আপনাকে কিছু অতিরিক্ত কনফিগারেশন করতে হবে, যেমন স্কেল এবং কাস্টম লেবেলিং। কাস্টম অক্ষ সাধারণত x-অক্ষ এবং y-অক্ষ তে ব্যবহৃত হয়, এবং তাদের স্টাইল বা স্কেল প্রয়োজন অনুযায়ী পরিবর্তন করা যায়।

১.১ কাস্টম অক্ষ তৈরি করার জন্য প্রাথমিক প্রস্তুতি

প্রথমে, আপনাকে ডেটা সেট তৈরি করতে হবে এবং অক্ষের স্কেল ঠিক করতে হবে। স্কেল অক্ষের মধ্যে ডেটার মাপ এবং অক্ষের অবস্থান নির্ধারণ করতে সাহায্য করবে।

উদাহরণ ১: কাস্টম x-অক্ষ এবং y-অক্ষ তৈরি

// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 400);

// ডেটাসেট
const data = [30, 70, 100, 200, 250];

// x স্কেল তৈরি করা
const xScale = d3.scaleBand()
  .domain(d3.range(data.length))  // ডেটার দৈর্ঘ্য অনুযায়ী
  .range([0, 500])  // রেঞ্জ সেট করা
  .padding(0.1); // বারগুলোর মধ্যে গ্যাপ

// y স্কেল তৈরি করা
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])  // সর্বোচ্চ ডেটা মান পর্যন্ত
  .range([400, 0]); // y অক্ষের পরিসীমা

// x অক্ষ তৈরি করা
const xAxis = d3.axisBottom(xScale);

// y অক্ষ তৈরি করা
const yAxis = d3.axisLeft(yScale);

// x অক্ষের জন্য g ট্যাগ যোগ করা
svg.append("g")
  .attr("transform", "translate(0, 350)")  // x অক্ষের অবস্থান সেট করা
  .call(xAxis);

// y অক্ষের জন্য g ট্যাগ যোগ করা
svg.append("g")
  .attr("transform", "translate(50, 0)")  // y অক্ষের অবস্থান সেট করা
  .call(yAxis);

এই কোডটি একটি কাস্টম x এবং y অক্ষ তৈরি করবে, যেখানে x অক্ষটি বারগুলির জন্য এবং y অক্ষটি ডেটার মান অনুযায়ী থাকবে।

২. কাস্টম অক্ষের স্টাইলিং

D3.js-এ অক্ষের স্টাইলিং খুবই নমনীয়। আপনি অক্ষের লাইন, গ্রিডলাইন, টেক্সট, টিক মার্কস ইত্যাদি কাস্টমাইজ করতে পারেন।

উদাহরণ ২: অক্ষের টিক মার্ক এবং গ্রিডলাইন কাস্টমাইজেশন

// x অক্ষের টিক মার্ক কাস্টমাইজেশন
svg.selectAll(".tick")
  .style("stroke", "blue")
  .style("stroke-width", 2);

// y অক্ষের টিক মার্ক কাস্টমাইজেশন
svg.selectAll(".tick text")
  .style("font-size", "14px")
  .style("fill", "red");

// x অক্ষের গ্রিডলাইন কাস্টমাইজেশন
svg.append("g")
  .attr("class", "grid")
  .call(d3.axisBottom(xScale)
    .tickSize(6)
    .tickFormat("")
  )
  .style("stroke", "#ccc");

এই কোডটি অক্ষের টিক মার্কগুলোকে নীল রঙে এবং গ্রিডলাইনকে হালকা ধূসর রঙে পরিবর্তন করবে।

৩. উন্নত লেবেলিং কৌশল (Advanced Labeling Techniques)

D3.js-এ লেবেলিং করা খুবই গুরুত্বপূর্ণ, কারণ এটি আপনার ডেটার মান সহজে বোঝার সুযোগ দেয়। আপনি সাধারণ লেবেলিং ছাড়াও ডাইনামিক এবং কাস্টম লেবেলিং ব্যবহার করতে পারেন, যেমন ডেটার উপর ভিত্তি করে লেবেল প্রদর্শন, লেবেল রোটেট করা, ইত্যাদি।

৩.১ লেবেল যোগ করা

text() মেথডের মাধ্যমে লেবেল যোগ করা হয়। আপনি লেবেলকে কাস্টম পজিশনে স্থাপন করতে পারেন এবং এর উপর বিভিন্ন স্টাইল প্রয়োগ করতে পারেন।

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

// x অক্ষের জন্য লেবেল যোগ করা
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("text")
  .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)
  .attr("y", (d) => yScale(d) - 10)  // লেবেল টেক্সটের অবস্থান
  .attr("text-anchor", "middle")
  .text(d => d)
  .style("fill", "black")
  .style("font-size", "14px");

এই কোডটি বার চার্টের উপরে ডেটার মান হিসেবে লেবেল যোগ করবে এবং সেগুলিকে কাস্টম পজিশনে স্থাপন করবে।

৩.২ লেবেল রোটেট করা

লেবেলকে একে অপরের থেকে আলাদা করতে অথবা স্পষ্টভাবে প্রদর্শন করতে আপনি লেবেল রোটেট করতে পারেন। transform মেথডের মাধ্যমে রোটেট করা হয়।

উদাহরণ ৪: লেবেল রোটেট করা

// x অক্ষের লেবেল রোটেট করা
svg.selectAll("text")
  .attr("transform", "rotate(-45)")  // -45 ডিগ্রী রোটেশন
  .attr("text-anchor", "end");

এটি x অক্ষের লেবেলগুলোকে -45 ডিগ্রি রোটেট করবে, যা সাধারণত x-অক্ষের লেবেলগুলোকে ঝুঁকিপূর্ণ অবস্থায় আরও পরিষ্কার করে দেখানোর জন্য ব্যবহার করা হয়।

৩.৩ কাস্টম লেবেল স্টাইলিং

D3.js-এ আপনি লেবেলগুলির জন্য বিভিন্ন স্টাইল এবং ফন্ট সেট করতে পারেন।

উদাহরণ ৫: কাস্টম লেবেল স্টাইলিং

// y অক্ষের লেবেল স্টাইল করা
svg.selectAll(".tick text")
  .style("font-size", "16px")
  .style("fill", "green")
  .style("font-weight", "bold");

এটি y অক্ষের সমস্ত লেবেলকে গা dark ় সবুজ রঙ, বড় ফন্ট সাইজ এবং বোল্ড স্টাইল করে দিবে।

৪. ডাইনামিক লেবেলিং

D3.js-এ আপনি ডাইনামিক লেবেলিংও করতে পারেন, যেমন ডেটার ভ্যালু অনুযায়ী লেবেল তৈরি করা বা লেবেলগুলোর দৃশ্যমানতা পরিবর্তন করা।

উদাহরণ ৬: ডাইনামিক লেবেলিং

// শুধুমাত্র নির্দিষ্ট শর্তের ভিত্তিতে লেবেল যোগ করা
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("text")
  .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)
  .attr("y", (d) => yScale(d) - 10)
  .attr("text-anchor", "middle")
  .text(d => d > 150 ? d : "") // শুধুমাত্র 150 এর উপরে থাকা মানের জন্য লেবেল
  .style("fill", "black")
  .style("font-size", "14px");

এটি 150 এর বেশি মানের জন্য লেবেল প্রদর্শন করবে, এবং 150 এর কম মানের জন্য লেবেল সরিয়ে দিবে।

D3.js দিয়ে কাস্টম অক্ষ এবং উন্নত লেবেলিং টেকনিক ব্যবহারের মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশন আরো স্পষ্ট, ইন্টারঅ্যাকটিভ এবং কাস্টমাইজযোগ্য হয়ে ওঠে। আপনি কাস্টম অক্ষ তৈরি, লেবেল রোটেট, স্টাইলিং, ডাইনামিক লেবেলিং ইত্যাদি করে আপনার ভিজ্যুয়ালাইজেশনকে আরো সুন্দর এবং কার্যকর করতে পারেন। D3.js-এ এগুলি ব্যবহারের মাধ্যমে আপনি অনেক বেশি পেশাদার এবং ব্যতিক্রমী ডেটা ভিজ্যুয়ালাইজেশন তৈরি

করতে সক্ষম হবেন।