ডেটা স্কেল এবং এক্সেস ফাংশন

D3.js-এ ডেটা স্কেল (Data Scales) এবং এক্সেস ফাংশন (Accessor Functions) ডেটাকে ভিজ্যুয়ালাইজেশন জন্য মানানসইভাবে রূপান্তরিত করতে ব্যবহৃত হয়। স্কেলগুলি ডেটার এক রেঞ্জকে আরেক রেঞ্জে ম্যাপ করতে সাহায্য করে, যেমন ডেটার সংখ্যাগত মানকে পিক্সেলে, রঙে, অথবা গ্রাফিক্যাল উপাদানের আকারে রূপান্তর করা। এক্সেস ফাংশনগুলি ডেটার প্রতিটি উপাদান থেকে নির্দিষ্ট মান বের করতে ব্যবহৃত হয়।

১. ডেটা স্কেল (Data Scales)

ডেটা স্কেলগুলি ডেটার মানকে নির্দিষ্ট একটি সিস্টেম বা রেঞ্জে রূপান্তরিত করার জন্য ব্যবহৃত হয়। D3.js বিভিন্ন ধরনের স্কেল প্রদান করে, যেমন:

• লিনিয়ার স্কেল (Linear Scale): নির্দিষ্ট রেঞ্জের মধ্যে ডেটার মান রূপান্তরিত করতে ব্যবহৃত হয়।
• লজারিদমিক স্কেল (Logarithmic Scale): এক্সপোনেনশিয়াল বা লজারিদমিক ডেটার জন্য ব্যবহৃত হয়।
• ওর্ডিনাল স্কেল (Ordinal Scale): ক্যাটেগরিকাল ডেটার জন্য ব্যবহৃত হয়, যেমন: রঙ, শ্রেণী, নাম ইত্যাদি।
• রেটিও স্কেল (Ratio Scale): গাণিতিক ভ্যালু ও সুনির্দিষ্ট রেঞ্জের জন্য।

১.১ লিনিয়ার স্কেল (Linear Scale)

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

উদাহরণ:

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

// 50 কে স্কেল অনুযায়ী মানে রূপান্তরিত করা
console.log(scale(50)); // আউটপুট: 250

এখানে, domain([0, 100]) ডেটার আসল রেঞ্জ এবং range([0, 500]) পিক্সেল রেঞ্জ নির্ধারণ করে।

১.২ ওর্ডিনাল স্কেল (Ordinal Scale)

ওর্ডিনাল স্কেল সাধারণত ক্যাটেগরিকাল ডেটার জন্য ব্যবহৃত হয়। এটি ডেটার মানগুলিকে নির্দিষ্ট অবস্থানে বা রেঞ্জে ম্যাপ করে, যেমন: বিভিন্ন রঙ, শ্রেণী ইত্যাদি।

উদাহরণ:

// ওর্ডিনাল স্কেল তৈরি
const colorScale = d3.scaleOrdinal()
                     .domain(["Low", "Medium", "High"])  // ডেটার ক্যাটেগরি
                     .range(["blue", "orange", "red"]); // রঙের মান

// "High" এর জন্য রঙ পাওয়া
console.log(colorScale("High")); // আউটপুট: "red"

এখানে, domain() ডেটার ক্যাটেগরি নির্ধারণ করে এবং range() স্কেল অনুযায়ী রঙ নির্ধারণ করে।

১.৩ লজারিদমিক স্কেল (Logarithmic Scale)

লজারিদমিক স্কেল একটি গাণিতিক স্কেল যা একটি লজারিদমিক রেঞ্জে ডেটার মানকে ম্যাপ করতে সাহায্য করে। এটি সাধারণত বৃহৎ ডেটা রেঞ্জ বা এক্সপোনেনশিয়াল ডেটা প্রক্রিয়া করতে ব্যবহৃত হয়।

উদাহরণ:

// লজারিদমিক স্কেল তৈরি
const logScale = d3.scaleLog()
                   .domain([1, 1000])  // লজারিদমিক ডেটার রেঞ্জ
                   .range([0, 500]);   // পিক্সেল রেঞ্জ

// স্কেল করা মান
console.log(logScale(100)); // আউটপুট: 200 (প্রাপ্ত মান স্কেল অনুযায়ী)

