Bar Chart (বার চার্ট) হল একটি জনপ্রিয় ভিজ্যুয়ালাইজেশন টুল, যা সাধারণত ডেটাকে গ্রাফিক্যালভাবে উপস্থাপন করতে ব্যবহৃত হয়। D3.js ব্যবহার করে বার চার্ট তৈরি করা সহজ এবং অত্যন্ত কাস্টমাইজযোগ্য। এটি ডেটা-ড্রিভেন গ্রাফিক্স তৈরি করতে সাহায্য করে, যেখানে প্রতিটি বারের দৈর্ঘ্য ডেটার মানের সাথে সম্পর্কিত থাকে।
বার চার্টের মৌলিক উপাদানসমূহ
- X-Axis (অক্ষ): বার চার্টের অনুভূমিক অক্ষ, যা সাধারণত বারগুলোর অবস্থান নির্দেশ করে।
- Y-Axis (অক্ষ): বার চার্টের উল্লম্ব অক্ষ, যা প্রতিটি বার এর মান বা পরিমাণ প্রদর্শন করে।
- Bars (বার): প্রতিটি বার ডেটার একক বা পরিমাণ প্রতিনিধিত্ব করে।
- Labels (লেবেল): X এবং Y অক্ষের উপর লেবেল থাকে যা ডেটার পরিপ্রেক্ষিতে অর্থপূর্ণ তথ্য প্রদান করে।
D3.js দিয়ে Bar Chart তৈরি করার ধাপ
১. ডেটা প্রস্তুতি
D3.js দিয়ে বার চার্ট তৈরি করার জন্য প্রথমে একটি ডেটাসেট প্রয়োজন। ডেটাসেট সাধারণত একটি অ্যারে (array) আকারে থাকে।
২. SVG ক্যানভাস তৈরি
D3.js দিয়ে আমরা SVG ক্যানভাস তৈরি করি যেখানে বার চার্টটি আঁকা হবে।
৩. X এবং Y অক্ষ তৈরি
X এবং Y অক্ষ তৈরি করতে d3.scaleLinear() বা d3.scaleBand() স্কেল ব্যবহার করা হয়। X অক্ষ সাধারণত ক্যাটেগরিক্যাল ডেটা (যেমন: বার্ষিক বিক্রি, দেশের নাম ইত্যাদি) বা সান্নিধ্যপূর্ণ অক্ষ (যেমন: দিন, মাস ইত্যাদি) উপস্থাপন করে। Y অক্ষ সাধারণত পরিমাণ বা মানের স্কেল হিসাবে ব্যবহৃত হয়।
৪. বার তৈরি
D3.js append() এবং data() মেথডের সাহায্যে ডেটার ভিত্তিতে বার তৈরি করা হয়। প্রতিটি বার এর উচ্চতা ডেটার মান অনুযায়ী নির্ধারিত হয়।
উদাহরণ: মৌলিক Bar Chart
এখানে একটি সহজ উদাহরণ দেওয়া হল যেখানে একটি মৌলিক বার চার্ট তৈরি করা হয়েছে:
HTML + JavaScript (D3.js) কোড:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3.js Bar Chart Example</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<svg width="500" height="400"></svg>
<script>
// ডেটাসেট
const data = [30, 80, 45, 60, 20, 90, 55];
// SVG এলিমেন্ট সিলেকশন
const svg = d3.select("svg");
// X এবং Y স্কেল
const x = d3.scaleBand()
.domain(d3.range(data.length))
.range([0, 500])
.padding(0.1);
const y = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([400, 0]);
// বার তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => x(i)) // X অবস্থান
.attr("y", d => y(d)) // Y অবস্থান
.attr("width", x.bandwidth()) // বার এর প্রস্থ
.attr("height", d => 400 - y(d)) // বার এর উচ্চতা
.attr("fill", "steelblue");
// X এবং Y অক্ষ তৈরি
svg.append("g")
.attr("transform", "translate(0,400)") // X অক্ষ
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y)); // Y অক্ষ
</script>
</body>
</html>
ব্যাখ্যা:
- ডেটাসেট: এখানে একটি সাদাসিধে ডেটাসেট (সংখ্যার একটি অ্যারে) ব্যবহার করা হয়েছে, যার মধ্যে কিছু মান রয়েছে যা বারগুলোর উচ্চতা নির্ধারণ করবে।
- SVG তৈরি:
d3.select("svg")দিয়ে SVG ক্যানভাস তৈরি করা হয়েছে যার আকার 500px (প্রস্থ) এবং 400px (উচ্চতা)। - X এবং Y স্কেল:
d3.scaleBand()ব্যবহার করে X অক্ষের স্কেল সেট করা হয়েছে (যেহেতু এটি ক্যাটেগরিক্যাল ডেটা), এবংd3.scaleLinear()ব্যবহার করে Y অক্ষের স্কেল সেট করা হয়েছে (যেহেতু এটি পরিমাণভিত্তিক ডেটা)। - বার তৈরি:
selectAll("rect")ব্যবহার করে ডেটার উপর ভিত্তি করে বার তৈরি করা হয়েছে, যেখানে প্রতিটিrectএকটি বার প্রতিনিধিত্ব করে।attr()মেথডের মাধ্যমে বারগুলোর অবস্থান, প্রস্থ এবং উচ্চতা নির্ধারণ করা হয়। - অক্ষ তৈরি:
d3.axisBottom(x)এবংd3.axisLeft(y)ব্যবহার করে যথাক্রমে X এবং Y অক্ষ তৈরি করা হয়েছে।
বার চার্ট কাস্টমাইজেশন
D3.js ব্যবহার করে বার চার্টকে কাস্টমাইজ করা যায় বিভিন্ন উপায়ে, যেমন:
- বারের রঙ পরিবর্তন:
attr("fill", "color")দিয়ে প্রতিটি বার এর রঙ পরিবর্তন করা যায়। - বারে টেক্সট যোগ করা: বারগুলোর মধ্যে বা উপরে টেক্সট যোগ করতে
text()মেথড ব্যবহার করা যায়। - অক্ষের টেক্সট পরিবর্তন: X এবং Y অক্ষের লেবেল কাস্টমাইজ করা যায়
ticks()বাtickFormat()মেথডের মাধ্যমে।
উদাহরণ: বারগুলোর উপর টেক্সট যোগ করা
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d))
.attr("width", x.bandwidth())
.attr("height", d => 400 - y(d))
.attr("fill", "steelblue");
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("x", (d, i) => x(i) + x.bandwidth() / 2) // টেক্সটের X অবস্থান
.attr("y", d => y(d) - 10) // টেক্সটের Y অবস্থান
.attr("text-anchor", "middle")
.text(d => d); // ডেটার মান হিসেবে টেক্সট
D3.js দিয়ে Bar Chart তৈরি করা একটি সহজ এবং কার্যকরী পদ্ধতি ডেটা ভিজ্যুয়ালাইজেশনের জন্য। D3.js এর মাধ্যমে ডেটা বাইন্ডিং, স্কেলিং, এবং অক্ষ তৈরি করতে সক্ষম, যা অত্যন্ত কাস্টমাইজেবল এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করার সুযোগ দেয়। select(), append(), attr(), scaleBand(), এবং scaleLinear() মেথডের মাধ্যমে আপনি শক্তিশালী বার চার্ট তৈরি করতে পারবেন, যা আপনার ডেটাকে আকর্ষণীয় এবং তথ্যপূর্ণভাবে প্রদর্শন করবে।
Read more
