অক্ষের সাথে Tick Marks এবং Labels কনফিগার করা

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() ফাংশনগুলির মাধ্যমে টিক মার্ক এবং টিক লেবেলগুলি কাস্টমাইজ করতে পারেন। এই কাস্টমাইজেশনগুলি ভিজ্যুয়ালাইজেশনকে আরও পরিষ্কার এবং ব্যবহারকারীর জন্য সহায়ক করে তোলে।