এটি লজারিদমিক স্কেল ব্যবহার করে ডেটাকে রূপান্তরিত করে, যেখানে ডেটার বৃদ্ধির হার এক্সপোনেনশিয়াল।

২. এক্সেস ফাংশন (Accessor Functions)

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

২.১ এক্সেস ফাংশনের সাধারণ ব্যবহার

ডেটা বাইন্ডিংয়ের সময়, d (ডেটা) প্যারামিটারটি প্রতিটি উপাদানের ডেটা উপস্থাপন করে এবং এক্সেস ফাংশন দিয়ে আমরা সঠিক ডেটা বের করে ডম উপাদানে মান প্রয়োগ করি।

উদাহরণ:

const data = [10, 20, 30, 40, 50];

d3.select("body")
  .selectAll("div")
  .data(data)
  .enter()
  .append("div")
  .style("height", d => d + "px")  // এক্সেস ফাংশন ব্যবহার করে ডেটা অ্যাক্সেস
  .style("background-color", "steelblue")
  .style("margin", "5px");

এখানে, d => d + "px" এক্সেস ফাংশন দ্বারা div ট্যাগগুলির উচ্চতা ডেটার মান অনুযায়ী নির্ধারণ করা হয়েছে।

৩. ডেটা স্কেল এবং এক্সেস ফাংশন একসাথে ব্যবহার

ডেটা স্কেল এবং এক্সেস ফাংশন একসাথে ব্যবহার করে আপনি ডেটার মানকে একটি নির্দিষ্ট রেঞ্জে রূপান্তর করতে পারেন এবং সেই মানটি ভিজ্যুয়ালাইজেশনে প্রয়োগ করতে পারেন।

উদাহরণ:

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

// লিনিয়ার স্কেল তৈরি
const scale = d3.scaleLinear()
                .domain([0, 50])     // ডেটার মূল রেঞ্জ
                .range([0, 500]);    // পিক্সেল রেঞ্জ

// SVG তৈরি এবং বার চার্ট তৈরি
const svg = d3.select("body").append("svg").attr("width", 500).attr("height", 400);

svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("width", 50)
   .attr("height", d => scale(d))   // ডেটার মান স্কেল অনুযায়ী রূপান্তরিত
   .attr("x", (d, i) => i * 60)
   .attr("y", d => 400 - scale(d))  // y কো-অর্ডিনেট নির্ধারণ
   .style("fill", "steelblue");

এখানে, ডেটার মান লিনিয়ার স্কেল ব্যবহার করে পিক্সেলে রূপান্তরিত করা হয়েছে এবং সেগুলোর উচ্চতা scale(d) দ্বারা নির্ধারণ করা হয়েছে।

D3.js-এ ডেটা স্কেল এবং এক্সেস ফাংশন ব্যবহার করে ডেটার উপর ভিত্তি করে ডাইনামিক ভিজ্যুয়াল তৈরি করা সম্ভব। স্কেলগুলি ডেটার মানকে নির্দিষ্ট রেঞ্জে রূপান্তরিত করতে ব্যবহৃত হয়, যা ভিজ্যুয়ালাইজেশনের জন্য প্রয়োজনীয় মান তৈরি করতে সহায়ক। এক্সেস ফাংশনগুলি ডেটার প্রতিটি উপাদান থেকে নির্দিষ্ট মান বের করে এবং সেটি ভিজ্যুয়ালাইজেশনে প্রয়োগ করে। D3.js-এ এই দুটি টুল একত্রিত ব্যবহার করে শক্তিশালী এবং কাস্টমাইজড ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব।

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

স্কেল কি?

স্কেল হলো একটি ফাংশন যা একটি নির্দিষ্ট রেঞ্জ (যেমন, ডেটা) থেকে আরেকটি রেঞ্জ (যেমন, ভিজ্যুয়াল স্পেস) এর মধ্যে মান রূপান্তর করে। D3.js-এ স্কেল মূলত বিভিন্ন ধরনের হয়, যেমন:

1. লিনিয়ার স্কেল (Linear Scale)
2. লজারিদমিক স্কেল (Logarithmic Scale)
3. রেটিও স্কেল (Ordinal Scale)
4. টাইম স্কেল (Time Scale)
5. পোয়ার স্কেল (Pow Scale)

