D3.js সাধারণত স্ট্যাটিক ডেটা বা CSV, JSON, TSV ইত্যাদি ফাইল থেকে ডেটা লোড করে, কিন্তু ডাইনামিক ডেটা (যেমন WebSocket বা API থেকে) লোড করতে D3.js কে অন্য JavaScript ফিচার (যেমন fetch() API বা WebSocket API) এর সাথে ইন্টিগ্রেট করতে হয়। এই রকম ডাইনামিক ডেটা ভিজ্যুয়ালাইজেশনে real-time আপডেট দেখানোর জন্য WebSocket বা API থেকে ডেটা লোড করা অনেক কার্যকরী হতে পারে।
এখানে WebSocket এবং API থেকে ডেটা লোড করার জন্য কয়েকটি উদাহরণ দেওয়া হলো।
WebSocket দিয়ে ডেটা লোড করা
WebSocket হল একটি প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে দুই-মুখী যোগাযোগ স্থাপন করে। যখনই সার্ভার নতুন ডেটা পাঠায়, তা ক্লায়েন্টে পেয়ে যায়, যা real-time ডেটা ভিজ্যুয়ালাইজেশন বা গ্রাফ/চার্ট আপডেট করার জন্য ব্যবহৃত হয়।
WebSocket ব্যবহার করে D3.js-এর মাধ্যমে ডেটা লোড করা
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Data with D3.js</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>Real-Time Data Visualization</h1>
<svg width="500" height="500"></svg>
<script>
// WebSocket URL (এটি আপনার সার্ভারের WebSocket URL হতে হবে)
const socket = new WebSocket("ws://your-server.com/data");
// SVG কন্টেইনার তৈরি
const svg = d3.select("svg");
// ডেটার জন্য স্কেল এবং আর্কিটেকচার
const width = 500, height = 500;
const margin = { top: 20, right: 20, bottom: 40, left: 40 };
// Pie স্কেল
const pie = d3.pie().value(d => d.value);
// Arc স্কেল
const arc = d3.arc().innerRadius(0).outerRadius(200);
const radius = Math.min(width, height) / 2;
// ফাঁকা জায়গায় গ্রাফ পজিশন করা
const group = svg.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
// WebSocket এর মাধ্যমে ডেটা গ্রহণ করার সময়
socket.onmessage = function(event) {
// JSON ডেটা পার্স করা
const data = JSON.parse(event.data);
// পুরানো ডেটা সরানো
svg.selectAll("*").remove();
// Pie চার্টের সেগমেন্ট তৈরি
group.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", (d, i) => d3.schemeCategory10[i % 10]);
};
// WebSocket চালু হলে লোগ ইন
socket.onopen = function() {
console.log("WebSocket connection established.");
};
// WebSocket ত্রুটি হলে
socket.onerror = function(error) {
console.log("WebSocket error: ", error);
};
</script>
</body>
</html>
ব্যাখ্যা:
- WebSocket কনফিগারেশন:
const socket = new WebSocket("ws://your-server.com/data");এই লাইনটি WebSocket সেশন শুরু করে এবং সার্ভারের URL প্রদান করে।
- ডেটা গ্রহণ:
socket.onmessageইভেন্ট হ্যান্ডলারটি WebSocket থেকে নতুন ডেটা গ্রহণের জন্য ব্যবহৃত হয়। এই ডেটাটি JSON ফরম্যাটে আনা হয় এবংJSON.parse(event.data)দিয়ে তা পাস করা হয়।
- SVG আপডেট:
- ডেটা পরিবর্তিত হলে, পুরনো ভিজ্যুয়ালাইজেশনটি মুছে দিয়ে (
svg.selectAll("*").remove();) নতুন ডেটার জন্য Pie চার্টের সেগমেন্ট তৈরি করা হয়।
- ডেটা পরিবর্তিত হলে, পুরনো ভিজ্যুয়ালাইজেশনটি মুছে দিয়ে (
- real-time আপডেট:
- প্রতি নতুন ডেটা আসার সাথে সাথে চার্ট আপডেট হবে এবং এটি real-time ডেটা ভিজ্যুয়ালাইজেশনে ব্যবহৃত হতে পারে।
API থেকে ডেটা লোড করা
API থেকে ডেটা লোড করার জন্য সাধারণত fetch() মেথড ব্যবহার করা হয়। এটি HTTP রিকোয়েস্ট পাঠাতে সাহায্য করে এবং response হিসেবে JSON বা অন্যান্য ফরম্যাটে ডেটা ফিরিয়ে আনে।
API থেকে ডেটা লোড করে D3.js দিয়ে Visualization তৈরি
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Data with D3.js</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>API Data Visualization</h1>
<svg width="500" height="500"></svg>
<script>
// API থেকে ডেটা ফেচ করা
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => {
// ডেটা পাওয়ার পর Pie চার্ট তৈরি করা
// SVG কন্টেইনার
const svg = d3.select("svg");
const width = 500, height = 500;
const radius = Math.min(width, height) / 2;
const pie = d3.pie().value(d => d.value);
const arc = d3.arc().outerRadius(radius).innerRadius(0);
const group = svg.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
// Pie চার্টে সেগমেন্ট তৈরি
group.selectAll("path")
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", (d, i) => d3.schemeCategory10[i % 10]);
})
.catch(error => console.error("Error fetching data:", error));
</script>
</body>
</html>
ব্যাখ্যা:
- API ফেচিং:
fetch("https://api.example.com/data")লাইনটি API থেকে ডেটা নিয়ে আসে। এখানে আপনি আপনার API URL সেট করতে পারেন।
- ডেটা পার্স করা:
.then(response => response.json())অংশটি API থেকে আসা JSON ডেটা পার্স করে।
- Visualization আপডেট:
d3.pie()এবংd3.arc()ব্যবহার করে ডেটার উপর ভিত্তি করে Pie চার্ট তৈরি করা হয়।
D3.js ব্যবহার করে WebSocket এবং API থেকে ডেটা লোড করা অনেক সহজ, এবং এটি real-time ডেটা ভিজ্যুয়ালাইজেশনের জন্য খুবই কার্যকরী। WebSocket-এর মাধ্যমে আপনি সরাসরি সার্ভার থেকে ডেটা গ্রহণ করতে পারেন এবং fetch() API দিয়ে বিভিন্ন RESTful সার্ভিস থেকে ডেটা লোড করতে পারেন। ডেটা লোড হওয়ার পর, D3.js এর মাধ্যমে ডায়নামিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব।
Read more
