Custom Axes এবং Advanced Labeling Techniques

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

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