এই স্কেলগুলির মাধ্যমে ডেটার সঠিক রূপান্তর এবং ভিজ্যুয়ালাইজেশন তৈরি করা হয়।

স্কেলের প্রয়োজন কেন?

স্কেল ব্যবহারের মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশন সহজ, প্রাসঙ্গিক এবং বোধগম্য হয়। নিচে কিছু কারণ উল্লেখ করা হল কেন স্কেল D3.js-এর জন্য অপরিহার্য:

1. ডেটার পরিসর সামঞ্জস্য করা
   ডেটার সঠিক পরিসরের মানকে ভিজ্যুয়াল উপাদানগুলির জন্য একটি নির্দিষ্ট পরিসরে রূপান্তর করা হয়, যেমন গ্রাফের দৈর্ঘ্য বা উচ্চতা। স্কেল সাহায্যে এটি খুবই সহজ হয়ে যায়।
2. ভিজ্যুয়াল এলিমেন্টের আকার নির্ধারণ
   স্কেল ব্যবহার করে ডেটার মান অনুযায়ী বিভিন্ন ভিজ্যুয়াল এলিমেন্টের আকার যেমন বার চার্টে বার এর উচ্চতা বা লাইন চার্টে রেখার প্রস্থ নির্ধারণ করা যায়।
3. ডেটার পরিবর্তন এবং ডায়নামিক আপডেট
   স্কেল ডেটার আপডেট বা পরিবর্তনের সাথে একযোগে ভিজ্যুয়ালাইজেশন পরিবর্তন করতে সহায়ক। ডেটার মান পরিবর্তিত হলে স্কেল দ্রুত সেই মানগুলিকে ভিজ্যুয়াল উপাদানে রূপান্তর করে।
4. সঠিক মানের উপস্থাপনা
   স্কেল ডেটার পারস্পরিক সম্পর্ক বজায় রেখে ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক। এটি ডেটার মধ্যে ছোট বা বড় পার্থক্যগুলো সঠিকভাবে উপস্থাপন করতে সাহায্য করে।

D3.js এ স্কেল ব্যবহার

D3.js-এ স্কেল ব্যবহার করতে D3 এর অন্তর্নিহিত স্কেল ফাংশন ব্যবহার করা হয়। নিচে কিছু সাধারণ স্কেলের উদাহরণ দেওয়া হলো।

১. লিনিয়ার স্কেল (Linear Scale)

লিনিয়ার স্কেল ডেটার একটি পরিসরের মানকে আরেকটি পরিসরে রূপান্তর করে। এটি সাধারণত সংখ্যাত্মক ডেটার জন্য ব্যবহৃত হয়, যেমন বার চার্টে বার এর উচ্চতা নির্ধারণ।

উদাহরণ:

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

const value = 75;
const result = linearScale(value);  // 75 এর জন্য স্কেল করা আউটপুট
console.log(result);  // আউটপুট হবে 375

এখানে, domain() মেথড ডেটার ইনপুট রেঞ্জ এবং range() মেথড আউটপুট রেঞ্জ নির্ধারণ করে। ডেটার একটি মান (যেমন 75) ইনপুট হিসেবে দেওয়া হলে, এটি range() রেঞ্জে স্কেল করা হয়।

২. টাইম স্কেল (Time Scale)

টাইম স্কেল ব্যবহার করে আপনি টাইম ডেটাকে ভিজ্যুয়াল উপাদান হিসেবে রূপান্তর করতে পারেন। এটি বিশেষ করে টাইম সিরিজ ডেটা বা সময়ের সাথে সম্পর্কিত ডেটার জন্য উপযুক্ত।

উদাহরণ:

// টাইম স্কেল তৈরি করা
const timeScale = d3.scaleTime()
                   .domain([new Date(2020, 0, 1), new Date(2020, 11, 31)])  // সময়ের পরিসর
                   .range([0, 500]);  // ভিজ্যুয়াল পরিসর

const date = new Date(2020, 5, 15);  // 15 জুন, 2020
const result = timeScale(date);  // এই তারিখের জন্য স্কেল করা আউটপুট
console.log(result);  // আউটপুট হবে স্কেল করা মান

