D3.js-এ Axes মডিউল ব্যবহার করে আপনি x-অক্ষ এবং y-অক্ষ তৈরি করতে পারেন, যা ডেটা ভিজ্যুয়ালাইজেশন (যেমন বার চার্ট, লাইন চার্ট ইত্যাদি) এর জন্য অপরিহার্য। axisBottom এবং axisLeft মেথডগুলি D3.js এর অন্তর্ভুক্ত প্রধান অক্ষ তৈরির পদ্ধতি, যা আপনার ভিজ্যুয়ালাইজেশনের x এবং y অক্ষে তথ্য প্রস্থাপন করতে সহায়ক।
১. Axes মডিউলের ধারণা
D3.js-এ অক্ষ (axis) তৈরি করতে D3 এর axisBottom এবং axisLeft মেথডগুলো ব্যবহৃত হয়। এগুলি মূলত x-অক্ষ (horizontal axis) এবং y-অক্ষ (vertical axis) তৈরি করার জন্য ব্যবহৃত হয়। এই অক্ষগুলি একটি scale এর উপর ভিত্তি করে তৈরি হয় এবং তা ডেটার সঠিক মান অনুযায়ী মানচিত্রিত হয়।
২. axisBottom এবং axisLeft এর ব্যাবহার
২.১ axisBottom
axisBottom মেথডটি x-অক্ষ তৈরি করার জন্য ব্যবহৃত হয়। এটি সাধারণত একটি scale (যেমন, d3.scaleLinear() বা d3.scaleBand()) এর সাথে বাইন্ড করা হয়, যা ডেটাকে একটি নির্দিষ্ট রেঞ্জে মানচিত্রিত করে।
সিনট্যাক্স:
d3.axisBottom(scale);
২.২ axisLeft
axisLeft মেথডটি y-অক্ষ তৈরি করার জন্য ব্যবহৃত হয়। এটি সাধারণত একটি scale (যেমন, d3.scaleLinear() বা d3.scaleBand()) এর সাথে বাইন্ড করা হয়, যা ডেটাকে একটি নির্দিষ্ট রেঞ্জে মানচিত্রিত করে।
সিনট্যাক্স:
d3.axisLeft(scale);
৩. উদাহরণ: x-অক্ষ এবং y-অক্ষ তৈরি
এই উদাহরণে, আমরা একটি বেসিক বার চার্ট তৈরি করবো, যেখানে x-অক্ষ এবং y-অক্ষ তৈরি করা হবে axisBottom এবং axisLeft এর মাধ্যমে।
৩.১ কোড:
// ডেটাসেট
const data = [10, 20, 30, 40, 50];
// SVG তৈরি
const svg = d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 400);
// X এবং Y স্কেল তৈরি
const xScale = d3.scaleBand()
.domain(d3.range(data.length))
.range([0, 500])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([300, 0]);
// X অক্ষ তৈরি (axisBottom)
const xAxis = d3.axisBottom(xScale)
.tickFormat(i => "Bar " + (i + 1)); // টিক মডিফাই করা
// Y অক্ষ তৈরি (axisLeft)
const yAxis = d3.axisLeft(yScale);
// বার তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", xScale.bandwidth())
.attr("height", d => 300 - yScale(d))
.attr("x", (d, i) => xScale(i))
.attr("y", d => yScale(d))
.style("fill", "steelblue");
// X অক্ষ যোগ করা
svg.append("g")
.attr("transform", "translate(50, 300)") // X অক্ষের অবস্থান
.call(xAxis);
// Y অক্ষ যোগ করা
svg.append("g")
.attr("transform", "translate(50, 0)") // Y অক্ষের অবস্থান
.call(yAxis);
৩.২ ব্যাখ্যা:
xScale: এখানেd3.scaleBand()ব্যবহৃত হয়েছে, যা নির্দিষ্ট সংখ্যা (ডেটার ইনডেক্স) কে আক্ষরিকভাবে x-অক্ষের স্থানাঙ্কে মানচিত্রিত করে।yScale: এখানেd3.scaleLinear()ব্যবহৃত হয়েছে, যা ডেটার সঠিক মানকে y-অক্ষের উপর মানচিত্রিত করে।axisBottom(xScale): এটি x-অক্ষ তৈরি করেxScaleএর উপর ভিত্তি করে।axisLeft(yScale): এটি y-অক্ষ তৈরি করেyScaleএর উপর ভিত্তি করে।call():.call()মেথড ব্যবহার করে আমরাxAxisএবংyAxisতৈরি করে তা SVG-এ অ্যাপ্লাই করি।
৪. কাস্টমাইজেশন
D3.js এর axisBottom এবং axisLeft অক্ষের স্টাইল কাস্টমাইজ করতে অনেক ফিচার রয়েছে। যেমন টিক মার্ক, লেবেল, রঙ ইত্যাদি পরিবর্তন করা যেতে পারে।
৪.১ টিক মার্কের স্টাইল পরিবর্তন:
// X অক্ষের টিক মার্ক স্টাইল পরিবর্তন
xAxis.tickSize(10); // টিক মার্কের আকার 10px
xAxis.tickPadding(5); // টিক মার্ক এবং লেবেলের মধ্যে 5px গ্যাপ
৪.২ লেবেল পরিবর্তন:
// X অক্ষের লেবেল পরিবর্তন
xAxis.tickFormat(d3.format(".2s")); // সংখ্যা ছোট আকারে প্রদর্শন করবে
৫. axisBottom এবং axisLeft এর অন্যান্য বৈশিষ্ট্য
D3.js-এ axisBottom এবং axisLeft মেথডের মাধ্যমে আরও অনেক কাস্টমাইজেশন করা যেতে পারে, যেমন টিক মার্কের সংখ্যা নির্ধারণ, লেবেল রোটেশন, অক্ষের ধরন পরিবর্তন ইত্যাদি।
৫.১ টিক মার্ক সংখ্যা নির্ধারণ:
// X অক্ষের টিক মার্ক সংখ্যা নির্ধারণ
xAxis.ticks(5); // ৫টি টিক মার্ক
৫.২ টিক মার্কের রঙ পরিবর্তন:
svg.selectAll(".tick line")
.style("stroke", "red"); // টিক মার্কের রঙ পরিবর্তন
D3.js-এর axisBottom এবং axisLeft মেথডগুলি অত্যন্ত গুরুত্বপূর্ণ টুল, যা আপনাকে ডেটা ভিত্তিক ভিজ্যুয়ালাইজেশন তৈরির জন্য শক্তিশালী x এবং y অক্ষ তৈরি করতে সহায়ক। এই মেথডগুলি দিয়ে আপনি বিভিন্ন ধরনের স্কেল ব্যবহার করে অক্ষ তৈরি করতে পারেন এবং সেই অক্ষের টিক মার্ক, লেবেল, রঙ, আকার ইত্যাদি কাস্টমাইজ করতে পারেন।
Read more
