D3.js (Data-Driven Documents) ব্যবহার করে HTML-এর সাথে সরাসরি ইন্টারঅ্যাকশন করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা যায়। D3.js মূলত HTML-এর DOM (Document Object Model) উপাদানগুলোর সাথে ডেটা বাইন্ড করে এবং সেগুলোর উপর ভিত্তি করে ভিজ্যুয়াল তৈরির জন্য কাজ করে। এখানে HTML এবং D3.js এর ইন্টিগ্রেশন করার পদ্ধতি এবং উদাহরণ দেখানো হলো।
HTML এবং D3.js এর ইন্টিগ্রেশনের ধাপসমূহ
ধাপ ১: HTML ফাইল তৈরি
HTML ফাইল হল প্রজেক্টের গঠন তৈরি করার মূল মাধ্যম। এটি DOM উপাদান ধারণ করে, যেমন: div, svg, p ইত্যাদি, যেখানে D3.js কাজ করবে।
HTML উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>D3.js Integration</title>
</head>
<body>
<h1>D3.js এবং HTML ইন্টিগ্রেশন</h1>
<div id="chart"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="script.js"></script>
</body>
</html>
ধাপ ২: D3.js স্ক্রিপ্ট ফাইল তৈরি
D3.js এর মাধ্যমে HTML উপাদান নির্বাচন এবং ডেটার উপর ভিত্তি করে ভিজ্যুয়াল তৈরি করতে একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করতে হবে।
HTML এবং D3.js এর মাধ্যমে উদাহরণ
উদাহরণ ১: একটি সাধারণ প্যারাগ্রাফ যোগ করা
D3.js ব্যবহার করে একটি div বা p ট্যাগের মধ্যে ডেটা প্রদর্শন করা যায়।
script.js:
// D3.js দিয়ে ডেটা যুক্ত করা
d3.select("#chart")
.append("p")
.text("Hello, D3.js!");
ফলাফল: আপনার ব্রাউজারে "Hello, D3.js!" টেক্সট একটি প্যারাগ্রাফে প্রদর্শিত হবে।
উদাহরণ ২: ডাইনামিক তালিকা তৈরি
D3.js এর মাধ্যমে একটি ডেটাসেট থেকে ডাইনামিক তালিকা (list) তৈরি করা যায়।
script.js:
// ডেটাসেট
const data = ["Apple", "Banana", "Cherry"];
// তালিকা তৈরি
d3.select("#chart")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(d => d);
ফলাফল: আপনার ব্রাউজারে একটি আনঅর্ডার্ড লিস্ট (unordered list) তৈরি হবে:
- Apple
- Banana
- Cherry
উদাহরণ ৩: SVG এর মাধ্যমে বার চার্ট তৈরি
D3.js-এর আসল শক্তি SVG (Scalable Vector Graphics) এর মাধ্যমে কাস্টম ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়।
script.js:
// ডেটাসেট
const data = [100, 200, 150, 250, 300];
// SVG নির্বাচন এবং সেটআপ
const svg = d3.select("#chart")
.append("svg")
.attr("width", 600)
.attr("height", 400);
// বার চার্ট তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 120)
.attr("y", d => 400 - d)
.attr("width", 100)
.attr("height", d => d)
.attr("fill", "steelblue");
ফলাফল: আপনার ব্রাউজারে একটি বার চার্ট রেন্ডার হবে, যেখানে প্রতিটি বার ডেটার মান অনুযায়ী উচ্চতা পাবে।
HTML এবং D3.js ইন্টিগ্রেশনের সুবিধা
- DOM ম্যানিপুলেশন: D3.js সরাসরি DOM উপাদানের উপর কাজ করতে পারে।
- ডেটা বাইন্ডিং: D3.js ডেটাকে DOM উপাদানের সাথে সংযুক্ত করে।
- কাস্টমাইজেশন: HTML এবং D3.js ব্যবহার করে সম্পূর্ণ কাস্টমাইজড ভিজ্যুয়ালাইজেশন তৈরি করা যায়।
- ইন্টারঅ্যাকটিভ ইলিমেন্ট: D3.js এর মাধ্যমে HTML উপাদানের সাথে ইন্টারঅ্যাকশন (যেমন: হোভার, ক্লিক) যোগ করা যায়।
HTML এবং D3.js এর ইন্টিগ্রেশন আপনাকে ডেটাকে ভিজ্যুয়ালাইজ করার একটি শক্তিশালী মাধ্যম প্রদান করে। আপনি ডেটা অনুযায়ী HTML DOM উপাদান তৈরি করতে পারবেন এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করতে সক্ষম হবেন।
Read more
