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
