Linear Scale, Ordinal Scale, Time Scale

D3.js-এ স্কেল (Scale) হলো এমন একটি ফাংশন যা ডেটাকে একটি ভিন্ন রেঞ্জ বা ডোমেনে ম্যাপ করে। এটি ডেটাকে একটি নির্দিষ্ট পরিসরে রূপান্তরিত করে, যেমন পিক্সেল পরিসরে রূপান্তর করা বা সময়ের পরিসরে রূপান্তর করা। D3.js বিভিন্ন ধরনের স্কেল প্রদান করে, যার মধ্যে Linear Scale, Ordinal Scale, এবং Time Scale অন্যতম। এই স্কেলগুলো ব্যবহার করে ডেটাকে সহজেই ভিজ্যুয়ালাইজেশন ও চিত্রাঙ্কনে রূপান্তর করা যায়।

১. Linear Scale

Linear Scale একটি পরিসর থেকে অন্য একটি পরিসরে ডেটা রূপান্তরিত করতে ব্যবহৃত হয়। এটি সাধারণত সংখ্যা এবং পরিমাপের জন্য ব্যবহৃত হয়, যেখানে ইনপুট ডেটা এবং আউটপুট ডেটার মধ্যে একটি সরল সম্পর্ক থাকে। উদাহরণস্বরূপ, 0 থেকে 100 পর্যন্ত একটি স্কেলকে 0 থেকে 500 পিক্সেলের মধ্যে রূপান্তর করা।

সিনট্যাক্স:

d3.scaleLinear()
  .domain([minValue, maxValue])  // ইনপুট পরিসর
  .range([minPixel, maxPixel]);  // আউটপুট পরিসর

উদাহরণ:

// Linear scale তৈরি
const xScale = d3.scaleLinear()
  .domain([0, 100])  // ইনপুট পরিসর
  .range([0, 500]);   // আউটপুট পরিসর

// ব্যবহার
console.log(xScale(50));  // 250 (50 এর জন্য আউটপুট)

এটি 0 থেকে 100 পর্যন্ত একটি ইনপুট পরিসরকে 0 থেকে 500 পিক্সেল পরিসরে রূপান্তরিত করবে। তাই 50 ইনপুট দিলে আউটপুট হবে 250।

২. Ordinal Scale

Ordinal Scale একটি ডেটাসেটের মধ্যে ভিন্ন ভিন্ন ক্যাটাগরি (যেমন, কালার, শ্রেণী, বা অন্যান্য ডিসক্রিট মান) রূপান্তর করার জন্য ব্যবহৃত হয়। এটি সাধারণত শ্রেণীবদ্ধ ডেটার জন্য ব্যবহৃত হয়, যেখানে ডেটার মধ্যে একটি নির্দিষ্ট অর্ডার থাকে কিন্তু পরিমাণগত সম্পর্ক থাকে না।

সিনট্যাক্স:

d3.scaleOrdinal()
  .domain([category1, category2, category3])  // ইনপুট ক্যাটাগরি
  .range([value1, value2, value3]);           // আউটপুট মান

উদাহরণ:

// Ordinal scale তৈরি
const colorScale = d3.scaleOrdinal()
  .domain(["Low", "Medium", "High"])  // ক্যাটাগরি ইনপুট
  .range(["green", "yellow", "red"]);  // আউটপুট মান

// ব্যবহার
console.log(colorScale("Medium"));  // yellow

এটি Low, Medium, এবং High ক্যাটাগরির জন্য যথাক্রমে green, yellow, এবং red রঙ রূপান্তর করবে।

৩. Time Scale

Time Scale বিশেষভাবে সময়ের ডেটা পরিচালনার জন্য ব্যবহৃত হয়। এটি সময়ের পরিসরকে (যেমন, তারিখ বা সময়) গতি বা দৈর্ঘ্য পরিসরে রূপান্তর করতে সহায়ক। D3.js-এ Time Scale-এর জন্য d3.scaleTime() ব্যবহৃত হয়, যা ডেটাকে একটি টাইম পরিসরে রূপান্তরিত করতে সাহায্য করে।

সিনট্যাক্স:

d3.scaleTime()
  .domain([startDate, endDate])  // ইনপুট সময় পরিসর
  .range([minPixel, maxPixel]);  // আউটপুট পিক্সেল পরিসর

উদাহরণ:

// Time scale তৈরি
const timeScale = d3.scaleTime()
  .domain([new Date(2020, 0, 1), new Date(2021, 0, 1)])  // ইনপুট সময় পরিসর
  .range([0, 500]);  // আউটপুট পরিসর

// ব্যবহার
console.log(timeScale(new Date(2020, 6, 1)));  // 250

এটি 2020-01-01 থেকে 2021-01-01 পর্যন্ত সময় পরিসরকে 0 থেকে 500 পিক্সেল পরিসরে রূপান্তরিত করবে এবং 2020-07-01-এর জন্য আউটপুট পিক্সেল হবে 250।

D3.js-এ স্কেল ব্যবহার: একটি উদাহরণ

একটি সাধারণ চার্ট তৈরিতে তিনটি স্কেল (Linear, Ordinal, Time) ব্যবহার করা যেতে পারে। যেমন:

const data = [
  { date: new Date(2020, 0, 1), value: 10 },
  { date: new Date(2020, 1, 1), value: 20 },
  { date: new Date(2020, 2, 1), value: 30 },
  { date: new Date(2020, 3, 1), value: 40 }
];

// Time scale (for x-axis)
const xScale = d3.scaleTime()
  .domain([new Date(2020, 0, 1), new Date(2020, 3, 1)])
  .range([0, 400]);

// Linear scale (for y-axis)
const yScale = d3.scaleLinear()
  .domain([0, 50])
  .range([400, 0]);

// Ordinal scale (for color)
const colorScale = d3.scaleOrdinal()
  .domain([10, 20, 30, 40])
  .range(["green", "blue", "yellow", "red"]);

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

// ডেটা ডোমে বাইন্ডিং
svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => xScale(d.date))
  .attr("cy", d => yScale(d.value))
  .attr("r", 5)
  .attr("fill", d => colorScale(d.value));

এখানে:

• Time scale x অক্ষের জন্য ব্যবহৃত হয়েছে।
• Linear scale y অক্ষের জন্য ব্যবহৃত হয়েছে।
• Ordinal scale ডেটার মানের ভিত্তিতে বর্ণের জন্য ব্যবহৃত হয়েছে।

D3.js-এ Linear Scale, Ordinal Scale, এবং Time Scale হল ডেটাকে একটি পরিসর থেকে অন্য একটি পরিসরে রূপান্তরিত করার শক্তিশালী টুলসেট। এগুলি ব্যবহৃত হয় যখন ডেটাকে ভিজ্যুয়ালাইজেশনে উপস্থাপন করতে হয়, যেমন চার্ট বা গ্রাফের অক্ষ তৈরিতে। এই স্কেলগুলো ডেটা ও ভিজ্যুয়ালাইজেশনকে সমন্বিত করে যাতে ব্যবহারকারীরা সহজেই ডেটা বিশ্লেষণ করতে পারে।