D3.js এর মাধ্যমে Vertical এবং Horizontal বার চার্ট তৈরি করা খুবই সহজ। D3.js-এ বিভিন্ন ডেটা ভিজ্যুয়ালাইজেশন তৈরির জন্য বিশেষভাবে rect (রেকটাঙ্গুলার এলিমেন্ট) ব্যবহার করা হয়। আমরা এখানে দুই ধরনের বার চার্ট (Vertical এবং Horizontal) তৈরি করার উদাহরণ দেখব।
১. Vertical Bar Chart
একটি Vertical Bar Chart তৈরি করার জন্য, আমরা প্রতিটি rect এলিমেন্টের x এবং y অবস্থান নির্ধারণ করি এবং তাদের উচ্চতা (height) এবং প্রস্থ (width) সেট করি। সাধারণত, vertical bar chart-এ বারের উচ্চতা ডেটার মানের সঙ্গে সম্পর্কিত এবং x-axis তে বিভিন্ন ক্যাটেগরি থাকে।
উদাহরণ: Vertical Bar Chart তৈরি
HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Bar Chart with D3.js</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>Vertical Bar Chart with D3.js</h1>
<div id="chart"></div>
<script src="verticalBarChart.js"></script>
</body>
</html>
JavaScript ফাইল (verticalBarChart.js):
// ডেটাসেট
const data = [30, 80, 45, 60, 120];
// SVG ক্যানভাস তৈরি
const svgWidth = 500;
const svgHeight = 300;
const barWidth = svgWidth / data.length;
// SVG এলিমেন্ট তৈরি
const svg = d3.select("#chart")
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
// বার চার্ট তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * barWidth) // x পজিশন
.attr("y", d => svgHeight - d) // y পজিশন (উচ্চতা)
.attr("width", barWidth - 5) // বারের প্রস্থ
.attr("height", d => d) // বার উচ্চতা
.style("fill", "steelblue");
ব্যাখ্যা:
data: একটি ডেটাসেট যা প্রতি বারকে উপস্থাপন করবে।svgWidthএবংsvgHeight: SVG ক্যানভাসের প্রস্থ এবং উচ্চতা নির্ধারণ করা হয়েছে।barWidth: বারগুলোর প্রস্থ, যা ডেটার সংখ্যা অনুযায়ী স্বয়ংক্রিয়ভাবে গণনা হয়।rectএলিমেন্ট:dataএর প্রতিটি মানের জন্য একটি বার তৈরি করা হয়েছে।
২. Horizontal Bar Chart
একটি Horizontal Bar Chart তৈরি করার জন্য, আমরা rect এলিমেন্টের x এবং y অবস্থান নির্ধারণ করবো এবং বারের প্রস্থ (width) এবং উচ্চতা (height) পরিবর্তন করবো। Horizontal Bar Chart-এ সাধারণত ডেটার মানের সাথে সম্পর্কিত বারের প্রস্থ থাকে এবং y-axis তে বিভিন্ন ক্যাটেগরি থাকে।
উদাহরণ: Horizontal Bar Chart তৈরি
JavaScript ফাইল (horizontalBarChart.js):
// ডেটাসেট
const data = [30, 80, 45, 60, 120];
// SVG ক্যানভাস তৈরি
const svgWidth = 500;
const svgHeight = 300;
const barHeight = 40;
// SVG এলিমেন্ট তৈরি
const svg = d3.select("#chart")
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
// বার চার্ট তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", 0) // x পজিশন (শুরু)
.attr("y", (d, i) => i * (barHeight + 5)) // y পজিশন (ডেটার ইনডেক্স)
.attr("width", d => d) // বার প্রস্থ
.attr("height", barHeight) // বার উচ্চতা
.style("fill", "steelblue");
ব্যাখ্যা:
data: একটি ডেটাসেট যা প্রতি বারকে উপস্থাপন করবে।svgWidthএবংsvgHeight: SVG ক্যানভাসের প্রস্থ এবং উচ্চতা নির্ধারণ করা হয়েছে।barHeight: বারের উচ্চতা যা এখানে নির্ধারিত হয়েছে।rectএলিমেন্ট:dataএর প্রতিটি মানের জন্য একটি বার তৈরি করা হয়েছে, যেখানে বারের প্রস্থ (width) ডেটার মান অনুযায়ী পরিবর্তিত হয়।
৩. Vertical এবং Horizontal Bar Chart এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Vertical Bar Chart | Horizontal Bar Chart |
|---|---|---|
| অক্ষ | x-axis এ ক্যাটেগরি, y-axis এ ডেটা | y-axis এ ক্যাটেগরি, x-axis এ ডেটা |
| বারের প্রস্থ | y-axis এ ডেটার মান অনুযায়ী উচ্চতা | x-axis এ ডেটার মান অনুযায়ী প্রস্থ |
| বিন্যাস | বারের উচ্চতা ডেটার মান অনুযায়ী | বারের প্রস্থ ডেটার মান অনুযায়ী |
৪. বার চার্টে টেক্সট লেবেল যোগ করা
D3.js-এ বার চার্টের ওপর টেক্সট লেবেল যোগ করা সহজ। text() মেথড ব্যবহার করে প্রতিটি বার বা ক্যাটেগরির পাশে টেক্সট যোগ করা যায়।
উদাহরণ: Vertical Bar Chart-এ লেবেল যোগ করা
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * barWidth)
.attr("y", d => svgHeight - d)
.attr("width", barWidth - 5)
.attr("height", d => d)
.style("fill", "steelblue");
// টেক্সট লেবেল যোগ করা
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("x", (d, i) => i * barWidth + (barWidth / 2))
.attr("y", d => svgHeight - d - 10)
.attr("text-anchor", "middle")
.text(d => d);
এটি প্রতিটি বারটির উপর ডেটার মান দেখানোর জন্য একটি টেক্সট লেবেল যোগ করবে।
D3.js ব্যবহার করে Vertical এবং Horizontal Bar Chart তৈরি করা খুবই সহজ এবং স্বচ্ছ। Vertical Bar Chart-এ সাধারণত x-axis তে ক্যাটেগরি এবং y-axis তে ডেটার মান থাকে, যখন Horizontal Bar Chart-এ y-axis তে ক্যাটেগরি এবং x-axis তে ডেটার মান থাকে। D3.js-এ SVG এলিমেন্টের সাথে কাজ করার মাধ্যমে অত্যন্ত ইন্টারঅ্যাকটিভ এবং কাস্টমাইজযোগ্য চার্ট তৈরি করা সম্ভব।
Read more
