D3.js একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা ব্রাউজারে সরাসরি ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে। এটি HTML, SVG (Scalable Vector Graphics), এবং CSS-এর সাথে ইন্টিগ্রেশন করে ডায়নামিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়াল তৈরি করতে ব্যবহৃত হয়। এখানে একটি সহজ উদাহরণের মাধ্যমে ব্রাউজারে D3.js ব্যবহার করে ভিজ্যুয়ালাইজেশন তৈরির প্রক্রিয়া দেখানো হলো।
ধাপ ১: প্রয়োজনীয় ফাইল তৈরি
আপনার প্রজেক্টের জন্য একটি ফোল্ডার তৈরি করুন এবং নিচের ফাইলগুলো যোগ করুন:
- index.html: HTML ফাইল যেখানে D3.js লোড এবং ভিজ্যুয়ালাইজেশন দেখানো হবে।
- style.css: স্টাইলিংয়ের জন্য।
- script.js: D3.js কোড লেখার জন্য।
ধাপ ২: HTML ফাইল তৈরি
index.html
<!DOCTYPE html>
<html>
<head>
<title>D3.js Visualization</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>D3.js Bar Chart Example</h1>
<div id="chart"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="script.js"></script>
</body>
</html>
এই ফাইলটি একটি সাইট ফ্রেম তৈরি করবে এবং D3.js এর জন্য CDN লিঙ্ক সরবরাহ করবে।
ধাপ ৩: CSS ফাইল তৈরি
style.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
#chart {
display: flex;
justify-content: center;
align-items: center;
}
.bar {
fill: steelblue;
}
.bar:hover {
fill: orange;
}
CSS ফাইলটি বার চার্টের রঙ এবং হোভার স্টাইলিং যোগ করবে।
ধাপ ৪: D3.js কোড যোগ করা
script.js
// ডেটাসেট
const data = [100, 200, 150, 250, 300];
// SVG সেটআপ
const svgWidth = 600;
const svgHeight = 400;
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("class", "bar")
.attr("width", barWidth - 10)
.attr("height", d => d)
.attr("x", (d, i) => i * barWidth)
.attr("y", d => svgHeight - d);
এই কোডটি একটি SVG তৈরি করে এবং ডেটা অনুযায়ী বার চার্ট রেন্ডার করে।
ধাপ ৫: ফাইল চালানো
- আপনার প্রজেক্ট ফোল্ডার খুলুন।
- index.html ফাইলটি একটি ব্রাউজারে খুলুন।
- আপনি একটি বার চার্ট দেখতে পাবেন যেখানে প্রতিটি বারের উচ্চতা ডেটার মান অনুযায়ী সেট করা হয়েছে।
ফলাফল
ব্রাউজারে একটি বার চার্ট প্রদর্শিত হবে:
- প্রতিটি বার ডেটার মান অনুযায়ী উচ্চতা পাবে।
- হোভার করলে বারের রঙ পরিবর্তিত হবে (CSS এর মাধ্যমে)।
D3.js-এর মাধ্যমে কাস্টমাইজেশন
রঙ পরিবর্তন: বারগুলোর
fillঅ্যাট্রিবিউট পরিবর্তন করে নতুন রঙ যোগ করুন।.attr("fill", "green");অ্যানিমেশন যোগ করা: D3.js এর
transition()মেথড ব্যবহার করে বারগুলোর ওপর অ্যানিমেশন যোগ করুন।.transition() .duration(1000) .attr("height", d => d);ইন্টারঅ্যাকশন:
ইভেন্ট লিসেনার যোগ করুন, যেমন মাউস ক্লিক।.on("click", (event, d) => { alert("Value: " + d); });
D3.js এবং HTML/SVG এর মাধ্যমে ব্রাউজারে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা একটি শক্তিশালী এবং নমনীয় পদ্ধতি। এটি ডেভেলপারদের ডেটার মাধ্যমে ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড ভিজ্যুয়াল তৈরির সুযোগ দেয়। আপনি এই ধারণা ব্যবহার করে আরও জটিল ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।
