বাবল চার্ট এবং স্ক্যাটার প্লট হল দুইটি জনপ্রিয় ভিজ্যুয়ালাইজেশন যা ডেটার মধ্যে সম্পর্ক এবং প্রবণতা প্রদর্শন করার জন্য ব্যবহৃত হয়। D3.js ব্যবহার করে এই ধরনের চার্ট তৈরি করা সহজ এবং কার্যকরী।
- বাবল চার্ট: যেখানে এক্স, ওয়াই এবং আকার তিনটি ভেরিয়েবলকে উপস্থাপন করা হয়।
- স্ক্যাটার প্লট: যেখানে দুইটি ভেরিয়েবল (x এবং y) উপস্থাপন করা হয় এবং একটি পয়েন্ট হিসেবে প্রদর্শিত হয়।
১. বাবল চার্ট
বাবল চার্ট হল এক ধরনের ডেটা ভিজ্যুয়ালাইজেশন যেখানে প্রতিটি পয়েন্টকে একটি বৃত্ত (বাবল) হিসাবে প্রদর্শন করা হয় এবং এই বাবলের আকার নির্ধারণ করা হয় তৃতীয় ভেরিয়েবল দ্বারা। সাধারণত, এক্স-অক্ষ এবং ওয়াই-অক্ষের সাথে একটি ভেরিয়েবল আরেকটি ভেরিয়েবলের সাথে সম্পর্কিত থাকে, এবং বাবলের আকার তৃতীয় ভেরিয়েবল প্রতিনিধিত্ব করে।
উদাহরণ: বাবল চার্ট
HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubble Chart with D3.js</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>Bubble Chart with D3.js</h1>
<div id="chart"></div>
<script src="bubbleChart.js"></script>
</body>
</html>
JavaScript ফাইল (bubbleChart.js):
const data = [
{ x: 30, y: 40, size: 10 },
{ x: 70, y: 80, size: 20 },
{ x: 110, y: 90, size: 30 },
{ x: 150, y: 60, size: 40 },
{ x: 190, y: 120, size: 50 }
];
// SVG ক্যানভাস তৈরি
const width = 500, height = 300;
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
// স্কেল সেট করা
const x = d3.scaleLinear()
.domain([0, 200])
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, 150])
.range([height - margin.bottom, margin.top]);
const size = d3.scaleSqrt()
.domain([0, 50])
.range([0, 30]);
// X এবং Y অক্ষ
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
// বাবল আঁকা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", d => size(d.size))
.style("fill", "steelblue")
.style("opacity", 0.6);
ব্যাখ্যা:
- ডেটা: এখানে তিনটি ভেরিয়েবল
x,y, এবংsizeএর ডেটা দেয়া হয়েছে। - স্কেল:
xএবংyস্কেলগুলিxএবংyভেরিয়েবলকে ক্যানভাসের মধ্যে সঠিক জায়গায় অবস্থান করার জন্য ব্যবহার করা হয়েছে।sizeস্কেলটি বাবলের আকার নির্ধারণ করতে ব্যবহৃত হয়। - বাবল আঁকা:
circleএলিমেন্ট ব্যবহার করে প্রতিটি ডেটা পয়েন্টের জন্য একটি বৃত্ত আঁকা হয়েছে।rঅ্যাট্রিবিউটের মাধ্যমে বাবলের আকার নির্ধারণ করা হচ্ছে।
২. স্ক্যাটার প্লট
স্ক্যাটার প্লট দুইটি ভেরিয়েবল (এক্স এবং ওয়াই) এর মধ্যে সম্পর্ক প্রদর্শন করে, যেখানে প্রতিটি পয়েন্ট একটি ডেটা পয়েন্ট প্রতিনিধিত্ব করে। এই ভিজ্যুয়ালাইজেশনটি সাধারণত ডেটা পয়েন্টগুলির মধ্যে সম্পর্ক বিশ্লেষণের জন্য ব্যবহৃত হয়।
উদাহরণ: স্ক্যাটার প্লট
JavaScript ফাইল (scatterPlot.js):
const data = [
{ x: 30, y: 40 },
{ x: 70, y: 80 },
{ x: 110, y: 90 },
{ x: 150, y: 60 },
{ x: 190, y: 120 }
];
// SVG ক্যানভাস তৈরি
const width = 500, height = 300;
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
// স্কেল সেট করা
const x = d3.scaleLinear()
.domain([0, 200])
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, 150])
.range([height - margin.bottom, margin.top]);
// X এবং Y অক্ষ
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
// স্ক্যাটার প্লট পয়েন্ট আঁকা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", 5)
.style("fill", "steelblue")
.style("opacity", 0.6);
ব্যাখ্যা:
- ডেটা: এখানে
xএবংyদুটি ভেরিয়েবল দেয়া হয়েছে। - স্কেল:
xএবংyস্কেলগুলি ডেটা পয়েন্টগুলিকে ক্যানভাসে সঠিক অবস্থানে স্থাপন করতে ব্যবহৃত হয়। - স্ক্যাটার প্লট পয়েন্ট আঁকা: প্রতিটি ডেটা পয়েন্টের জন্য একটি
circleতৈরি করা হয়েছে, যা স্ক্যাটার প্লট পয়েন্ট হিসেবে কাজ করবে। প্রতিটি পয়েন্টের অবস্থান নির্ধারণ করা হয়েছেcxএবংcyদিয়ে।
- বাবল চার্ট: এটি তিনটি ভেরিয়েবল (এক্স, ওয়াই এবং সাইজ) দেখানোর জন্য ব্যবহৃত হয়। D3.js ব্যবহার করে প্রতিটি ডেটা পয়েন্টকে একটি সাইজ অনুযায়ী বৃত্ত (বাবল) হিসেবে দেখানো হয়।
- স্ক্যাটার প্লট: এটি দুটি ভেরিয়েবল (এক্স এবং ওয়াই) এর মধ্যে সম্পর্ক প্রদর্শন করে। এখানে প্রতিটি ডেটা পয়েন্ট একটি পয়েন্ট হিসেবে স্ক্যাটার গ্রাফে প্রদর্শিত হয়।
D3.js এই ধরনের চার্টগুলো তৈরি করতে খুবই শক্তিশালী এবং নমনীয় প্ল্যাটফর্ম, যেখানে ডেটা ভিজ্যুয়ালাইজেশন কাস্টমাইজ করতে এবং আরো ইন্টারঅ্যাকটিভ করতে নানা ধরনের মেথড ব্যবহার করা যায়।
D3.js-এ Bubble Chart তৈরি করতে, সাধারণত circle elements ব্যবহার করা হয়, যা বিভিন্ন আকার এবং অবস্থানে দেখানো হয় ডেটার মানের উপর ভিত্তি করে। Bubble Chart একটি scatter plot এর মতই কাজ করে, যেখানে প্রতিটি বুদ্বুদ (bubble) একটি ডেটা পয়েন্টের প্রতিনিধিত্ব করে। বুদ্বুদটির আকার (size) এবং অবস্থান (position) নির্ভর করে ডেটার মানের উপর। D3.js-এর circle elements দিয়ে সহজেই এই বুদ্বুদগুলি তৈরি করা যায়।
১. Bubble Chart কি?
Bubble Chart একটি ডেটা ভিজ্যুয়ালাইজেশন পদ্ধতি যেখানে, প্রতিটি ডেটা পয়েন্টকে একটি বুদ্বুদ (circle) হিসেবে উপস্থাপন করা হয়। প্রতিটি বুদ্বুদের:
- অবস্থান (Position) নির্ধারিত হয় X ও Y অক্ষের মানের দ্বারা।
- আকার (Size) নির্ধারিত হয় ডেটার কোনো মানের ভিত্তিতে।
- রঙ (Color) নির্ধারিত হতে পারে আরেকটি ডেটা পরামিতির ভিত্তিতে।
২. Circle Elements ব্যবহার করে Bubble Chart তৈরি
D3.js-এর circle element ব্যবহার করে Bubble Chart তৈরি করার জন্য কিছু মৌলিক পদক্ষেপ রয়েছে:
- ডেটা সেট তৈরি: প্রথমে ডেটা প্রস্তুত করতে হবে।
- SVG এলিমেন্ট তৈরি: ডেটা ভিজ্যুয়ালাইজেশন জন্য SVG ক্যানভাস তৈরি করতে হবে।
- Circle Elements যোগ করা: প্রতিটি ডেটা পয়েন্টের জন্য একটি circle যোগ করতে হবে।
- Scaling: X, Y অক্ষ এবং সাইজ স্কেল তৈরি করতে হবে।
- অন্যান্য কাস্টমাইজেশন: রঙ, ট্রান্সফরমেশন, টুলটিপ ইত্যাদি কাস্টমাইজেশন করতে হবে।
৩. Bubble Chart তৈরি করার জন্য কোড উদাহরণ
// ডেটা সেট
const data = [
{ x: 30, y: 30, size: 40, color: "red" },
{ x: 70, y: 70, size: 60, color: "blue" },
{ x: 110, y: 90, size: 80, color: "green" },
{ x: 150, y: 50, size: 50, color: "purple" },
{ x: 200, y: 130, size: 100, color: "orange" }
];
// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 200);
// X এবং Y স্কেল তৈরি
const xScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.x)])
.range([0, 500]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.y)])
.range([200, 0]);
// সাইজ স্কেল তৈরি
const sizeScale = d3.scaleLinear()
.domain([d3.min(data, d => d.size), d3.max(data, d => d.size)])
.range([10, 40]); // সাইজের জন্য মিনিমাম এবং ম্যাক্সিমাম ভ্যালু
// Circle elements যোগ করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => xScale(d.x)) // X কোঅর্ডিনেট
.attr("cy", d => yScale(d.y)) // Y কোঅর্ডিনেট
.attr("r", d => sizeScale(d.size)) // রেডিয়াস (বুদ্বুদ আকার)
.style("fill", d => d.color) // বুদ্বুদের রঙ
.style("opacity", 0.7); // বুদ্বুদের স্বচ্ছতা
৪. কোডের ব্যাখ্যা
- ডেটা সেট: এখানে, প্রতিটি বুদ্বুদ একটি
x,y,size, এবংcolorমানের সমন্বয়ে তৈরি হয়েছে।sizeবুদ্বুদটির আকার নির্দেশ করবে এবংcolorবুদ্বুদটির রঙ নির্ধারণ করবে। - SVG এলিমেন্ট:
svgএলিমেন্টে ডেটা ভিজ্যুয়ালাইজেশনটি যুক্ত করা হয়েছে, যেখানে বুদ্বুদগুলি প্রদর্শিত হবে। - xScale, yScale: X এবং Y অক্ষের স্কেল তৈরি করা হয়েছে, যা ডেটার মানের ভিত্তিতে বুদ্বুদগুলির অবস্থান নির্ধারণ করবে।
- sizeScale: সাইজ স্কেলটি ডেটার মান অনুযায়ী বুদ্বুদের আকার নির্ধারণ করবে।
range()মেথড ব্যবহার করে সাইজের মিনিমাম এবং ম্যাক্সিমাম মান স্থির করা হয়েছে। - circle Elements:
circleএলিমেন্টগুলিcx,cy, এবংrঅ্যাট্রিবিউট ব্যবহার করে যোগ করা হয়েছে, যা যথাক্রমে বুদ্বুদটির X, Y অবস্থান এবং রেডিয়াস নির্ধারণ করে।
৫. Bubble Chart এর জন্য রঙ এবং Tooltip যোগ করা
আমরা যদি বুদ্বুদগুলিতে রঙ এবং টুলটিপ যোগ করতে চাই, তাহলে আমরা mouseover ইভেন্ট ব্যবহার করতে পারি। এর মাধ্যমে বুদ্বুদটির উপর হোভার করলে টুলটিপ দেখানো হবে।
৫.১ রঙ এবং Tooltip সহ কোড উদাহরণ
// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 200);
// টুলটিপ তৈরি
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background", "lightgray")
.style("padding", "5px")
.style("border-radius", "3px")
.style("opacity", 0.7);
// Circle elements যোগ করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => xScale(d.x))
.attr("cy", d => yScale(d.y))
.attr("r", d => sizeScale(d.size))
.style("fill", d => d.color)
.style("opacity", 0.7)
.on("mouseover", function(event, d) {
tooltip.style("visibility", "visible")
.text(`X: ${d.x}, Y: ${d.y}, Size: ${d.size}`)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function() {
tooltip.style("visibility", "hidden");
});
এখানে, tooltip তৈরি করা হয়েছে যা মাউসওভার ইভেন্টের মাধ্যমে প্রদর্শিত হবে এবং প্রতিটি বুদ্বুদ সম্পর্কিত ডেটা দেখাবে।
D3.js ব্যবহার করে Bubble Chart তৈরি করা অত্যন্ত সহজ এবং কাস্টমাইজেবল। Circle elements ব্যবহার করে আপনি ডেটা পয়েন্টগুলির আকার, অবস্থান এবং রঙ নির্ধারণ করতে পারেন। D3.js-এ scales, transitions, এবং tooltips এর মাধ্যমে আপনি আরও উন্নত ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। Bubble Chart আপনাকে ডেটার মধ্যকার সম্পর্ক এবং পার্থক্যগুলো সহজে বুঝতে সাহায্য করবে।
D3.js একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়, এবং স্ক্যাটার প্লট (Scatter Plot) একটি সাধারণ, তবে অত্যন্ত কার্যকরী উপায়, যা দুটি পরিমাপ (যেমন, X এবং Y অক্ষ) এর মধ্যে সম্পর্ক প্রদর্শন করে। স্ক্যাটার প্লট ডেটার পয়েন্টগুলোকে একটি গ্রিডে চিত্রিত করে, যেখানে প্রতিটি পয়েন্ট দুটি ভিন্ন ডেটা মানের প্রতিনিধিত্ব করে।
এই গাইডে আমরা দেখব কিভাবে D3.js ব্যবহার করে স্ক্যাটার প্লট তৈরি এবং কাস্টম স্টাইলিং করা যায়।
স্ক্যাটার প্লট তৈরি করা
স্ক্যাটার প্লট তৈরি করতে D3.js এর circle এলিমেন্ট ব্যবহার করা হয়। প্রতিটি circle এলিমেন্ট একটি ডেটা পয়েন্টের প্রতিনিধিত্ব করে, যেখানে cx (X অক্ষ) এবং cy (Y অক্ষ) বৈশিষ্ট্য দ্বারা পয়েন্টটির অবস্থান নির্ধারণ করা হয়।
উদাহরণ: স্ক্যাটার প্লট তৈরি
// ডেটাসেট
const data = [
{ x: 30, y: 30 },
{ x: 70, y: 70 },
{ x: 110, y: 50 },
{ x: 150, y: 100 },
{ x: 200, y: 150 },
{ x: 250, y: 200 },
{ x: 300, y: 250 },
{ x: 350, y: 300 },
{ x: 400, y: 350 }
];
// SVG ক্যানভাস তৈরি
const svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 400);
// স্ক্যাটার প্লট তৈরি
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x) // X অক্ষের মান
.attr("cy", d => d.y) // Y অক্ষের মান
.attr("r", 5) // ব্যাসার্ধ (circle size)
.style("fill", "steelblue"); // রঙ
এই কোডটি একটি সাধারণ স্ক্যাটার প্লট তৈরি করবে যেখানে প্রতিটি ডেটা পয়েন্ট একটি circle দ্বারা উপস্থাপিত হয় এবং X, Y মান অনুযায়ী সেগুলির অবস্থান নির্ধারণ করা হয়।
Styling এবং কাস্টমাইজেশন
D3.js দিয়ে স্ক্যাটার প্লটের পয়েন্টগুলির স্টাইলিং করতে অনেক উপায় আছে। আপনি পয়েন্টগুলির রঙ, আকার, আচ্ছাদন ইত্যাদি কাস্টমাইজ করতে পারেন।
১. পয়েন্টের রঙ পরিবর্তন করা
স্ক্যাটার প্লটে প্রতিটি পয়েন্টের রঙ পরিবর্তন করতে আপনি একটি রঙ স্কেল ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি ডেটার মানের উপর ভিত্তি করে রঙ পরিবর্তন করতে পারেন।
উদাহরণ: রঙ স্কেল ব্যবহার
// ডেটার মানের উপর ভিত্তি করে রঙ স্কেল তৈরি
const colorScale = d3.scaleSequential(d3.interpolateCool)
.domain([0, d3.max(data, d => d.y)]); // Y অক্ষের সর্বোচ্চ মান
// স্ক্যাটার প্লট তৈরি এবং রঙ প্রয়োগ
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 7)
.style("fill", d => colorScale(d.y)); // Y মানের উপর ভিত্তি করে রঙ নির্ধারণ
এখানে d3.scaleSequential() এবং d3.interpolateCool() ব্যবহার করা হয়েছে যা ডেটার Y মানের উপর ভিত্তি করে গ্র্যাডিয়েন্ট রঙ তৈরি করে।
২. পয়েন্টের আকার পরিবর্তন
স্ক্যাটার প্লটের পয়েন্টগুলির আকার নির্ধারণ করতে r অ্যাট্রিবিউট ব্যবহার করা হয়। আপনি প্রতিটি পয়েন্টের আকার নির্ধারণ করার জন্য ডেটার মানের উপর ভিত্তি করে একটি স্কেল ব্যবহার করতে পারেন।
উদাহরণ: আকার স্কেল ব্যবহার
// আকার স্কেল তৈরি (Y মানের উপর ভিত্তি করে)
const sizeScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.y)])
.range([5, 15]); // ছোট থেকে বড় আকার
// স্ক্যাটার প্লট তৈরি এবং আকার প্রয়োগ
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => sizeScale(d.y)) // Y মানের উপর ভিত্তি করে আকার
.style("fill", "steelblue");
এখানে sizeScale ব্যবহার করে Y মানের উপর ভিত্তি করে পয়েন্টের আকার পরিবর্তন করা হয়েছে।
৩. মাউস ইভেন্ট এবং ইন্টারঅ্যাকশন
D3.js ব্যবহার করে স্ক্যাটার প্লটের পয়েন্টগুলোর সাথে মাউস ইভেন্ট (যেমন mouseover, mouseout) যোগ করতে পারেন, যাতে ব্যবহারকারী ইন্টারঅ্যাকশন করতে পারে।
উদাহরণ: মাউস হোভার এফেক্ট
// স্ক্যাটার প্লট তৈরি এবং মাউস হোভার ইফেক্ট যোগ করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 7)
.style("fill", "steelblue")
.on("mouseover", function(event, d) {
d3.select(this).style("fill", "orange"); // মাউস হোভার হলে রঙ পরিবর্তন
})
.on("mouseout", function(event, d) {
d3.select(this).style("fill", "steelblue"); // মাউস আউট হলে পূর্ববর্তী রঙে ফিরে আসা
});
এখানে, মাউস হোভার করলে পয়েন্টের রঙ পরিবর্তন হবে এবং মাউস আউট করলে রঙ ফিরে আসবে।
একাধিক ডেটা সিরিজের স্ক্যাটার প্লট
যদি আপনার একাধিক ডেটা সিরিজ থাকে, তবে আপনি স্ক্যাটার প্লটের প্রতিটি সিরিজের জন্য আলাদা রঙ এবং আকার ব্যবহার করতে পারেন।
উদাহরণ: একাধিক ডেটা সিরিজ
// একাধিক ডেটা সিরিজ
const data1 = [
{ x: 30, y: 30 },
{ x: 70, y: 70 },
{ x: 110, y: 50 }
];
const data2 = [
{ x: 150, y: 100 },
{ x: 200, y: 150 },
{ x: 250, y: 200 }
];
// SVG ক্যানভাস তৈরি
const svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 400);
// প্রথম সিরিজের জন্য স্ক্যাটার প্লট
svg.selectAll("circle.data1")
.data(data1)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 7)
.style("fill", "steelblue");
// দ্বিতীয় সিরিজের জন্য স্ক্যাটার প্লট
svg.selectAll("circle.data2")
.data(data2)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 7)
.style("fill", "orange");
এখানে, দুটি আলাদা ডেটা সিরিজের জন্য আলাদা রঙ ব্যবহার করা হয়েছে।
D3.js এর সাহায্যে স্ক্যাটার প্লট তৈরি করা খুবই সহজ এবং আপনি বিভিন্ন উপায়ে এটি কাস্টমাইজ করতে পারেন। রঙ স্কেল এবং আকার স্কেল ব্যবহার করে ডেটার মান অনুযায়ী স্ক্যাটার প্লটের পয়েন্টগুলির রঙ এবং আকার পরিবর্তন করা যায়। D3.js মাউস ইভেন্ট এবং ইন্টারঅ্যাকশন সাপোর্ট করায়, আপনি স্ক্যাটার প্লটের উপর ইন্টারঅ্যাকশন যোগ করতে পারেন, যা ভিজ্যুয়ালাইজেশনকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করে তোলে।
D3.js এর মাধ্যমে axes (অক্ষ) এবং data points (ডেটা পয়েন্টস) এ ইন্টারঅ্যাকশন যোগ করা খুবই সহজ এবং কার্যকরী। এটি ব্যবহারকারীর জন্য ভিজ্যুয়ালাইজেশনকে আরও গতিশীল এবং তথ্যপূর্ণ করে তোলে। এই ইন্টারঅ্যাকশনগুলি, যেমন মাউস হোভার, ক্লিক, অথবা ড্র্যাগ ব্যবহার করে ডেটার বিশদ তথ্য প্রদর্শন এবং অ্যানিমেশন তৈরি করা যেতে পারে।
এই গাইডে, আমরা দেখবো কিভাবে D3.js ব্যবহার করে অক্ষ এবং ডেটা পয়েন্টের জন্য বিভিন্ন ইন্টারঅ্যাকশন যোগ করা যায়।
১. Axes (অক্ষ) তৈরি করা
D3.js এ অক্ষ (axis) তৈরি করতে d3.axisBottom(), d3.axisLeft(), d3.axisTop(), এবং d3.axisRight() মেথড ব্যবহার করা হয়। সাধারণত x-axis এবং y-axis তৈরি করতে হয় যা ডেটার স্কেল অনুযায়ী মান দেখায়।
উদাহরণ: X এবং Y অক্ষ তৈরি করা
// X এবং Y স্কেল তৈরি করা
const x = d3.scaleTime().domain(d3.extent(data, d => d.date)).range([0, width]);
const y = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([height, 0]);
// X অক্ষ তৈরি করা
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Y অক্ষ তৈরি করা
svg.append("g")
.call(d3.axisLeft(y));
এখানে, x এবং y স্কেল অনুযায়ী X এবং Y অক্ষ তৈরি করা হয়েছে।
২. Data Points (ডেটা পয়েন্টস) তৈরি করা
ডেটা পয়েন্টগুলি সাধারণত circle এলিমেন্ট হিসেবে তৈরি করা হয়, যেখানে প্রতিটি ডেটা পয়েন্টকে একটি নির্দিষ্ট স্থান ও মান প্রদর্শন করতে হবে। আমরা এই ডেটা পয়েন্টগুলিতে ইন্টারঅ্যাকশন যোগ করতে পারি, যেমন মাউস হোভার বা ক্লিক।
উদাহরণ: ডেটা পয়েন্ট তৈরি করা এবং মাউস হোভার ইন্টারঅ্যাকশন যোগ করা
// ডেটা পয়েন্ট তৈরি করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.attr("r", 5)
.style("fill", "steelblue")
.style("stroke", "white")
.style("stroke-width", 1.5)
.on("mouseover", function(event, d) {
d3.select(this).transition().duration(200).attr("r", 10); // আকার বাড়ানো
tooltip.transition().duration(200).style("opacity", 1); // টুলটিপ দেখানো
tooltip.html("Date: " + d.date.toLocaleDateString() + "<br>Value: " + d.value)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function() {
d3.select(this).transition().duration(200).attr("r", 5); // আকার ছোট করা
tooltip.transition().duration(500).style("opacity", 0); // টুলটিপ লুকানো
});
এখানে:
mouseover: মাউস হোভার করলে ডেটা পয়েন্টের আকার বড় হবে এবং টুলটিপে তারিখ ও মান দেখাবে।mouseout: মাউস বের হলে ডেটা পয়েন্টের আকার আগের মতো হবে এবং টুলটিপ অদৃশ্য হয়ে যাবে।
৩. Tooltip তৈরি করা
টুলটিপ হলো একটি ছোট পপ-আপ উইন্ডো, যা ব্যবহারকারী মাউস হোভার করলে ডেটার বিস্তারিত তথ্য দেখায়।
// টুলটিপ তৈরি করা
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("opacity", 0)
.style("background-color", "rgba(0, 0, 0, 0.7)")
.style("color", "#fff")
.style("padding", "5px")
.style("border-radius", "4px")
.style("pointer-events", "none");
এখানে, টুলটিপটি শুরুতে গোপন থাকে এবং mouseover ইভেন্টে প্রদর্শিত হয়।
৪. Click Interaction (ক্লিক ইন্টারঅ্যাকশন)
ডেটা পয়েন্টে ক্লিক করলে বিভিন্ন ধরনের ইন্টারঅ্যাকশন করা যেতে পারে, যেমন, কোনো ডেটা পয়েন্টে ক্লিক করলে তার মান সম্পর্কে বিস্তারিত তথ্য দেখানো বা কোনো পরিবর্তন করা।
উদাহরণ: ডেটা পয়েন্টে ক্লিক করে মান দেখানো
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.attr("r", 5)
.style("fill", "steelblue")
.style("stroke", "white")
.style("stroke-width", 1.5)
.on("click", function(event, d) {
alert("You clicked on: " + d.date.toLocaleDateString() + " with value: " + d.value);
});
এখানে, মাউস ক্লিক করলে একটি এলার্ট মেসেজ দেখানো হবে, যেখানে ক্লিক করা ডেটা পয়েন্টের তারিখ ও মান থাকবে।
৫. Zoom Interaction (জুম ইন্টারঅ্যাকশন)
ডেটার স্কেল এবং অক্ষের ভিউ পরিবর্তন করতে zoom ফিচার ব্যবহার করা যায়। এটি ব্যবহারকারীকে চার্টে জুম ইন বা জুম আউট করার সুযোগ দেয়।
উদাহরণ: জুম ইন্টারঅ্যাকশন যোগ করা
const zoom = d3.zoom()
.scaleExtent([1, 10]) // জুম স্কেল সীমা
.on("zoom", function(event) {
svg.attr("transform", event.transform); // জুম ইন/আউট প্রয়োগ করা
});
svg.call(zoom);
এখানে, zoom ফিচার যোগ করা হয়েছে, যা পুরো চার্টকে জুম ইন বা জুম আউট করতে সাহায্য করবে।
৬. Drag Interaction (ড্র্যাগ ইন্টারঅ্যাকশন)
ডেটা পয়েন্টগুলোকে ড্র্যাগ করার মাধ্যমে তাদের স্থান পরিবর্তন করা সম্ভব। এটি বিশেষ করে এমন ভিজ্যুয়ালাইজেশনের জন্য উপকারী যেখানে ডেটার অবস্থান পরিবর্তন করতে হবে।
উদাহরণ: ড্র্যাগ ইন্টারঅ্যাকশন যোগ করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.attr("r", 5)
.style("fill", "steelblue")
.style("stroke", "white")
.style("stroke-width", 1.5)
.call(d3.drag()
.on("drag", function(event, d) {
d3.select(this)
.attr("cx", event.x)
.attr("cy", event.y);
}));
এখানে, ব্যবহারকারী ডেটা পয়েন্টকে ড্র্যাগ করে তার অবস্থান পরিবর্তন করতে পারবেন।
৭. Multiple Interactions একসাথে ব্যবহার করা
D3.js এ আপনি একাধিক ইন্টারঅ্যাকশন একসাথে ব্যবহার করতে পারেন, যেমন মাউস হোভার, ক্লিক, ড্র্যাগ, জুম ইত্যাদি, যা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে।
উদাহরণ: বিভিন্ন ইন্টারঅ্যাকশন একসাথে ব্যবহার করা
এখানে, মাউস হোভার, ক্লিক, এবং ড্র্যাগ ইন্টারঅ্যাকশন একসাথে ব্যবহৃত হয়েছে।
D3.js এর মাধ্যমে axes এবং data points এর জন্য বিভিন্ন ধরনের ইন্টারঅ্যাকশন যোগ করা সম্ভব। এটি ব্যবহারকারীকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে। আপনি মাউস হোভার, ক্লিক, ড্র্যাগ, জুম ইত্যাদি ইন্টারঅ্যাকশন যোগ করে ডেটা পয়েন্ট এবং অক্ষগুলোর সাথে আরও কার্যকরীভাবে কাজ করতে পারেন, যা আপনার ভিজ্যুয়ালাইজেশনকে আরও গতিশীল ও ইনফর্মেটিভ করে তোলে।
Scatter Plot একটি জনপ্রিয় ডেটা ভিজ্যুয়ালাইজেশন যা দুটি চলমান ভেরিয়েবলের মধ্যে সম্পর্ক বা ট্রেন্ড প্রদর্শন করতে ব্যবহৃত হয়। D3.js-এ আপনি বিভিন্ন অগ্রগতি সাধিত স্ক্যাটার প্লট তৈরি করতে পারেন, যেখানে আপনি color mapping এবং size encoding এর মতো উন্নত কৌশল ব্যবহার করে ডেটা আরও বিস্তারিতভাবে উপস্থাপন করতে পারেন।
এই ধরনের ভিজ্যুয়ালাইজেশনে color এবং size ব্যবহার করে অতিরিক্ত মাত্রা যোগ করা যায়, যা ডেটার গভীরতর বিশ্লেষণ করতে সাহায্য করে।
Color Mapping in Scatter Plot
Color mapping বা রঙের মানচিত্র ব্যবহার করে আপনি একটি নির্দিষ্ট ভেরিয়েবলের মানের উপর ভিত্তি করে ডেটা পয়েন্টগুলির রঙ পরিবর্তন করতে পারেন। এটি ডেটার মধ্যে সম্পর্ক, শ্রেণীভেদ বা অতিরিক্ত বৈশিষ্ট্য তুলে ধরতে সাহায্য করে।
উদাহরণ: Color Mapping
// ডেটা সেট
const data = [
{ x: 30, y: 30, category: 'A', value: 10 },
{ x: 50, y: 70, category: 'B', value: 20 },
{ x: 70, y: 40, category: 'A', value: 30 },
{ x: 90, y: 90, category: 'B', value: 40 },
{ x: 110, y: 60, category: 'A', value: 50 }
];
// SVG তৈরি করা
const width = 500, height = 400;
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Color scale তৈরি করা
const colorScale = d3.scaleOrdinal()
.domain(['A', 'B'])
.range(['#1f77b4', '#ff7f0e']);
// স্ক্যাটার প্লট তৈরি করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 10)
.attr("fill", d => colorScale(d.category)); // color mapping based on category
এখানে:
colorScaleএকটিd3.scaleOrdinal()সিএলএল তৈরি করেছে যা শ্রেণী অনুযায়ী রঙ নির্ধারণ করে (যেমন,AবাB)।- প্রতিটি ডেটা পয়েন্টের রঙ তার
categoryঅনুযায়ী নির্ধারণ করা হয়েছে।
Size Encoding in Scatter Plot
Size encoding স্ক্যাটার প্লটে ডেটা পয়েন্টের আকার পরিবর্তন করে ভেরিয়েবলের মান উপস্থাপন করতে ব্যবহৃত হয়। এটি ডেটা পয়েন্টের মধ্যে পার্থক্য বা গুরুত্ব নির্দেশ করতে সাহায্য করে।
উদাহরণ: Size Encoding
// ডেটা সেট
const data = [
{ x: 30, y: 30, value: 10 },
{ x: 50, y: 70, value: 20 },
{ x: 70, y: 40, value: 30 },
{ x: 90, y: 90, value: 40 },
{ x: 110, y: 60, value: 50 }
];
// SVG তৈরি করা
const width = 500, height = 400;
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Size scale তৈরি করা
const sizeScale = d3.scaleSqrt()
.domain([10, 50]) // Value range
.range([5, 20]); // Circle size range
// স্ক্যাটার প্লট তৈরি করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => sizeScale(d.value)); // size encoding based on value
এখানে:
sizeScaleএকটিd3.scaleSqrt()তৈরি করা হয়েছে যা ডেটার মান অনুযায়ী স্কেলিং করে রেডিয়াস নির্ধারণ করে।sizeScale(d.value)ব্যবহার করে, প্রতিটি ডেটা পয়েন্টের আকার তারvalueঅনুসারে নির্ধারণ করা হয়েছে।
Color এবং Size একসাথে ব্যবহার করা
ডেটার বিভিন্ন মাত্রা উপস্থাপন করতে আপনি color mapping এবং size encoding একসাথে ব্যবহার করতে পারেন। এর মাধ্যমে ডেটার আরও সূক্ষ্ম বিশ্লেষণ সম্ভব হয় এবং ব্যবহারকারীরা সহজেই পয়েন্টগুলির মধ্যে সম্পর্ক এবং বৈশিষ্ট্য বুঝতে পারে।
উদাহরণ: Color এবং Size একসাথে ব্যবহার করা
// ডেটা সেট
const data = [
{ x: 30, y: 30, category: 'A', value: 10 },
{ x: 50, y: 70, category: 'B', value: 20 },
{ x: 70, y: 40, category: 'A', value: 30 },
{ x: 90, y: 90, category: 'B', value: 40 },
{ x: 110, y: 60, category: 'A', value: 50 }
];
// SVG তৈরি করা
const width = 500, height = 400;
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Color scale তৈরি করা
const colorScale = d3.scaleOrdinal()
.domain(['A', 'B'])
.range(['#1f77b4', '#ff7f0e']);
// Size scale তৈরি করা
const sizeScale = d3.scaleSqrt()
.domain([10, 50]) // Value range
.range([5, 20]); // Circle size range
// স্ক্যাটার প্লট তৈরি করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => sizeScale(d.value)) // Size encoding based on value
.attr("fill", d => colorScale(d.category)); // Color mapping based on category
এখানে:
- Color এবং Size একসাথে ব্যবহার করা হয়েছে যাতে প্রতিটি ডেটা পয়েন্টের
categoryরঙ দ্বারা এবংvalueআকার দ্বারা উপস্থাপিত হয়।
Interactivity with Color and Size
D3.js-এর মাধ্যমে আপনি color এবং size ব্যবহার করে আরও ইন্টারঅ্যাকটিভ স্ক্যাটার প্লট তৈরি করতে পারেন, যেমন মাউসওভার বা ক্লিক করলে রঙ বা আকার পরিবর্তন হতে পারে।
উদাহরণ: Interactivity with Hover (Mouseover)
// SVG তৈরি করা
const width = 500, height = 400;
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// স্ক্যাটার প্লট তৈরি করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", d => sizeScale(d.value))
.attr("fill", d => colorScale(d.category))
.on("mouseover", function(event, d) {
d3.select(this).transition()
.duration(300)
.attr("r", sizeScale(d.value) + 5) // Increase size on hover
.attr("fill", "yellow"); // Change color on hover
})
.on("mouseout", function(event, d) {
d3.select(this).transition()
.duration(300)
.attr("r", sizeScale(d.value)) // Reset size
.attr("fill", colorScale(d.category)); // Reset color
});
এখানে:
- mouseover ইভেন্টে ডেটা পয়েন্টের আকার এবং রঙ পরিবর্তন করা হচ্ছে।
- mouseout ইভেন্টে পয়েন্টটি তার মূল আকার এবং রঙে ফিরে আসছে।
D3.js-এর মাধ্যমে scatter plot তৈরি করতে color mapping এবং size encoding ব্যবহার করে ডেটাকে আরও গভীরভাবে বিশ্লেষণ এবং উপস্থাপন করা যায়। এই কৌশলগুলি আপনাকে একটি ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং তথ্যবহুল করতে সহায়ক, যা ব্যবহারকারীদের জন্য ডেটাকে আরও সহজে বোঝা সম্ভব করে তোলে।
Read more
