D3.js দিয়ে বার চার্ট তৈরি করা একটি সাধারণ এবং জনপ্রিয় ভিজ্যুয়ালাইজেশন পদ্ধতি। এতে ডেটার প্রতিটি মানকে একটি বার (রেকটেঙ্গেল) হিসেবে প্রদর্শন করা হয়, এবং এই বারের উচ্চতা বা দৈর্ঘ্য ডেটার মানের সাথে সম্পর্কিত থাকে। D3.js এর মাধ্যমে ডাইনামিক এবং ইন্টারঅ্যাকটিভ বার চার্ট তৈরি করা যায় যা ডেটার আপডেট হলে স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়।
বার চার্ট তৈরি করার জন্য প্রয়োজনীয় পদক্ষেপ
১. ডেটা নির্বাচন করা: প্রথমে ডেটাসেট তৈরি করতে হবে বা লোড করতে হবে। ২. SVG কন্টেইনার তৈরি করা: D3.js এর মাধ্যমে SVG এলিমেন্ট তৈরি করতে হবে যা চার্টের কন্টেইনার হিসেবে কাজ করবে। ৩. ডেটা বাইন্ডিং: ডেটার সাথে DOM উপাদানগুলো (যেমন রেকটেঙ্গেল) বাইন্ড করতে হবে। ৪. স্টাইলিং এবং ম্যানিপুলেশন: ডেটার মান অনুযায়ী বারের গঠন, রঙ, উচ্চতা ইত্যাদি নির্ধারণ করতে হবে। ৫. ট্রানজিশন এবং ইন্টারঅ্যাকশন: গ্রাফের ইন্টারঅ্যাকটিভিটি এবং ট্রানজিশন তৈরি করা যেতে পারে।
উদাহরণ: সিম্পল বার চার্ট তৈরি
এখানে একটি সিম্পল বার চার্ট তৈরি করা হলো যেখানে ডেটা একটি অ্যারে হিসেবে দেয়া হয়েছে।
১. HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Bar Chart</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: orange;
}
.axis-label {
font-size: 12px;
}
</style>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
২. JavaScript (D3.js) ফাইল (script.js):
// ডেটা সেট
const data = [80, 120, 150, 170, 220, 250, 300, 350, 400];
// চার্টের আকার
const width = 500;
const height = 400;
const margin = { top: 20, right: 20, bottom: 40, left: 40 };
// SVG কন্টেইনার তৈরি করা
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// X এবং Y স্কেল তৈরি
const xScale = d3.scaleBand()
.domain(d3.range(data.length)) // ডেটার সংখ্যা অনুযায়ী
.range([margin.left, width - margin.right])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)]) // ডেটার সর্বোচ্চ মান
.nice() // এটি Y অক্ষের মান গুলি সুন্দরভাবে এডজাস্ট করে
.range([height - margin.bottom, margin.top]);
// X অক্ষ তৈরি করা
svg.append("g")
.selectAll(".x-axis")
.data(data)
.enter()
.append("text")
.attr("class", "axis-label")
.attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)
.attr("y", height - margin.bottom + 20)
.attr("text-anchor", "middle")
.text((d, i) => `Item ${i+1}`);
// Y অক্ষ তৈরি করা
svg.append("g")
.selectAll(".y-axis")
.data(yScale.ticks(5)) // Y অক্ষের জন্য 5টি টিক মার্ক
.enter()
.append("text")
.attr("class", "axis-label")
.attr("x", margin.left - 10)
.attr("y", d => yScale(d))
.attr("dy", 5)
.attr("text-anchor", "end")
.text(d => d);
// বার (rect) তৈরি করা
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", (d, i) => xScale(i))
.attr("y", d => yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => height - margin.bottom - yScale(d));
ব্যাখ্যা:
SVG কন্টেইনার তৈরি:
const svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height);এটি HTML
bodyতে একটিsvgএলিমেন্ট তৈরি করবে যার প্রস্থ 500 পিক্সেল এবং উচ্চতা 400 পিক্সেল হবে।- X এবং Y স্কেল তৈরি:
d3.scaleBand()এবংd3.scaleLinear()মেথড ব্যবহার করে X এবং Y অক্ষের স্কেল তৈরি করা হয়েছে।xScale: X অক্ষের স্কেল, যেখানে বারের স্থান নির্ধারণ করা হয়।yScale: Y অক্ষের স্কেল, যেখানে বারগুলোর উচ্চতা নির্ধারণ করা হয়।
- X অক্ষ এবং Y অক্ষ তৈরি:
svg.append("g")এর মাধ্যমে X এবং Y অক্ষের জন্য লেবেল এবং টিক মার্ক তৈরি করা হয়েছে। - বার তৈরি:
svg.selectAll(".bar")মেথড ব্যবহার করে প্রতিটি ডেটা পয়েন্টের জন্য একটিrect(রেকটেঙ্গেল) তৈরি করা হয়েছে। প্রতিটিrectএর গঠনx,y,width, এবংheightদিয়ে নির্ধারণ করা হয়েছে। - স্টাইলিং:
.barক্লাসের মাধ্যমে বারের রঙsteelblueসেট করা হয়েছে এবং হোভার করলে সেটিorangeহয়ে যাবে।
ফলাফল
উপরের কোডটি চালানোর পর একটি সিম্পল বার চার্ট তৈরি হবে যেখানে ডেটার উপর ভিত্তি করে বারগুলো প্রদর্শিত হবে। প্রতিটি বার ডেটার মানের ভিত্তিতে উচ্চতা পরিবর্তিত হবে, এবং আপনি এতে রঙ পরিবর্তন, হোভার ইফেক্ট ইত্যাদি দেখতে পাবেন।
D3.js দিয়ে বার চার্ট তৈরি করা একটি মৌলিক এবং সহজ প্রক্রিয়া, যা ডেটা ভিজ্যুয়ালাইজেশনে ব্যাপকভাবে ব্যবহৃত হয়। D3.js এর মাধ্যমে SVG এলিমেন্ট ব্যবহার করে আপনি অত্যন্ত ডাইনামিক, ইন্টারঅ্যাকটিভ এবং কাস্টমাইজযোগ্য বার চার্ট তৈরি করতে পারেন। ডেটা বাইন্ডিং, স্কেলিং, ট্রানজিশন এবং স্টাইলিং দ্বারা আপনি একটি সুন্দর এবং কার্যকরী চার্ট তৈরি করতে সক্ষম হবেন।
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() মেথডের মাধ্যমে আপনি শক্তিশালী বার চার্ট তৈরি করতে পারবেন, যা আপনার ডেটাকে আকর্ষণীয় এবং তথ্যপূর্ণভাবে প্রদর্শন করবে।
D3.js ব্যবহার করে সহজেই বার চার্ট তৈরি করা যায়। বার চার্ট হলো একটি জনপ্রিয় ডেটা ভিজ্যুয়ালাইজেশন যেটি ডেটার পরিমাণ বা পরিসংখ্যানকে বারগুলির মাধ্যমে প্রদর্শন করে। D3.js দিয়ে এই ধরনের গ্রাফিক্স তৈরি করা খুবই সোজা, কারণ D3 এর মাধ্যমে ডেটা বাইন্ডিং এবং SVG (Scalable Vector Graphics) তৈরি করা যায়।
১. ডেটাসেট প্রস্তুত
বার চার্ট তৈরি করতে প্রথমে আমাদের ডেটা তৈরি করতে হবে। সাধারণত একটি অ্যারে বা অবজেক্ট অ্যারে ব্যবহার করা হয়, যাতে প্রতিটি মান একটি বারকে প্রতিনিধিত্ব করে।
উদাহরণ ডেটাসেট:
const data = [30, 80, 45, 60, 20, 90, 55];
এই ডেটাসেটটি সাতটি মানের একটি অ্যারে, যেগুলোর প্রত্যেকটি একটি বারকে প্রতিনিধিত্ব করবে।
২. SVG এলিমেন্ট তৈরি
D3.js এর মাধ্যমে প্রথমে একটি SVG এলিমেন্ট তৈরি করতে হবে, যেখানে আমাদের বার চার্টটি থাকবে। এটি একটি নির্দিষ্ট প্রস্থ (width) এবং উচ্চতা (height) নির্ধারণ করে।
উদাহরণ:
const svgWidth = 500;
const svgHeight = 300;
const svg = d3.select("body").append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
এটি একটি svg উপাদান তৈরি করবে যার প্রস্থ 500px এবং উচ্চতা 300px।
৩. বার চার্ট তৈরি
বার চার্ট তৈরি করতে প্রতিটি ডেটা পয়েন্টের জন্য একটি <rect> (বর্গাকার/আয়তাকার) তৈরি করতে হবে। প্রতিটি rect এর জন্য x, y, width, এবং height অ্যাট্রিবিউট নির্ধারণ করা হবে।
x: বারটির অনুভূমিক অবস্থান।y: বারটির উল্লম্ব অবস্থান।width: বারটির প্রস্থ।height: বারটির উচ্চতা।
কোড:
const barWidth = 40;
const barPadding = 5;
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * (barWidth + barPadding)) // X অবস্থান নির্ধারণ
.attr("y", d => svgHeight - d) // Y অবস্থান এবং উচ্চতা নির্ধারণ
.attr("width", barWidth) // প্রস্থ
.attr("height", d => d) // উচ্চতা
.attr("fill", "steelblue"); // রঙ
এটি বারগুলির জন্য rect উপাদান তৈরি করবে, যেখানে x দ্বারা বারের অনুভূমিক অবস্থান এবং y দ্বারা উল্লম্ব অবস্থান নির্ধারণ করা হবে। width এবং height দ্বারা বারের আকার নির্ধারণ হবে।
৪. X এবং Y অক্ষ তৈরি করা
একটি বার চার্টে X এবং Y অক্ষ থাকতে হবে যাতে ডেটার মান বোঝা যায়। D3.js এ axis মেথড ব্যবহার করে অক্ষ তৈরি করা হয়।
৪.১ Y অক্ষ (Value axis)
Y অক্ষটি বারের উচ্চতা নির্ধারণ করে, তাই এখানে স্কেল ব্যবহার করে ডেটার মানকে মানানসই উচ্চতায় রূপান্তর করা হবে।
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)]) // ডেটার সর্বোচ্চ মান
.range([0, svgHeight]); // SVG এর উচ্চতা অনুযায়ী মান
// Y অক্ষ তৈরি
const yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", "translate(40,0)") // X অক্ষের কাছে Y অক্ষের অবস্থান
.call(yAxis);
৪.২ X অক্ষ (Category axis)
X অক্ষটি প্রতিটি বারকে আলাদা করতে ব্যবহৃত হয়।
const xScale = d3.scaleBand()
.domain(d3.range(data.length)) // ডেটার সংখ্যা
.range([0, svgWidth]) // SVG এর প্রস্থ অনুযায়ী
.padding(0.1); // বারগুলোর মধ্যে গ্যাপ
// X অক্ষ তৈরি
const xAxis = d3.axisBottom(xScale).tickFormat(i => i + 1); // টিক মার্কে সংখ্যা 1 থেকে শুরু হবে
svg.append("g")
.attr("transform", "translate(0," + (svgHeight - 20) + ")") // Y অক্ষের নিচে X অক্ষ
.call(xAxis);
এটি X অক্ষ তৈরি করবে, যেখানে বারগুলির জন্য একটি নির্দিষ্ট জায়গা এবং লেবেল থাকবে।
সম্পূর্ণ কোড:
const data = [30, 80, 45, 60, 20, 90, 55];
const svgWidth = 500;
const svgHeight = 300;
const barWidth = 40;
const barPadding = 5;
const svg = d3.select("body").append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, svgHeight]);
const xScale = d3.scaleBand()
.domain(d3.range(data.length))
.range([0, svgWidth])
.padding(0.1);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => xScale(i))
.attr("y", d => svgHeight - yScale(d))
.attr("width", barWidth)
.attr("height", d => yScale(d))
.attr("fill", "steelblue");
const yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", "translate(40,0)")
.call(yAxis);
const xAxis = d3.axisBottom(xScale).tickFormat(i => i + 1);
svg.append("g")
.attr("transform", "translate(0," + (svgHeight - 20) + ")")
.call(xAxis);
এটি একটি সহজ বার চার্ট তৈরির প্রক্রিয়া যেখানে D3.js ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন করা হয়েছে। এখানে ডেটাকে বারগুলির মাধ্যমে চিত্রিত করা হয়েছে এবং X ও Y অক্ষ যোগ করে ডেটার মান সহজে বোঝানো হয়েছে। এই প্রক্রিয়া অন্য যেকোনো ধরনের ডেটা ভিজ্যুয়ালাইজেশন তৈরির জন্য ভিত্তি হিসেবে ব্যবহার করা যেতে পারে।
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 এলিমেন্টের সাথে কাজ করার মাধ্যমে অত্যন্ত ইন্টারঅ্যাকটিভ এবং কাস্টমাইজযোগ্য চার্ট তৈরি করা সম্ভব।
D3.js-এ Bar Chart তৈরি করার সময় Color Scales এবং Legends ব্যবহার করা হয় ভিজ্যুয়ালকে আরও বোধগম্য ও ইন্টারঅ্যাকটিভ করার জন্য। Color Scales ব্যবহার করে আপনি বারগুলোর বিভিন্ন মান অনুযায়ী রঙ পরিবর্তন করতে পারেন, এবং Legends যোগ করার মাধ্যমে আপনি গ্রাহকদের কাছে রঙের অর্থ ব্যাখ্যা করতে পারেন।
১. Color Scales ব্যবহার করে Bar Chart এ রঙ যোগ করা
Color Scales ব্যবহার করে আপনি ডেটার বিভিন্ন মানের উপর ভিত্তি করে বারগুলোর রঙ পরিবর্তন করতে পারেন। D3.js-এ সাধারণত d3.scaleSequential(), d3.scaleOrdinal(), d3.scaleLinear() ইত্যাদি স্কেল ব্যবহার করা হয়। এখানে আমরা d3.scaleSequential() স্কেল ব্যবহার করব একটি নির্দিষ্ট রঙের স্কেল তৈরি করতে।
১.১ Color Scale তৈরি করা
// ডেটা
const data = [10, 20, 30, 40, 50];
// Color Scale তৈরি করা (যেমন, রঙের গ্রেডিয়েন্ট)
const colorScale = d3.scaleSequential(d3.interpolateBlues)
.domain([0, d3.max(data)]); // ডেটার সর্বোচ্চ মান পর্যন্ত রঙের রেঞ্জ
// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 300);
// বার চার্ট তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", d => d * 5) // বারগুলোর উচ্চতা ডেটার মান অনুযায়ী
.attr("x", (d, i) => i * 60) // এক্স কোঅর্ডিনেট
.attr("y", d => 300 - d * 5) // Y কোঅর্ডিনেট (SVG এর নিচ থেকে উপরে)
.style("fill", d => colorScale(d)); // Color Scale এর মাধ্যমে রঙ সেট করা
এখানে, d3.interpolateBlues একটি রঙের স্কেল যা ব্লু রঙের বিভিন্ন শেড তৈরি করে। domain() ডেটার মানের রেঞ্জ অনুযায়ী রঙ সেট করে।
২. Legends (লেজেন্ড) যোগ করা
Legends ব্যবহার করা হয় ভিজ্যুয়ালাইজেশনটিতে রঙের মানে স্পষ্টতা আনার জন্য। D3.js-এ লেজেন্ড তৈরি করতে d3.legendColor() মডিউল ব্যবহার করা হয়, যা রঙের স্কেল অনুযায়ী লেজেন্ড তৈরি করে।
২.১ Legend তৈরি করা
// Color Scale তৈরি করা
const colorScale = d3.scaleSequential(d3.interpolateBlues)
.domain([0, d3.max(data)]);
// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 350);
// বার চার্ট তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", d => d * 5)
.attr("x", (d, i) => i * 60)
.attr("y", d => 300 - d * 5)
.style("fill", d => colorScale(d));
// Legend যোগ করা
const legend = d3.legendColor()
.scale(colorScale) // Color Scale এর মাধ্যমে লেজেন্ড তৈরি
.shapeWidth(30)
.orient("horizontal")
.labelFormat(d3.format(".0f"));
svg.append("g")
.attr("transform", "translate(50, 320)") // লেজেন্ডের অবস্থান নির্ধারণ
.call(legend);
এখানে, d3.legendColor() মেথড ব্যবহার করে একটি লেজেন্ড তৈরি করা হয়েছে, যা colorScale অনুযায়ী রঙের অর্থ ব্যাখ্যা করে। shapeWidth(30) দ্বারা লেজেন্ডের প্রতিটি রঙের বক্সের প্রস্থ নির্ধারণ করা হয় এবং labelFormat(d3.format(".0f")) দ্বারা রঙের পাশে ডেটার মান দেখানো হয়।
৩. রঙের গ্রেডিয়েন্ট সহ আরও উন্নত লেজেন্ড
কখনও কখনও আপনি একটি রঙের গ্রেডিয়েন্ট বা রেঞ্জ অনুযায়ী লেজেন্ড চান। এ ধরনের ক্ষেত্রে, d3.scaleLinear() ব্যবহার করে আপনি একটি রঙের গ্রেডিয়েন্ট স্কেল তৈরি করতে পারেন, এবং d3.legendColor() দিয়ে লেজেন্ডে রঙের পরিবর্তন প্রদর্শন করতে পারেন।
// ডেটা
const data = [10, 20, 30, 40, 50];
// Linear Color Scale তৈরি করা
const colorScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range(["lightblue", "darkblue"]); // রঙের গ্রেডিয়েন্ট
// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 300);
// বার চার্ট তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", d => d * 5)
.attr("x", (d, i) => i * 60)
.attr("y", d => 300 - d * 5)
.style("fill", d => colorScale(d)); // Color Scale অনুযায়ী রঙ পরিবর্তন
// Legend তৈরি
const legend = d3.legendColor()
.scale(colorScale)
.shapeWidth(30)
.orient("horizontal")
.labelFormat(d3.format(".0f"));
svg.append("g")
.attr("transform", "translate(50, 320)")
.call(legend);
এখানে, d3.scaleLinear() ব্যবহার করে একটি লিনিয়ার রঙের স্কেল তৈরি করা হয়েছে, এবং d3.legendColor() ব্যবহার করে রঙের গ্রেডিয়েন্টসহ লেজেন্ড যোগ করা হয়েছে।
D3.js-এ Bar Chart তৈরি করার সময় Color Scales এবং Legends যোগ করলে ভিজ্যুয়ালাইজেশনটি আরও তথ্যবহুল এবং সহজবোধ্য হয়ে ওঠে। Color Scales ব্যবহার করে আপনি ডেটার উপর ভিত্তি করে রঙ নির্ধারণ করতে পারেন, এবং Legends ব্যবহার করে রঙের মানে ব্যাখ্যা করতে পারেন, যা ব্যবহারকারীদের ভিজ্যুয়ালাইজেশন বুঝতে সাহায্য করে। D3.js এর বিভিন্ন স্কেল এবং লেজেন্ড ফিচারের মাধ্যমে আপনি শক্তিশালী এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়াল তৈরি করতে পারেন।
Read more
