গ্রিড লাইন এবং গাইডলাইন তৈরি

D3.js-এ গ্রিড লাইন এবং গাইডলাইন তৈরি করা হয়, যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও বোধগম্য এবং স্পষ্ট করে তোলে। এগুলি বিশেষভাবে বৈশিষ্ট্যগত ভিজ্যুয়ালাইজেশন যেমন বার চার্ট, লাইন চার্ট, স্ক্যাটার প্লট ইত্যাদির জন্য অত্যন্ত উপকারী, কারণ তারা ডেটার মানের তুলনা এবং বিশ্লেষণ সহজ করে দেয়। গ্রিড লাইনগুলি সাধারণত x-axis এবং y-axis বরাবর আঁকা হয়, যা ডেটা পয়েন্টগুলোর মধ্যে স্পষ্ট সাপোর্ট লাইন তৈরি করে।

১. গ্রিড লাইন তৈরি

গ্রিড লাইন সাধারণত axes-এর সাথে সোজা লাইনে প্রদর্শিত হয় এবং ডেটা পয়েন্টগুলোকে পরিমাপ করতে সাহায্য করে। D3.js-এ scale এবং axis মেথড ব্যবহার করে গ্রিড লাইন তৈরি করা সম্ভব।

১.১ গ্রিড লাইন তৈরি করার জন্য কোড

// ডেটা এবং SVG এলিমেন্ট
const data = [30, 50, 70, 90, 120, 150, 200];

// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 500)
              .attr("height", 300);

// স্কেল এবং অ্যাক্সিস তৈরি
const xScale = d3.scaleLinear()
                 .domain([0, d3.max(data)])
                 .range([0, 400]);

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

// গ্রিড লাইন তৈরি করা
const xAxisGrid = d3.axisBottom(xScale)
                    .ticks(5)
                    .tickSize(-250) // গ্রিড লাইন গুলো কতটা লম্বা হবে
                    .tickFormat(""); // টিক মার্কের টেক্সট ফরম্যাটিং

const yAxisGrid = d3.axisLeft(yScale)
                    .ticks(5)
                    .tickSize(-400) // গ্রিড লাইন গুলো কতটা লম্বা হবে
                    .tickFormat(""); // টিক মার্কের টেক্সট ফরম্যাটিং

// X-axis গ্রিড লাইন আঁকা
svg.append("g")
   .attr("transform", "translate(50, 250)")
   .call(xAxisGrid);

// Y-axis গ্রিড লাইন আঁকা
svg.append("g")
   .attr("transform", "translate(50, 0)")
   .call(yAxisGrid);

এখানে, tickSize() মেথড ব্যবহার করে গ্রিড লাইনগুলোর দৈর্ঘ্য নির্ধারণ করা হয়েছে এবং tickFormat("") দিয়ে টিক মার্কের পাশে কোনো টেক্সট না দেখানোর ব্যবস্থা করা হয়েছে। গ্রিড লাইনগুলি X-axis এবং Y-axis এর সাথে সোজা এবং সমান্তরালভাবে প্রদর্শিত হয়।

২. গাইডলাইন তৈরি

গাইডলাইন সাধারণত অক্ষের সাথে সম্পর্কিত একটি সাহায্যকারী লাইন হিসেবে ব্যবহৃত হয়, যা ডেটার প্রদর্শনী আরও স্পষ্ট করে। গাইডলাইনগুলি অ্যানিমেশন বা ডেটার উপর নির্ভরশীল হতে পারে।

২.১ গাইডলাইন তৈরি করার জন্য কোড

// ডেটা এবং SVG এলিমেন্ট
const data = [30, 50, 70, 90, 120, 150, 200];

// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 500)
              .attr("height", 300);

// স্কেল এবং অ্যাক্সিস তৈরি
const xScale = d3.scaleLinear()
                 .domain([0, d3.max(data)])
                 .range([0, 400]);

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

// গাইডলাইন তৈরি করার জন্য একটি ফাংশন
function makeGuideline(scale, axis, transform) {
  return svg.append("g")
            .attr("transform", transform)
            .selectAll(".guideline")
            .data(scale.ticks(5))
            .enter().append("line")
            .attr("x1", d => axis(d))
            .attr("y1", 0)
            .attr("x2", d => axis(d))
            .attr("y2", 250)
            .attr("stroke", "#ddd")
            .attr("stroke-dasharray", "4");
}

// X-axis গাইডলাইন তৈরি
makeGuideline(xScale, xScale, "translate(50, 250)");

// Y-axis গাইডলাইন তৈরি
makeGuideline(yScale, yScale, "translate(50, 0)");

এখানে, makeGuideline একটি সাধারণ ফাংশন তৈরি করা হয়েছে, যা scale এবং axis এর সাহায্যে গাইডলাইন তৈরি করে। এই গাইডলাইনগুলি line এলিমেন্ট ব্যবহার করে তৈরি হয় এবং stroke-dasharray দিয়ে ড্যাশি লাইন তৈরি করা হয়।

৩. গ্রিড লাইন এবং গাইডলাইন আলাদা করার উপায়

ডেটা ভিজ্যুয়ালাইজেশনে কখনও কখনও আপনি গ্রিড লাইন এবং গাইডলাইন আলাদাভাবে দেখতে চান, যাতে গ্রিড লাইনগুলি বরং ব্যাকগ্রাউন্ড হিসেবে থাকে এবং গাইডলাইনগুলি স্পষ্টভাবে ডেটা পয়েন্টের সাথে সম্পর্কিত হয়।

৩.১ গ্রিড লাইন এবং গাইডলাইন আলাদা করা

// X-axis গ্রিড লাইন
svg.append("g")
   .attr("transform", "translate(50, 250)")
   .call(xAxisGrid)
   .selectAll(".tick")
   .attr("stroke", "#ddd");  // গ্রিড লাইনকে আলাদা করে দেখানো

// Y-axis গ্রিড লাইন
svg.append("g")
   .attr("transform", "translate(50, 0)")
   .call(yAxisGrid)
   .selectAll(".tick")
   .attr("stroke", "#ddd");  // গ্রিড লাইনকে আলাদা করে দেখানো

// X-axis গাইডলাইন
makeGuideline(xScale, xScale, "translate(50, 250)")
   .attr("stroke", "#888")
   .attr("stroke-width", 1);

// Y-axis গাইডলাইন
makeGuideline(yScale, yScale, "translate(50, 0)")
   .attr("stroke", "#888")
   .attr("stroke-width", 1);

এখানে, গ্রিড লাইনগুলির জন্য আমরা হালকা রঙ (#ddd) ব্যবহার করেছি এবং গাইডলাইনগুলির জন্য একটু গা dark ় রঙ (#888) ব্যবহার করেছি, যাতে তারা সহজেই আলাদা হয়ে যায়।

গ্রিড লাইন এবং গাইডলাইন D3.js-এ গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ এগুলি ডেটা পয়েন্টগুলিকে আরও স্পষ্ট এবং সহজে বিশ্লেষণযোগ্য করে তোলে। গ্রিড লাইন ডেটার স্কেল এবং অক্ষের সাথে সম্পর্কিত হওয়ার জন্য একটি ব্যাকগ্রাউন্ড হিসেবে কাজ করে, আর গাইডলাইন ডেটা পয়েন্টগুলির সাথে সম্পর্কিত এবং ভিজ্যুয়ালাইজেশনকে আরও পরিষ্কার করে তোলে। D3.js-এর সাহায্যে, আপনি খুব সহজেই কাস্টম গ্রিড লাইন এবং গাইডলাইন তৈরি করতে পারেন যা আপনার ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং বোধগম্য করে তোলে।