এখানে, domain() মেথডে সময়ের পরিসর এবং range() মেথডে স্কেলিংয়ের জন্য ভিজ্যুয়াল পরিসর নির্ধারণ করা হয়।

৩. রেটিও স্কেল (Ordinal Scale)

রেটিও স্কেল ব্যবহার করা হয় যখন ডেটার মান সন্নিবেশিত বা শ্রেণিবদ্ধ (categorical) হয়। এটি সাধারণত সিএটেগরিক্যাল ডেটা (যেমন নাম, ধরন, রঙ ইত্যাদি) ভিজ্যুয়ালাইজেশনে ব্যবহৃত হয়।

উদাহরণ:

// রেটিও স্কেল তৈরি করা
const ordinalScale = d3.scaleOrdinal()
                       .domain(["A", "B", "C", "D"])   // ইনপুট ডেটা (শ্রেণীবদ্ধ মান)
                       .range(["red", "blue", "green", "yellow"]);  // আউটপুট রেঞ্জ (রঙ)

const category = "B";
const color = ordinalScale(category);  // 'B' এর জন্য স্কেল করা রঙ
console.log(color);  // আউটপুট হবে "blue"

এখানে, domain() মেথড শ্রেণিবদ্ধ মানের তালিকা এবং range() মেথড সেই শ্রেণির জন্য রঙ নির্ধারণ করছে।

D3.js-এ স্কেল এমন একটি গুরুত্বপূর্ণ টুল যা ডেটাকে ভিজ্যুয়াল উপাদানে রূপান্তর করার প্রক্রিয়া সহজ করে। এটি ডেটার সঠিক পরিসর এবং সম্পর্ক বজায় রেখে ডায়নামিক, স্কেলেবল এবং প্রতিক্রিয়া-সম্মত ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক। স্কেল ব্যবহার করে আপনি সহজে ডেটা থেকে গ্রাফিক্যাল উপাদান তৈরি করতে পারেন, এবং ডেটার আকার, স্থান এবং রঙে গুরুত্বপূর্ণ পরিবর্তন আনতে পারেন।

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 হল ডেটাকে একটি পরিসর থেকে অন্য একটি পরিসরে রূপান্তরিত করার শক্তিশালী টুলসেট। এগুলি ব্যবহৃত হয় যখন ডেটাকে ভিজ্যুয়ালাইজেশনে উপস্থাপন করতে হয়, যেমন চার্ট বা গ্রাফের অক্ষ তৈরিতে। এই স্কেলগুলো ডেটা ও ভিজ্যুয়ালাইজেশনকে সমন্বিত করে যাতে ব্যবহারকারীরা সহজেই ডেটা বিশ্লেষণ করতে পারে।

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) তে রূপান্তর করতে সহায়ক। আপনি বার চার্ট, লাইন চার্ট, টাইমলাইনের মতো ভিজ্যুয়ালাইজেশন তৈরির সময় এই স্কেল ফাংশনগুলি ব্যবহার করতে পারবেন, যা ডেটাকে যথাযথ আউটপুট পরিসীমাতে রূপান্তরিত করবে।

D3.js-এর এক্সেস ফাংশন তৈরি করার মাধ্যমে আপনি ডেটার প্রতিটি উপাদানের জন্য নির্দিষ্ট বৈশিষ্ট্য বা অ্যাট্রিবিউট (যেমন x, y, width, height) অ্যাক্সেস করতে পারেন। এই ফাংশনগুলি সাধারণত ডেটা বাইন্ডিং এবং DOM উপাদান তৈরি বা আপডেট করার সময় ব্যবহৃত হয়। সাধারণত, D3.js-এ এক্সেস ফাংশনগুলি d.x, d.y বা অন্যান্য ডেটা বৈশিষ্ট্য হিসেবে ব্যবহৃত হয়, যেখানে d প্রতিটি ডেটা আইটেমকে বোঝায়।

এক্সেস ফাংশন কি?

এক্সেস ফাংশন হলো ডেটার নির্দিষ্ট বৈশিষ্ট্য বা মানে অ্যাক্সেস করার জন্য ব্যবহৃত ফাংশন। এটি ডেটা বাইন্ডিংয়ের সময় প্রতিটি উপাদানের জন্য একটি ফাংশন রিটার্ন করে, যা DOM-এর সংশ্লিষ্ট উপাদানগুলির গুণগত বৈশিষ্ট্য বা মান নির্ধারণ করতে সাহায্য করে।

