Data Points এবং Tooltips যোগ করা

D3.js ব্যবহার করে ডেটা পয়েন্ট (data points) এবং টুলটিপস (tooltips) যোগ করা একটি গুরুত্বপূর্ণ অংশ ডেটা ভিজ্যুয়ালাইজেশনের ক্ষেত্রে। ডেটা পয়েন্ট আমাদের ডেটার প্রতিটি উপাদানকে প্রদর্শন করতে সাহায্য করে এবং টুলটিপস ডেটা পয়েন্টের সঙ্গে ইন্টারঅ্যাকশন করে অতিরিক্ত তথ্য প্রদর্শন করতে সহায়ক।

ডেটা পয়েন্ট (Data Points) তৈরি করা

D3.js-এ ডেটা পয়েন্ট তৈরি করার জন্য সাধারণত enter() মেথড ব্যবহার করা হয়, যা ডেটাসেটের প্রতিটি উপাদানের জন্য DOM উপাদান তৈরি করতে সাহায্য করে। এটি বিশেষভাবে বিকল্প গ্রাফ বা চার্ট যেমন বার চার্ট, লাইন গ্রাফ ইত্যাদির জন্য প্রযোজ্য।

উদাহরণ: ডেটা পয়েন্ট (বার) তৈরি করা

// ডেটাসেট
const data = [100, 200, 150, 250, 300];

// SVG তৈরি
const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 400);

// X এবং Y স্কেল তৈরি
const xScale = d3.scaleBand()
                 .domain(d3.range(data.length))
                 .range([0, 400])
                 .padding(0.1);

const yScale = d3.scaleLinear()
                 .domain([0, d3.max(data)])
                 .range([300, 0]);

// বার চার্ট তৈরি (ডেটা পয়েন্ট তৈরি করা)
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 50)
   .attr("y", d => 300 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue");

এই উদাহরণে, data এর প্রতিটি মানের জন্য একটি বার তৈরি করা হয়েছে।

টুলটিপস (Tooltips) যোগ করা

টুলটিপস হল একটি ছোট পপ-আপ উইন্ডো যা ব্যবহারকারীর মাউস পয়েন্টারের কাছাকাছি প্রদর্শিত হয় এবং এটি ডেটা পয়েন্ট সম্পর্কিত অতিরিক্ত তথ্য দেখায়। D3.js-এ টুলটিপস তৈরি করতে mouseover, mousemove, এবং mouseout ইভেন্ট ব্যবহার করা হয়।

উদাহরণ: টুলটিপস তৈরি করা

// ডেটাসেট
const data = [100, 200, 150, 250, 300];

// SVG তৈরি
const svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 400);

// টুলটিপের জন্য div তৈরি করা
const tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("visibility", "hidden")
  .style("background-color", "lightgray")
  .style("border", "1px solid black")
  .style("padding", "5px")
  .style("border-radius", "4px");

// X এবং Y স্কেল তৈরি
const xScale = d3.scaleBand()
                 .domain(d3.range(data.length))
                 .range([0, 400])
                 .padding(0.1);

const yScale = d3.scaleLinear()
                 .domain([0, d3.max(data)])
                 .range([300, 0]);

// বার চার্ট তৈরি এবং টুলটিপ যোগ করা
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 50)
   .attr("y", d => 300 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue")
   .on("mouseover", function(event, d) {
       tooltip.style("visibility", "visible")
              .text("Value: " + d); // টুলটিপে মান প্রদর্শন
   })
   .on("mousemove", function(event) {
       tooltip.style("top", (event.pageY + 5) + "px")
              .style("left", (event.pageX + 5) + "px"); // টুলটিপের পজিশন
   })
   .on("mouseout", function() {
       tooltip.style("visibility", "hidden"); // টুলটিপ হাইড করা
   });

এটি কী করে:

• mouseover ইভেন্টে টুলটিপের দৃশ্যমানতা সক্রিয় হয় এবং ডেটা পয়েন্টের মান দেখানো হয়।
• mousemove ইভেন্টে টুলটিপটি মাউসের অবস্থান অনুযায়ী চলতে থাকে।
• mouseout ইভেন্টে টুলটিপটি হাইড হয়ে যায়।

টুলটিপ কাস্টমাইজেশন

D3.js-এ টুলটিপের দৃশ্য এবং আচরণ কাস্টমাইজ করা যায়। কিছু সাধারণ কাস্টমাইজেশন পয়েন্ট হল:

• স্টাইল: টুলটিপের ব্যাকগ্রাউন্ড, বর্ডার, প্যাডিং ইত্যাদি পরিবর্তন করা।
• টেক্সট কন্টেন্ট: ডেটা পয়েন্টের বিভিন্ন অংশ (যেমন নাম, পরিমাণ) টুলটিপে দেখানো।
• অ্যানিমেশন: টুলটিপের দৃশ্যমানতার জন্য অ্যানিমেশন ব্যবহার করা (যেমন ধীরে ধীরে প্রদর্শিত হওয়া)।

উদাহরণ: টুলটিপের স্টাইল পরিবর্তন

// টুলটিপের ব্যাকগ্রাউন্ড এবং বর্ডার কাস্টমাইজেশন
tooltip.style("background-color", "#333")
       .style("color", "#fff")
       .style("border", "2px solid #fff")
       .style("padding", "10px")
       .style("border-radius", "5px")
       .style("box-shadow", "0 0 10px rgba(0, 0, 0, 0.5)");

এটি টুলটিপের ব্যাকগ্রাউন্ড রঙ, টেক্সট রঙ, বর্ডার, প্যাডিং এবং শ্যাডো কাস্টমাইজ করবে।

D3.js ব্যবহার করে ডেটা পয়েন্ট এবং টুলটিপস যোগ করা খুবই সহজ এবং শক্তিশালী একটি পদ্ধতি ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে। enter() মেথডের মাধ্যমে ডেটা পয়েন্ট তৈরি করা যায় এবং mouseover, mousemove, এবং mouseout ইভেন্ট ব্যবহার করে ইন্টারঅ্যাকটিভ টুলটিপস তৈরি করা যায়। এই টুলটিপসগুলি ডেটা পয়েন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদর্শন করতে সহায়ক। D3.js এর সাহায্যে আপনি ভিজ্যুয়ালাইজেশনটি আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করতে পারেন।