Scale Functions ব্যবহার করা (domain(), range())

D3.js-এ Scale Functions ডেটাকে পরিসরের (range) মধ্যে মানচিত্রিত করতে ব্যবহৃত হয়। এগুলি মূলত ডেটার একটি ডোমেইন (domain) থেকে একটি রেঞ্জ (range)-এ মান পরিবর্তন করতে সাহায্য করে। D3.js এ Scale Functions ব্যবহার করে, আপনি ডেটাকে বিভিন্ন আউটপুট পরিসরে রূপান্তরিত করতে পারেন, যেমন সাইজ, রঙ, অবস্থান, অথবা অন্যান্য গ্রাফিকাল বৈশিষ্ট্য। Scale Functions ডেটা ভিজ্যুয়ালাইজেশনের জন্য গুরুত্বপূর্ণ একটি টুল।

Scale Functions এর মৌলিক ধারণা

• Domain: এটি হল ডেটার মূল পরিসীমা (যেমন, ডেটার ছোট থেকে বড় মান)।
• Range: এটি হল আউটপুট পরিসীমা (যেমন, গ্রাফিক্যাল রেজলিউশন, সাইজ, বা রঙের মান)।

domain() মেথডের মাধ্যমে আপনি ডেটার পরিসীমা নির্ধারণ করেন, এবং range() মেথডের মাধ্যমে আপনি আউটপুট পরিসীমা নির্ধারণ করেন।

Scale Functions এর প্রধান ধরণ:

D3.js-এ Scale Functions বিভিন্ন ধরনের হতে পারে। কিছু জনপ্রিয় ধরনের Scale Functions হল:

• Linear Scale: লিনিয়ার রূপান্তরের জন্য ব্যবহৃত।
• Ordinal Scale: ক্যাটাগোরিক্যাল ডেটার জন্য ব্যবহৃত।
• Time Scale: টাইম/তারিখের জন্য ব্যবহৃত।
• Log Scale: লগারিদমিক রূপান্তরের জন্য ব্যবহৃত।

এখানে, আমরা linear Scale ব্যবহার করে ডোমেইন ও রেঞ্জ সেট করার উদাহরণ দেখব।

Linear Scale Example

কীভাবে কাজ করে?

1. domain(): ডেটার আসল পরিসীমা (ডোমেইন) নির্ধারণ করে।
2. range(): আউটপুট পরিসীমা (রেঞ্জ) নির্ধারণ করে।

উদাহরণ:

// ডেটার জন্য একটি লিনিয়ার স্কেল তৈরি
const scale = d3.scaleLinear()
                .domain([0, 100])       // ডোমেইন (ডেটার পরিসীমা)
                .range([0, 500]);       // রেঞ্জ (আউটপুট পরিসীমা)

// স্কেল ব্যবহার করে মান রূপান্তর
const scaledValue = scale(50);  // এখানে ৫০কে স্কেলে রূপান্তরিত করা হবে
console.log(scaledValue);  // আউটপুট: 250

এখানে:

• domain([0, 100]): ডোমেইনটি 0 থেকে 100 পর্যন্ত।
• range([0, 500]): আউটপুট রেঞ্জটি 0 থেকে 500 পর্যন্ত।
• scale(50) কল করার মাধ্যমে 50 সংখ্যাটিকে ডোমেইন থেকে রেঞ্জে রূপান্তরিত করা হচ্ছে, যা 250 হবে (৫০টি 0-100 পরিসীমার মধ্যে 250-এ মানচিত্রিত হবে 0-500 রেঞ্জে)।

আরও উদাহরণ: বার চার্টে Scale ব্যবহার

ডেটা ভিজ্যুয়ালাইজেশন করতে, বিশেষ করে বার চার্টে, আপনি scaleLinear() ব্যবহার করতে পারেন যাতে ডেটা সঠিকভাবে সাইজ এবং অবস্থানে রূপান্তরিত হয়।

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

// স্কেল তৈরি
const xScale = d3.scaleLinear()
                 .domain([0, d3.max(data)])  // ডেটার সর্বোচ্চ মান
                 .range([0, 500]);           // স্কেল আউটপুট পরিসীমা

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

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60)
   .attr("y", d => 200 - xScale(d)) // সাইজ স্কেল অনুযায়ী
   .attr("width", 50)
   .attr("height", d => xScale(d))
   .attr("fill", "steelblue");

এই কোডটি একটি সাধারণ বার চার্ট তৈরি করবে যেখানে প্রতিটি rect এলিমেন্টের উচ্চতা ডেটা অনুযায়ী লিনিয়ার স্কেল দ্বারা নির্ধারিত হবে।

Time Scale Example

D3.js-এ Time Scale টাইম ডেটা (যেমন তারিখ) রূপান্তরের জন্য ব্যবহার করা হয়।

// টাইম স্কেল তৈরি
const timeScale = d3.scaleTime()
                    .domain([new Date(2020, 0, 1), new Date(2024, 0, 1)])  // তারিখের ডোমেইন
                    .range([0, 500]);                                       // আউটপুট পরিসীমা

// একটি তারিখের মান স্কেলে রূপান্তর
const timeValue = timeScale(new Date(2022, 0, 1));
console.log(timeValue);  // আউটপুট: রেঞ্জের মধ্যে তারিখের স্থানান্বিত মান

এখানে:

• domain(): তারিখের ডোমেইনটি নির্ধারণ করা হয়েছে 2020-01-01 থেকে 2024-01-01 পর্যন্ত।
• range(): আউটপুট রেঞ্জটি 0 থেকে 500 পিক্সেল।

Ordinal Scale Example

Ordinal Scale ক্যাটাগোরিক্যাল ডেটা (যেমন, বিভিন্ন ক্যাটেগরি বা লেবেল) জন্য ব্যবহৃত হয়। এটি প্রতিটি ক্যাটাগোরির জন্য নির্দিষ্ট মান দেয়।

// অর্ডিনাল স্কেল তৈরি
const ordinalScale = d3.scaleOrdinal()
                       .domain(["A", "B", "C", "D"])  // ডোমেইন (ক্যাটাগরি)
                       .range(["red", "blue", "green", "yellow"]); // রেঞ্জ (রঙ)

// স্কেলে মান রূপান্তর
console.log(ordinalScale("A")); // আউটপুট: red
console.log(ordinalScale("B")); // আউটপুট: blue

এখানে:

• domain(): বিভিন্ন ক্যাটাগরি ("A", "B", "C", "D")।
• range(): প্রতিটি ক্যাটাগরির জন্য একটি নির্দিষ্ট রঙ নির্ধারণ করা হয়েছে।

D3.js-এ Scale Functions (যেমন, scaleLinear(), scaleTime(), scaleOrdinal()) ডেটা ভিজ্যুয়ালাইজেশনের জন্য অত্যন্ত গুরুত্বপূর্ণ। এগুলি ডেটাকে এক ধরনের পরিসীমা (domain) থেকে অন্য ধরনের পরিসীমা (range) তে রূপান্তর করতে সহায়ক। আপনি বার চার্ট, লাইন চার্ট, টাইমলাইনের মতো ভিজ্যুয়ালাইজেশন তৈরির সময় এই স্কেল ফাংশনগুলি ব্যবহার করতে পারবেন, যা ডেটাকে যথাযথ আউটপুট পরিসীমাতে রূপান্তরিত করবে।