Brushing এবং Linking হল ডেটা ভিজ্যুয়ালাইজেশনে ব্যবহৃত ইন্টারঅ্যাকশন টেকনিক যা ব্যবহারকারীকে ভিজ্যুয়ালাইজেশনে বিভিন্ন অংশ নির্বাচন এবং একে অপরের সাথে সম্পর্কিত করার সুযোগ দেয়। এই দুটি টেকনিক সাধারণত বিশাল ডেটাসেটের মধ্যে প্রয়োজনীয় তথ্য সহজে বের করতে এবং বিভিন্ন ভিউপোর্ট বা চার্টে ডেটার সম্পর্ক দৃশ্যমান করতে ব্যবহৃত হয়।
Brushing
Brushing একটি ইন্টারঅ্যাকটিভ টেকনিক যা ব্যবহারকারীদের একটি নির্দিষ্ট অঞ্চলে ডেটা নির্বাচন করার সুযোগ দেয়। এটি সাধারণত x-axis বা y-axis বা উভয় ক্ষেত্রেই একটি রেঞ্জ নির্বাচন করার জন্য ব্যবহৃত হয়। নির্বাচিত অঞ্চলটি তখন অন্য ভিজ্যুয়াল উপাদানগুলোর সাথে linking বা সম্পর্ক স্থাপন করতে ব্যবহৃত হয়।
Linking
Linking হল এমন একটি প্রক্রিয়া যেখানে একটি ভিজ্যুয়াল উপাদানে ডেটার নির্বাচন অন্য একটি ভিজ্যুয়াল উপাদানেও প্রতিফলিত হয়। এটি একাধিক ভিজ্যুয়ালাইজেশন একে অপরের সাথে সংযুক্ত করার মাধ্যমে ডেটার সম্পর্ক বুঝতে সাহায্য করে।
Brushing এবং Linking এর প্রয়োগ
এখানে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে দুটি ভিন্ন চার্টে Brushing এবং Linking প্রয়োগ করা হয়েছে। প্রথমে একটি স্ক্যাটার প্লট তৈরি করা হবে, এরপর একটি স্লাইডার ব্যবহার করে নির্বাচিত একটি অঞ্চল ভিজ্যুয়ালাইজ করা হবে।
১. স্ক্যাটার প্লট তৈরি
ধরি, একটি স্ক্যাটার প্লট তৈরি করবো যেখানে ডেটার কিছু পয়েন্ট থাকবে। ডেটা দুটি ভেরিয়েবল (x এবং y) নিয়ে তৈরি হবে।
const data = [
{x: 30, y: 30}, {x: 50, y: 70}, {x: 70, y: 90}, {x: 90, y: 110},
{x: 100, y: 120}, {x: 120, y: 140}, {x: 150, y: 180}, {x: 180, y: 200},
{x: 200, y: 250}, {x: 220, y: 270}
];
const width = 500;
const height = 400;
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// X এবং Y স্কেল তৈরি করা
const x = d3.scaleLinear().domain([0, d3.max(data, d => d.x)]).range([0, width]);
const y = d3.scaleLinear().domain([0, d3.max(data, d => d.y)]).range([height, 0]);
// স্ক্যাটার প্লট আঁকা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", 5)
.attr("fill", "steelblue");
এখন, আমরা এই স্ক্যাটার প্লটে brushing প্রয়োগ করবো, যাতে ব্যবহারকারী একটি রেঞ্জ নির্বাচন করতে পারে।
২. Brushing প্রযুক্তি যোগ করা
Brushing প্রয়োগ করার জন্য D3.js এর d3.brush() মেথড ব্যবহার করা হয়। এটি ব্যবহারকারীকে একটি নির্দিষ্ট অঞ্চল নির্বাচন করতে সহায়তা করে।
// ব্রাশ আর্চিটেকচার তৈরি
const brush = d3.brush()
.extent([[0, 0], [width, height]]) // ব্রাশের আকার
.on("end", brushed); // ব্রাশ শেষ হলে callback ফাংশন
// ব্রাশ ক্যানভাসে যোগ করা
svg.append("g")
.attr("class", "brush")
.call(brush);
// ব্রাশিং ইভেন্ট হ্যান্ডলার
function brushed(event) {
const selection = event.selection;
// যদি ব্রাশ নির্বাচন থাকে
if (selection) {
const [[x0, y0], [x1, y1]] = selection;
// নির্বাচিত অঞ্চলগুলোকে রঙিন করা
svg.selectAll("circle")
.attr("fill", d => {
// চেক করা যে ডেটা নির্বাচিত অঞ্চলের মধ্যে আছে কি না
return x(d.x) >= x0 && x(d.x) <= x1 && y(d.y) >= y0 && y(d.y) <= y1 ? "orange" : "steelblue";
});
}
}
এখানে, ব্রাশিং করার পর, নির্বাচিত অঞ্চলটির মধ্যে থাকা সব ডেটা পয়েন্টগুলির রঙ পরিবর্তন করা হবে। ব্রাশিংয়ের পর আপনি দেখতে পাবেন যে নির্বাচিত এলাকা Orange রঙে হাইলাইট হয়েছে।
৩. Linking প্রযুক্তি যোগ করা
এবার আমরা linking প্রয়োগ করবো, যেখানে ব্রাশিং করার পর নির্বাচিত ডেটার সাথে সম্পর্কিত অন্যান্য চার্ট বা ভিউপোর্টের ডেটা হাইলাইট হবে।
এটি করার জন্য আমরা দুটি ভিন্ন চার্ট তৈরি করতে পারি (যেমন, একটি স্ক্যাটার প্লট এবং একটি বারের গ্রাফ), যেখানে একটি চার্টে ব্রাশিং করা হলে অন্য চার্টে ডেটা আপডেট হবে।
// নতুন বারের গ্রাফ (Linking)
const barWidth = 20;
const barHeight = 300;
const barSvg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", barHeight);
const xBar = d3.scaleBand().domain(data.map(d => d.x)).range([0, 500]).padding(0.1);
const yBar = d3.scaleLinear().domain([0, d3.max(data, d => d.y)]).range([barHeight, 0]);
barSvg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => xBar(d.x))
.attr("y", d => yBar(d.y))
.attr("width", xBar.bandwidth())
.attr("height", d => barHeight - yBar(d.y))
.attr("fill", "steelblue");
// Linking Event: ব্রাশ করার পর বারের গ্রাফ আপডেট করা
function brushed(event) {
const selection = event.selection;
if (selection) {
const [[x0, y0], [x1, y1]] = selection;
// স্ক্যাটার প্লটে নির্বাচিত ডেটা পয়েন্টের সাথে সম্পর্কিত বারের রঙ আপডেট করা
svg.selectAll("circle")
.attr("fill", d => {
return x(d.x) >= x0 && x(d.x) <= x1 && y(d.y) >= y0 && y(d.y) <= y1 ? "orange" : "steelblue";
});
barSvg.selectAll("rect")
.attr("fill", d => {
return x(d.x) >= x0 && x(d.x) <= x1 && y(d.y) >= y0 && y(d.y) <= y1 ? "orange" : "steelblue";
});
}
}
এখানে, ব্রাশিং করার সময়, স্ক্যাটার প্লট এবং বারের গ্রাফে একসাথে ডেটার নির্বাচিত অঞ্চলটি হাইলাইট হবে।
Brushing এবং Linking হলো অত্যন্ত শক্তিশালী ইন্টারঅ্যাকশন টেকনিক যা ব্যবহারকারীদের একাধিক ভিজ্যুয়ালাইজেশন বা ডেটার মধ্যে সম্পর্ক বুঝতে সাহায্য করে। D3.js এই ধরনের ইন্টারঅ্যাকশন সহজে তৈরি করতে সাহায্য করে, যেখানে brushing ব্যবহারকারীদের ডেটা সিলেক্ট করতে দেয় এবং linking ব্যবহার করে একাধিক চার্ট বা ভিউপোর্টের মধ্যে সম্পর্ক স্থাপন করে। এই টেকনিকগুলি বিশাল ডেটাসেটের বিশ্লেষণ এবং ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশনের ক্ষেত্রে বিশেষভাবে উপকারী।
Read more