উদাহরণস্বরূপ, যদি আপনি একটি ডেটা সেট ব্যবহার করেন যার মধ্যে প্রতিটি উপাদানের x এবং y বৈশিষ্ট্য থাকে, তবে d.x এবং d.y এই মানগুলির জন্য এক্সেস ফাংশন হিসেবে ব্যবহার করা হবে।

উদাহরণ: ডেটার সাথে x এবং y এক্সেস ফাংশন

ধরা যাক, আপনি একটি ডেটা সেট ব্যবহার করছেন যা বিভিন্ন পয়েন্টের জন্য x এবং y কোঅর্ডিনেট ধারণ করে। আপনি D3.js ব্যবহার করে একটি পয়েন্ট প্লট তৈরি করতে চান, যেখানে প্রতিটি পয়েন্টের অবস্থান ডেটার x এবং y বৈশিষ্ট্য অনুযায়ী নির্ধারিত হবে।

ডেটা:

const data = [
  { x: 30, y: 40 },
  { x: 70, y: 80 },
  { x: 110, y: 120 },
  { x: 150, y: 160 }
];

D3.js কোড:

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

// ডেটার উপর ভিত্তি করে circles তৈরি
svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => d.x)  // x অবস্থান
  .attr("cy", d => d.y)  // y অবস্থান
  .attr("r", 5)          // ব্যাসার্ধ
  .style("fill", "steelblue");

এখানে:

• d.x এবং d.y ডেটার প্রতিটি আইটেমের x এবং y মান অনুযায়ী সিলেক্ট করা হচ্ছে।
• cx এবং cy অ্যাট্রিবিউটগুলির মাধ্যমে প্রতিটি circle এর অবস্থান নির্ধারণ করা হচ্ছে।

এই কোডের ফলস্বরূপ একটি SVG তৈরি হবে, যেখানে প্রতিটি পয়েন্টের জন্য একটি circle তৈরি হবে এবং তার অবস্থান হবে x এবং y মান অনুযায়ী।

আরও উদাহরণ: ডেটা বাইন্ডিং এবং এক্সেস ফাংশন

ধরা যাক, আপনি একটি বারের উচ্চতা নির্ধারণ করতে চান, যেখানে height মানটি ডেটার value অ্যাট্রিবিউটের উপর ভিত্তি করে হবে।

ডেটা:

const data = [
  { name: "A", value: 30 },
  { name: "B", value: 80 },
  { name: "C", value: 45 },
  { name: "D", value: 60 }
];

D3.js কোড:

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

// বার চার্ট তৈরি
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", 40)
  .attr("height", d => d.value)  // bar height based on value
  .attr("x", (d, i) => i * 50)   // x position based on index
  .attr("y", d => 200 - d.value) // y position (flip bar direction)
  .style("fill", "steelblue");

এখানে:

• d.value ডেটার value ফিল্ডের মান ব্যবহার করে বার চার্টের উচ্চতা নির্ধারণ করা হচ্ছে।
• height, x, এবং y অ্যাট্রিবিউটগুলির মাধ্যমে প্রতিটি rect (বর্গাকার উপাদান) এর অবস্থান এবং আকার নির্ধারণ করা হচ্ছে।

এক্সেস ফাংশন ব্যবহার করে আরও কাস্টমাইজেশন

D3.js-এ এক্সেস ফাংশন ব্যবহার করে আপনি DOM উপাদানের আকার, অবস্থান, রঙ এবং অন্যান্য স্টাইল পরিবর্তন করতে পারেন। উদাহরণস্বরূপ:

এক্সেস ফাংশন দ্বারা বার রঙ পরিবর্তন:

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("width", 40)
  .attr("height", d => d.value)
  .attr("x", (d, i) => i * 50)
  .attr("y", d => 200 - d.value)
  .style("fill", d => d.value > 50 ? "green" : "red"); // value এর ওপর ভিত্তি করে রঙ

এখানে, d.value ব্যবহার করে প্রতিটি বারটির রঙ পরিবর্তন করা হচ্ছে। যদি value ৫০-এর বেশি হয়, তবে রঙ হবে সবুজ, নাহলে রঙ হবে লাল।

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