D3.js একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য SVG (Scalable Vector Graphics) এবং অন্যান্য DOM উপাদানগুলির সাথে কাজ করতে সক্ষম। SVG গ্রাফিক্স ব্যবহার করে D3.js ডাইনামিক এবং ইন্টারঅ্যাকটিভ চার্ট, গ্রাফ, ম্যাপ এবং অন্যান্য ভিজ্যুয়াল তৈরি করতে সাহায্য করে।
এখানে D3.js ব্যবহার করে SVG গ্রাফিক্স তৈরির প্রক্রিয়া এবং একটি সহজ উদাহরণ দেখানো হয়েছে।
SVG (Scalable Vector Graphics) কী?
SVG হলো একটি XML-ভিত্তিক ফরম্যাট যা ভেক্টর গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এটি ইনফিনিটি স্কেল করা যায়, অর্থাৎ যত বড় বা ছোটই হোক না কেন, গ্রাফিক্সের গুণমান পরিবর্তিত হয় না। D3.js SVG এলিমেন্টের সাথে কাজ করার জন্য একটি গুরুত্বপূর্ণ লাইব্রেরি।
D3.js এর মাধ্যমে SVG গ্রাফিক্স তৈরি
D3.js ব্যবহার করে SVG গ্রাফিক্স তৈরি করার জন্য কয়েকটি সাধারণ পদক্ষেপ অনুসরণ করতে হয়:
- SVG ক্যানভাস তৈরি:
d3.select()বাd3.append()মেথড ব্যবহার করে SVG ক্যানভাস তৈরি করা। - SVG এলিমেন্ট যোগ করা:
d3.append()মেথড ব্যবহার করে SVG উপাদান (যেমনrect,circle,line,pathইত্যাদি) যোগ করা। - স্টাইলিং এবং অ্যাট্রিবিউট প্রয়োগ:
style(),attr(), এবংclassed()মেথড ব্যবহার করে উপাদানগুলোর স্টাইল এবং অ্যাট্রিবিউট পরিবর্তন করা।
SVG গ্রাফিক্স তৈরি করার উদাহরণ
এখানে একটি সহজ উদাহরণ দেওয়া হলো, যেখানে D3.js ব্যবহার করে একটি SVG ক্যানভাস তৈরি করা হবে এবং তার মধ্যে একটি বার চার্ট প্রদর্শিত হবে।
ধাপ ১: HTML ফাইল তৈরি
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3.js SVG Example</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>SVG Bar Chart with D3.js</h1>
<div id="chart"></div>
<script src="script.js"></script>
</body>
</html>
এটি একটি HTML পৃষ্ঠা যা d3.v7.min.js লাইব্রেরি লোড করবে এবং একটি script.js ফাইল ধারণ করবে।
ধাপ ২: D3.js কোড তৈরি
script.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");
ব্যাখ্যা:
- ডেটাসেট: একটি সিম্পল সংখ্যা সেট
[30, 80, 45, 60, 120]বার চার্টের জন্য। - SVG ক্যানভাস:
d3.select()এবংappend()মেথড ব্যবহার করে SVG এলিমেন্ট তৈরি করা হয়েছে এবং সেটির প্রস্থ ও উচ্চতা নির্ধারণ করা হয়েছে। - বার তৈরি:
selectAll(),data(),enter()এবংappend()মেথড ব্যবহার করে প্রতিটি ডেটার জন্য একটিrect(রেকটাঙ্গুলার বক্স) তৈরি করা হয়েছে।
ধাপ ৩: ফলাফল
এই কোডটি ব্রাউজারে চালালে একটি SVG বার চার্ট দেখতে পাবেন যেখানে প্রতিটি বারের উচ্চতা ডেটার মান অনুযায়ী নির্ধারিত হবে এবং বারের রঙ হবে steelblue।
SVG গ্রাফিক্সে অন্যান্য উপাদান যোগ করা
D3.js দিয়ে আরও অন্যান্য SVG উপাদান যেমন circle, line, text ইত্যাদি তৈরি করা যেতে পারে।
উদাহরণ: একটি সার্কেল তৈরি করা
// সার্কেল তৈরি
svg.append("circle")
.attr("cx", 100) // x কোর
.attr("cy", 100) // y কোর
.attr("r", 50) // ব্যাসার্ধ
.style("fill", "orange");
এটি একটি সার্কেল তৈরি করবে যার কেন্দ্রে (100, 100) পজিশন থাকবে এবং রঙ হবে orange।
SVG গ্রাফিক্সে ইন্টারঅ্যাকশন যোগ করা
D3.js-এ আপনি SVG গ্রাফিক্সের উপর ইন্টারঅ্যাকশন যেমন মাউস হোভার, ক্লিক ইভেন্ট ইত্যাদি যোগ করতে পারেন।
উদাহরণ: হোভার ইফেক্ট
// বারগুলোর উপর হোভার ইফেক্ট
svg.selectAll("rect")
.on("mouseover", function(event, d) {
d3.select(this).style("fill", "orange");
})
.on("mouseout", function(event, d) {
d3.select(this).style("fill", "steelblue");
});
এটি প্রতিটি বারের উপর মাউস হোভার করলে বারের রঙ পরিবর্তন করবে।
D3.js এর মাধ্যমে SVG গ্রাফিক্স তৈরি করা একটি শক্তিশালী পদ্ধতি যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে। আপনি SVG এলিমেন্ট (যেমন rect, circle, line, text) ব্যবহার করে গ্রাফিক্স তৈরি করতে পারেন এবং CSS বা JavaScript দিয়ে তাদের উপর স্টাইলিং এবং ইন্টারঅ্যাকশন যোগ করতে পারেন। D3.js আপনাকে DOM-এ ডেটা বাইন্ডিং এবং পরিবর্তন করতে সাহায্য করে, যা একটি ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়াল তৈরি করতে সহায়ক।
Read more
