Scatter Plot তৈরি এবং Styling

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 মাউস ইভেন্ট এবং ইন্টারঅ্যাকশন সাপোর্ট করায়, আপনি স্ক্যাটার প্লটের উপর ইন্টারঅ্যাকশন যোগ করতে পারেন, যা ভিজ্যুয়ালাইজেশনকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করে তোলে।