SVG এলিমেন্ট তৈরি এবং ম্যানিপুলেশন

D3.js-এর অন্যতম শক্তিশালী বৈশিষ্ট্য হল SVG (Scalable Vector Graphics) ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা। SVG এলিমেন্টগুলি গ্রাফিক্স এবং চিত্র আঁকতে ব্যবহৃত হয়, যা ইন্টারঅ্যাকটিভ এবং ডাইনামিক ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক। D3.js আপনাকে SVG এলিমেন্ট তৈরি, ম্যানিপুলেট এবং স্টাইল করতে সাহায্য করে। এখানে, আমরা D3.js দিয়ে SVG এলিমেন্ট তৈরি এবং ম্যানিপুলেশন করার পদ্ধতি জানব।

SVG এলিমেন্ট কী?

SVG (Scalable Vector Graphics) একটি XML-ভিত্তিক ফরম্যাট যা ২D গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এটি রেজোলিউশন-স্বাধীন, অর্থাৎ যেকোনো আকারে আউটপুট প্রদর্শিত হতে পারে এবং পিক্সেল আউটপুটের পরিবর্তে ভেক্টর গ্রাফিক্স থাকে, যা স্কেলযোগ্য।

D3.js SVG এলিমেন্টে ডেটা বাইন্ডিং এবং গ্রাফিক্যাল উপাদান তৈরি করতে পারে, যেমন বার, লাইন, সার্কেল, রেকটেঙ্গল, পাথ ইত্যাদি।

১. SVG এলিমেন্ট তৈরি করা

D3.js দিয়ে SVG এলিমেন্ট তৈরি করতে d3.select() এবং append() মেথড ব্যবহার করা হয়। নিচে একটি সহজ উদাহরণ দেয়া হলো:

উদাহরণ ১: SVG এলিমেন্ট তৈরি

// SVG তৈরি করা
const svg = d3.select("body")
  .append("svg") // SVG এলিমেন্ট যোগ করা
  .attr("width", 500)  // SVG এলিমেন্টের প্রস্থ নির্ধারণ
  .attr("height", 400); // SVG এলিমেন্টের উচ্চতা নির্ধারণ

এই কোডটি HTML পেজের body তে একটি SVG এলিমেন্ট তৈরি করবে, যার প্রস্থ 500px এবং উচ্চতা 400px।

২. SVG এর মাধ্যমে গ্রাফিক্যাল উপাদান তৈরি করা

D3.js দিয়ে SVG-তে বিভিন্ন গ্রাফিক্যাল উপাদান তৈরি করা যায়। সবচেয়ে সাধারণ গ্রাফিক্যাল উপাদানগুলোর মধ্যে rect, circle, line, এবং path অন্তর্ভুক্ত।

উদাহরণ ২: রেকটেঙ্গল (Rectangle) তৈরি

// SVG তে একটি রেকটেঙ্গল তৈরি করা
svg.append("rect")
  .attr("x", 50)  // রেকটেঙ্গলের X অক্ষের অবস্থান
  .attr("y", 50)  // রেকটেঙ্গলের Y অক্ষের অবস্থান
  .attr("width", 100)  // রেকটেঙ্গলের প্রস্থ
  .attr("height", 100) // রেকটেঙ্গলের উচ্চতা
  .attr("fill", "blue"); // রঙ

এই কোডটি SVG তে একটি নীল রঙের রেকটেঙ্গল তৈরি করবে, যার প্রস্থ 100px এবং উচ্চতা 100px।

উদাহরণ ৩: সার্কেল (Circle) তৈরি

// SVG তে একটি সার্কেল তৈরি করা
svg.append("circle")
  .attr("cx", 250)  // সার্কেলের কেন্দ্রের X অক্ষের অবস্থান
  .attr("cy", 200)  // সার্কেলের কেন্দ্রের Y অক্ষের অবস্থান
  .attr("r", 50)    // রেডিয়াস
  .attr("fill", "red"); // রঙ

এটি SVG তে একটি লাল রঙের সার্কেল তৈরি করবে, যার রেডিয়াস 50px।

উদাহরণ ৪: লাইন (Line) তৈরি

// SVG তে একটি লাইন তৈরি করা
svg.append("line")
  .attr("x1", 100)  // লাইন শুরু হওয়া X অক্ষের অবস্থান
  .attr("y1", 100)  // লাইন শুরু হওয়া Y অক্ষের অবস্থান
  .attr("x2", 400)  // লাইন শেষ হওয়া X অক্ষের অবস্থান
  .attr("y2", 100)  // লাইন শেষ হওয়া Y অক্ষের অবস্থান
  .attr("stroke", "green")  // লাইন স্ট্রোক রঙ
  .attr("stroke-width", 4); // লাইন স্ট্রোকের প্রস্থ

এটি SVG তে একটি সবুজ রঙের হরাইজন্টাল লাইন তৈরি করবে, যার প্রস্থ 4px।

৩. SVG এলিমেন্ট ম্যানিপুলেশন

D3.js এর মাধ্যমে SVG এলিমেন্টের অ্যাট্রিবিউট, স্টাইল এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করা যায়।

উদাহরণ ৫: SVG অ্যাট্রিবিউট পরিবর্তন

// SVG রেকটেঙ্গলের অ্যাট্রিবিউট পরিবর্তন
d3.select("rect")
  .attr("width", 150)   // রেকটেঙ্গলের প্রস্থ পরিবর্তন
  .attr("fill", "orange"); // রঙ পরিবর্তন

এটি প্রথম rect এলিমেন্টটির প্রস্থ 150px করে দিবে এবং রঙ পরিবর্তন করে কমলা (orange) করবে।

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

// সার্কেলের স্টাইল পরিবর্তন করা
d3.select("circle")
  .style("stroke", "black") // স্ট্রোক রঙ পরিবর্তন
  .style("stroke-width", 5); // স্ট্রোকের প্রস্থ

এটি প্রথম circle এলিমেন্টের স্ট্রোকের রঙ কালো করবে এবং স্ট্রোকের প্রস্থ 5px করে দিবে।

উদাহরণ ৭: SVG টেক্সট যোগ করা

// SVG তে টেক্সট যোগ করা
svg.append("text")
  .attr("x", 150)
  .attr("y", 300)
  .text("D3.js Example")
  .attr("font-size", "20px")
  .attr("fill", "black");

এটি SVG তে একটি টেক্সট (D3.js Example) যোগ করবে, যার অবস্থান (150, 300) এবং ফন্ট সাইজ ২০px।

৪. ডেটা বাইন্ডিং এবং SVG

D3.js দিয়ে SVG তে ডেটা বাইন্ডিংও করা যায়। এর মাধ্যমে ডেটার উপর ভিত্তি করে একাধিক SVG এলিমেন্ট তৈরি করা যায়।

উদাহরণ ৮: বার চার্ট তৈরি করা

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

// SVG এলিমেন্টে বার তৈরি
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 60)  // বারগুলোর X অবস্থান
  .attr("y", d => 400 - d)       // Y অবস্থান (ডেটার উপর ভিত্তি করে)
  .attr("width", 50)             // প্রস্থ
  .attr("height", d => d)        // উচ্চতা
  .attr("fill", "steelblue");    // রঙ

এটি একটি বার চার্ট তৈরি করবে যেখানে প্রতিটি বার ডেটার মান অনুযায়ী উচ্চতা পাবে।

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

SVG কি?

SVG (Scalable Vector Graphics) হলো একটি XML ভিত্তিক চিত্র ফরম্যাট যা গ্রাফিক্স, লোগো, চার্ট, ম্যাপ, এবং অন্যান্য ভিজ্যুয়াল কন্টেন্ট তৈরি করতে ব্যবহৃত হয়। SVG-এর প্রধান সুবিধা হলো এটি স্কেলেবল, মানে ছবি যত বড় বা ছোট হবে, ততই এর গুণমান থাকবে অপরিবর্তিত। এটি মূলত ভেক্টর গ্রাফিক্স ব্যবহার করে, তাই পিক্সেল বেসড গ্রাফিক্সের মতো ঝাপসা বা গুণমান হারানোর সমস্যা নেই।

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

SVG এর বৈশিষ্ট্যসমূহ

1. স্কেলেবল (Scalable): SVG গ্রাফিক্স স্কেল করা যায়, অর্থাৎ আপনি যেকোনো সাইজে জুম ইন বা আউট করতে পারেন এবং এতে গুণমান কমে না।
2. এডিটেবল (Editable): SVG-এর সমস্ত উপাদান (যেমন, লাইন, রেকটেঙ্গেল, সার্কেল) কোড হিসেবে থাকে, যা সহজে জাভাস্ক্রিপ্ট বা CSS দিয়ে পরিবর্তন করা যায়।
3. ইন্টারঅ্যাকটিভ (Interactive): SVG উপাদানগুলোর সাথে ইভেন্ট হ্যান্ডলিং (যেমন ক্লিক, হোভার) যোগ করা যেতে পারে, যা ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরিতে সাহায্য করে।
4. কোড-বেজড (Code-based): SVG গুলি XML ফরম্যাটে লেখা হয়, যা HTML ডকুমেন্টে সহজেই এম্বেড করা যায়।

D3.js-এ SVG ব্যবহার

D3.js-এ SVG ব্যবহার করার মাধ্যমে ডেটা-ভিত্তিক ভিজ্যুয়ালাইজেশন তৈরি করা হয়। SVG ট্যাগ ব্যবহার করে আপনি বিভিন্ন গ্রাফিক্যাল উপাদান যেমন রেকটেঙ্গেল (rect), সার্কেল (circle), লাইন (line), পথ (path), ইত্যাদি তৈরি করতে পারেন। D3.js সেই উপাদানগুলোকে ডেটা বাইন্ডিং, সিলেকশন, এবং ম্যানিপুলেশন দ্বারা ডায়নামিকভাবে তৈরি, আপডেট এবং মুছে ফেলার ক্ষমতা প্রদান করে।

D3.js-এ SVG ব্যবহার করার প্রক্রিয়া

১. SVG এলিমেন্ট তৈরি করা

D3.js দিয়ে SVG তৈরি করতে প্রথমে d3.select() মেথড ব্যবহার করে একটি কন্টেইনার নির্বাচন করতে হয় (যেমন body বা অন্য কোনো div), তারপর সেখানে append("svg") মেথড ব্যবহার করে SVG এলিমেন্ট যোগ করা হয়।

উদাহরণ:

const svgWidth = 500;
const svgHeight = 400;

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

এই কোডটি একটি SVG এলিমেন্ট তৈরি করবে যার প্রস্থ 500 পিক্সেল এবং উচ্চতা 400 পিক্সেল।

২. SVG উপাদান তৈরি করা

D3.js-এ SVG উপাদান তৈরি করতে append() মেথড ব্যবহার করা হয়। আপনি বিভিন্ন ধরনের SVG উপাদান তৈরি করতে পারেন, যেমন রেকটেঙ্গেল, সার্কেল, লাইন ইত্যাদি।

উদাহরণ:

1. রেকটেঙ্গেল (Rect):

svg.append("rect")
   .attr("x", 50)
   .attr("y", 50)
   .attr("width", 200)
   .attr("height", 100)
   .style("fill", "steelblue");

এটি একটি রেকটেঙ্গেল তৈরি করবে যেটি 50, 50 পিক্সেল স্থান থেকে শুরু হবে এবং এর প্রস্থ 200 পিক্সেল এবং উচ্চতা 100 পিক্সেল হবে।

2. সার্কেল (Circle):

svg.append("circle")
   .attr("cx", 150)  // সেন্টারের x কোঅর্ডিনেট
   .attr("cy", 150)  // সেন্টারের y কোঅর্ডিনেট
   .attr("r", 50)    // রেডিয়াস
   .style("fill", "orange");

এটি একটি সার্কেল তৈরি করবে যেটির কেন্দ্র (cx, cy) 150, 150 পিক্সেল এবং রেডিয়াস 50 পিক্সেল হবে।

3. লাইন (Line):

svg.append("line")
   .attr("x1", 50)
   .attr("y1", 50)
   .attr("x2", 450)
   .attr("y2", 350)
   .attr("stroke", "black")
   .attr("stroke-width", 2);

এটি একটি লাইন তৈরি করবে যেটি 50, 50 থেকে 450, 350 পর্যন্ত যাবে এবং লাইনটি কালো রঙে হবে।

৩. ডেটা বাইন্ডিং এবং SVG

D3.js-এ ডেটা বাইন্ডিং ব্যবহারের মাধ্যমে আপনি ডেটার উপর ভিত্তি করে SVG উপাদানগুলো তৈরি করতে পারেন। data() মেথড ব্যবহার করে ডেটা বাইন্ড করা হয় এবং enter() মেথড ব্যবহার করে নতুন DOM উপাদান তৈরি করা হয়।

উদাহরণ:

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

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60)
   .attr("y", d => svgHeight - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue");

এটি একটি বার চার্ট তৈরি করবে যেখানে প্রতিটি বার ডেটার মান অনুযায়ী উচ্চতা পাবে এবং 60 পিক্সেল দূরত্বে অবস্থান করবে।

৪. SVG এ ট্রানজিশন

D3.js-এ SVG উপাদানগুলির মধ্যে ট্রানজিশন যোগ করা সম্ভব, যাতে গ্রাফিক্সের গতি, আকার এবং রঙ পরিবর্তন ডায়নামিকভাবে হতে পারে।

উদাহরণ:

svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60)
   .attr("y", d => svgHeight - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue")
   .transition()
   .duration(1000)
   .style("fill", "orange");

এটি বার চার্টে একটি ট্রানজিশন যোগ করবে, যেখানে প্রথমে সব বারের রঙ steelblue থাকবে এবং 1 সেকেন্ড পর তা পরিবর্তিত হয়ে orange হয়ে যাবে।

SVG (Scalable Vector Graphics) একটি অত্যন্ত শক্তিশালী এবং স্কেলযোগ্য গ্রাফিক্স ফরম্যাট যা D3.js ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য অত্যন্ত উপযোগী। D3.js-এ SVG ব্যবহার করে আপনি বিভিন্ন ধরনের ডাইনামিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন, যেমন বার চার্ট, লাইন চার্ট, পাই চার্ট, ম্যাপ, ইত্যাদি। SVG-এর স্কেলযোগ্যতা, এডিটেবিলিটি এবং ইন্টারঅ্যাকটিভ ফিচারগুলো D3.js-কে অত্যন্ত শক্তিশালী করে তোলে।

D3.js এর মাধ্যমে SVG (Scalable Vector Graphics) ব্যবহার করে বিভিন্ন ধরনের শেপ তৈরি করা সম্ভব। D3.js-এর select(), append(), এবং attr() মেথডের মাধ্যমে আমরা SVG উপাদানগুলো যেমন লাইন, বৃত্ত, আয়তক্ষেত্র ইত্যাদি তৈরি এবং ম্যানিপুলেট করতে পারি।

১. SVG এর মাধ্যমে লাইন তৈরি (Line)

লম্বা বা সোজা লাইন তৈরি করার জন্য line এলিমেন্ট ব্যবহৃত হয়। D3.js-এ লাইন তৈরি করতে append("line") মেথড ব্যবহার করা হয় এবং এর জন্য প্রয়োজনীয় অ্যাট্রিবিউট যেমন x1, y1, x2, এবং y2 দেওয়া হয়।

উদাহরণ:

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

// লাইন তৈরি
svg.append("line")
   .attr("x1", 50)
   .attr("y1", 50)
   .attr("x2", 450)
   .attr("y2", 450)
   .attr("stroke", "black")
   .attr("stroke-width", 2);

এটি করবে:

• 50, 50 থেকে 450, 450 পজিশনে একটি সোজা লাইন আঁকবে।
• লাইনটি কালো রঙের এবং ২ পিক্সেল চওড়া হবে।

২. SVG এর মাধ্যমে বৃত্ত তৈরি (Circle)

বৃত্ত তৈরি করতে circle এলিমেন্ট ব্যবহার করা হয়। D3.js-এ বৃত্ত আঁকতে append("circle") মেথড ব্যবহার করা হয় এবং তার জন্য প্রয়োজনীয় অ্যাট্রিবিউট যেমন cx, cy, এবং r সেট করা হয়।

উদাহরণ:

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

// বৃত্ত তৈরি
svg.append("circle")
   .attr("cx", 250)
   .attr("cy", 250)
   .attr("r", 100)
   .attr("fill", "steelblue");

এটি করবে:

• 250, 250 পজিশনে একটি বৃত্ত তৈরি করবে যার ব্যাসার্ধ 100 পিক্সেল এবং এটি steelblue রঙে পূর্ণ হবে।

৩. SVG এর মাধ্যমে আয়তক্ষেত্র তৈরি (Rectangle)

আয়তক্ষেত্র তৈরি করতে rect এলিমেন্ট ব্যবহার করা হয়। D3.js-এ আয়তক্ষেত্র আঁকতে append("rect") মেথড ব্যবহার করা হয় এবং এর জন্য প্রয়োজনীয় অ্যাট্রিবিউট যেমন x, y, width, এবং height নির্ধারণ করা হয়।

উদাহরণ:

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

// আয়তক্ষেত্র তৈরি
svg.append("rect")
   .attr("x", 100)
   .attr("y", 100)
   .attr("width", 300)
   .attr("height", 200)
   .attr("fill", "orange");

এটি করবে:

• 100, 100 পজিশনে একটি আয়তক্ষেত্র তৈরি করবে যার প্রস্থ 300 পিক্সেল এবং উচ্চতা 200 পিক্সেল। এটি orange রঙে পূর্ণ হবে।

৪. একাধিক শেপ তৈরি (Multiple Shapes)

D3.js ব্যবহার করে একাধিক শেপ তৈরি করা যেতে পারে। আপনি যদি ডেটা ব্যবহার করে শেপ তৈরি করতে চান, তাহলে data() মেথডের সাহায্যে একাধিক শেপও তৈরি করতে পারেন।

উদাহরণ: একাধিক বৃত্ত তৈরি

// ডেটাসেট
const data = [30, 50, 70, 100, 120];

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

// বৃত্ত তৈরি
svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr("cx", (d, i) => (i * 100) + 50)
   .attr("cy", 250)
   .attr("r", d => d)
   .attr("fill", "green");

এটি করবে:

• ডেটা অনুযায়ী পাঁচটি বৃত্ত তৈরি করবে, যেখানে প্রতিটি বৃত্তের ব্যাসার্ধ ডেটার মান অনুযায়ী হবে এবং সবগুলো বৃত্ত একই সারিতে থাকবে।

৫. শেপের স্টাইলিং

D3.js-এ শেপগুলোকে স্টাইল করার জন্য style() মেথড ব্যবহার করা যায়। এছাড়াও attr() মেথডের মাধ্যমে অ্যাট্রিবিউটগুলো পরিবর্তন করা যায়।

উদাহরণ: আয়তক্ষেত্রের স্টাইল পরিবর্তন

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

// আয়তক্ষেত্র তৈরি এবং স্টাইলিং
svg.append("rect")
   .attr("x", 100)
   .attr("y", 100)
   .attr("width", 300)
   .attr("height", 200)
   .style("fill", "blue")
   .style("stroke", "black")
   .style("stroke-width", 5);

এটি করবে:

• আয়তক্ষেত্রের ভিতরের রঙ নীল হবে, বাহিরে সীমানা (স্ট্রোক) কালো এবং ৫ পিক্সেল চওড়া হবে।

D3.js এর মাধ্যমে SVG ব্যবহার করে বিভিন্ন ধরনের শেপ তৈরি এবং ম্যানিপুলেট করা সম্ভব, যেমন লাইন, বৃত্ত, আয়তক্ষেত্র ইত্যাদি। D3.js-এর select(), append(), এবং attr() মেথড ব্যবহার করে এই শেপগুলোর অবস্থান, আকার, রঙ, ইত্যাদি নির্ধারণ করা যায় এবং ডেটা বাইন্ডিংয়ের মাধ্যমে একাধিক শেপও তৈরি করা সম্ভব। D3.js এই শেপগুলির উপর ইন্টারঅ্যাকশন এবং ডাইনামিক পরিবর্তনও সহজে করতে পারে।

D3.js একটি শক্তিশালী লাইব্রেরি যা SVG (Scalable Vector Graphics) এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। SVG হল একটি XML ভিত্তিক ফরম্যাট যা গ্রাফিক্স এবং চিত্র তৈরিতে ব্যবহৃত হয় এবং D3.js ব্যবহার করে ডায়নামিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা হয়। D3.js-এর মাধ্যমে SVG উপাদানগুলির Attributes এবং Styles পরিবর্তন এবং নিয়ন্ত্রণ করা যায়।

১. SVG Attributes

SVG উপাদানগুলির বিভিন্ন Attributes (অ্যাট্রিবিউট) থাকে যা তাদের বৈশিষ্ট্য এবং আচরণ নির্ধারণ করে। D3.js ব্যবহার করে এই অ্যাট্রিবিউটগুলো নিয়ন্ত্রণ করা সম্ভব। সাধারণত, অ্যাট্রিবিউটের মাধ্যমে আকার, স্থান, রঙ, এবং অন্যান্য প্রপার্টি নির্ধারণ করা হয়।

১.১ SVG Attributes পরিবর্তন

D3.js-এ attr() মেথড ব্যবহার করে SVG উপাদানগুলির অ্যাট্রিবিউট পরিবর্তন করা যায়।

সিনট্যাক্স:

d3.select("element").attr("attribute", value);

উদাহরণ:

// একটি circle তৈরি এবং তার রেডিয়াস (radius) এবং পজিশন (cx, cy) সেট করা
d3.select("body").append("svg")
  .attr("width", 400)
  .attr("height", 400)
  .append("circle")
  .attr("cx", 200)
  .attr("cy", 200)
  .attr("r", 50)
  .attr("fill", "steelblue");

এই কোডটি একটি SVG এর মধ্যে একটি circle তৈরি করবে এবং তার পজিশন এবং আকার নির্ধারণ করবে।

Attributes উদাহরণ:

• width: SVG বা উপাদানের প্রস্থ।
• height: SVG বা উপাদানের উচ্চতা।
• x, y: উপাদানটির অবস্থান।
• r: বৃত্তের রেডিয়াস।
• cx, cy: বৃত্তের কেন্দ্রের অবস্থান।
• fill: উপাদানের ভিতরের রঙ।
• stroke: উপাদানের সীমানা রঙ।
• stroke-width: সীমানার প্রস্থ।

২. SVG Styles

SVG উপাদানগুলির Styles পরিবর্তন করতে style() মেথড ব্যবহার করা হয়। style() মেথড ব্যবহার করে CSS স্টাইল শীটের মতো সরাসরি স্টাইল অ্যাট্রিবিউট যোগ করা হয়।

২.১ Styles পরিবর্তন

সিনট্যাক্স:

d3.select("element").style("property", value);

উদাহরণ:

// একটি rect তৈরি এবং তার স্টাইল পরিবর্তন করা
d3.select("body").append("svg")
  .attr("width", 400)
  .attr("height", 400)
  .append("rect")
  .attr("x", 50)
  .attr("y", 50)
  .attr("width", 200)
  .attr("height", 100)
  .style("fill", "orange")
  .style("stroke", "black")
  .style("stroke-width", 3);

এই কোডটি একটি rect তৈরি করবে এবং তার স্টাইল যেমন রঙ, সীমানা রঙ এবং সীমানা প্রস্থ নির্ধারণ করবে।

Styles উদাহরণ:

• fill: উপাদানের ভিতরের রঙ।
• stroke: উপাদানের সীমানা রঙ।
• stroke-width: সীমানার প্রস্থ।
• opacity: উপাদানের অস্বচ্ছতা (ট্রান্সপারেন্সি)।
• font-size: টেক্সটের আকার।
• font-family: টেক্সটের ফন্ট।
• border: সীমানা।

৩. D3.js-এ SVG Attributes এবং Styles ব্যবহার

D3.js-এর মাধ্যমে SVG উপাদানগুলির Attributes এবং Styles-এর সমন্বয় ব্যবহার করে আরও ডায়নামিক এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা যায়।

উদাহরণ: ডেটা-ভিত্তিক বার চার্ট

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

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

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 30)
   .attr("y", d => 400 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue")
   .style("stroke", "black")
   .style("stroke-width", 2);

এই কোডটি একটি SVG এর মধ্যে বার চার্ট তৈরি করবে, যেখানে:

• x এবং y দ্বারা বারগুলির পজিশন নির্ধারণ করা হবে।
• width এবং height দ্বারা বারগুলির আকার নির্ধারণ করা হবে।
• fill দ্বারা বারের ভিতরের রঙ এবং stroke দ্বারা সীমানার রঙ নির্ধারণ করা হবে।

৪. D3.js-এ Interaction এবং Styles

D3.js ব্যবহার করে ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা যেতে পারে, যেখানে mouse events বা hover effects ব্যবহার করা হয়।

উদাহরণ: Hover Effects

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

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

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 30)
   .attr("y", d => 400 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue")
   .style("stroke", "black")
   .style("stroke-width", 2)
   .on("mouseover", function(event, d) {
       d3.select(this)
         .style("fill", "orange");
   })
   .on("mouseout", function(event, d) {
       d3.select(this)
         .style("fill", "steelblue");
   });

এটি একটি ইন্টারঅ্যাকটিভ বার চার্ট তৈরি করবে, যেখানে মাউসওভার করলে বারটির রঙ পরিবর্তিত হবে এবং মাউস আউট করলে আবার আগের রঙ ফিরে আসবে।

D3.js-এ SVG Attributes এবং Styles পরিবর্তন এবং নিয়ন্ত্রণের মাধ্যমে শক্তিশালী, কাস্টমাইজড এবং ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব। attr() এবং style() মেথড ব্যবহার করে SVG উপাদানের বৈশিষ্ট্য এবং চেহারা পরিবর্তন করা যায়, যা ডেটা-ভিত্তিক ভিজ্যুয়ালাইজেশন তৈরির জন্য অত্যন্ত গুরুত্বপূর্ণ।

D3.js একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য SVG (Scalable Vector Graphics) এবং অন্যান্য DOM উপাদানগুলির সাথে কাজ করতে সক্ষম। SVG গ্রাফিক্স ব্যবহার করে D3.js ডাইনামিক এবং ইন্টারঅ্যাকটিভ চার্ট, গ্রাফ, ম্যাপ এবং অন্যান্য ভিজ্যুয়াল তৈরি করতে সাহায্য করে।

এখানে D3.js ব্যবহার করে SVG গ্রাফিক্স তৈরির প্রক্রিয়া এবং একটি সহজ উদাহরণ দেখানো হয়েছে।

SVG (Scalable Vector Graphics) কী?

SVG হলো একটি XML-ভিত্তিক ফরম্যাট যা ভেক্টর গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এটি ইনফিনিটি স্কেল করা যায়, অর্থাৎ যত বড় বা ছোটই হোক না কেন, গ্রাফিক্সের গুণমান পরিবর্তিত হয় না। D3.js SVG এলিমেন্টের সাথে কাজ করার জন্য একটি গুরুত্বপূর্ণ লাইব্রেরি।

D3.js এর মাধ্যমে SVG গ্রাফিক্স তৈরি

D3.js ব্যবহার করে SVG গ্রাফিক্স তৈরি করার জন্য কয়েকটি সাধারণ পদক্ষেপ অনুসরণ করতে হয়:

1. SVG ক্যানভাস তৈরি: d3.select() বা d3.append() মেথড ব্যবহার করে SVG ক্যানভাস তৈরি করা।
2. SVG এলিমেন্ট যোগ করা: d3.append() মেথড ব্যবহার করে SVG উপাদান (যেমন rect, circle, line, path ইত্যাদি) যোগ করা।
3. স্টাইলিং এবং অ্যাট্রিবিউট প্রয়োগ: style(), attr(), এবং classed() মেথড ব্যবহার করে উপাদানগুলোর স্টাইল এবং অ্যাট্রিবিউট পরিবর্তন করা।

SVG গ্রাফিক্স তৈরি করার উদাহরণ

এখানে একটি সহজ উদাহরণ দেওয়া হলো, যেখানে D3.js ব্যবহার করে একটি SVG ক্যানভাস তৈরি করা হবে এবং তার মধ্যে একটি বার চার্ট প্রদর্শিত হবে।

ধাপ ১: HTML ফাইল তৈরি

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js SVG Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <h1>SVG Bar Chart with D3.js</h1>
    <div id="chart"></div>
    <script src="script.js"></script>
</body>
</html>

এটি একটি HTML পৃষ্ঠা যা d3.v7.min.js লাইব্রেরি লোড করবে এবং একটি script.js ফাইল ধারণ করবে।

ধাপ ২: D3.js কোড তৈরি

script.js

// ডেটাসেট
const data = [30, 80, 45, 60, 120];

// SVG ক্যানভাস তৈরি
const svgWidth = 500;
const svgHeight = 300;
const barWidth = svgWidth / data.length;

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

// বার চার্ট তৈরি
svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * barWidth) // x পজিশন
    .attr("y", d => svgHeight - d) // y পজিশন (উচ্চতা)
    .attr("width", barWidth - 5) // বারের প্রস্থ
    .attr("height", d => d) // বার উচ্চতা
    .style("fill", "steelblue");

ব্যাখ্যা:

1. ডেটাসেট: একটি সিম্পল সংখ্যা সেট [30, 80, 45, 60, 120] বার চার্টের জন্য।
2. SVG ক্যানভাস: d3.select() এবং append() মেথড ব্যবহার করে SVG এলিমেন্ট তৈরি করা হয়েছে এবং সেটির প্রস্থ ও উচ্চতা নির্ধারণ করা হয়েছে।
3. বার তৈরি: selectAll(), data(), enter() এবং append() মেথড ব্যবহার করে প্রতিটি ডেটার জন্য একটি rect (রেকটাঙ্গুলার বক্স) তৈরি করা হয়েছে।

ধাপ ৩: ফলাফল

এই কোডটি ব্রাউজারে চালালে একটি SVG বার চার্ট দেখতে পাবেন যেখানে প্রতিটি বারের উচ্চতা ডেটার মান অনুযায়ী নির্ধারিত হবে এবং বারের রঙ হবে steelblue।

SVG গ্রাফিক্সে অন্যান্য উপাদান যোগ করা

D3.js দিয়ে আরও অন্যান্য SVG উপাদান যেমন circle, line, text ইত্যাদি তৈরি করা যেতে পারে।

উদাহরণ: একটি সার্কেল তৈরি করা

// সার্কেল তৈরি
svg.append("circle")
   .attr("cx", 100) // x কোর
   .attr("cy", 100) // y কোর
   .attr("r", 50)   // ব্যাসার্ধ
   .style("fill", "orange");

এটি একটি সার্কেল তৈরি করবে যার কেন্দ্রে (100, 100) পজিশন থাকবে এবং রঙ হবে orange।

SVG গ্রাফিক্সে ইন্টারঅ্যাকশন যোগ করা

D3.js-এ আপনি SVG গ্রাফিক্সের উপর ইন্টারঅ্যাকশন যেমন মাউস হোভার, ক্লিক ইভেন্ট ইত্যাদি যোগ করতে পারেন।

উদাহরণ: হোভার ইফেক্ট

// বারগুলোর উপর হোভার ইফেক্ট
svg.selectAll("rect")
   .on("mouseover", function(event, d) {
       d3.select(this).style("fill", "orange");
   })
   .on("mouseout", function(event, d) {
       d3.select(this).style("fill", "steelblue");
   });

এটি প্রতিটি বারের উপর মাউস হোভার করলে বারের রঙ পরিবর্তন করবে।

D3.js এর মাধ্যমে SVG গ্রাফিক্স তৈরি করা একটি শক্তিশালী পদ্ধতি যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে। আপনি SVG এলিমেন্ট (যেমন rect, circle, line, text) ব্যবহার করে গ্রাফিক্স তৈরি করতে পারেন এবং CSS বা JavaScript দিয়ে তাদের উপর স্টাইলিং এবং ইন্টারঅ্যাকশন যোগ করতে পারেন। D3.js আপনাকে DOM-এ ডেটা বাইন্ডিং এবং পরিবর্তন করতে সাহায্য করে, যা একটি ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়াল তৈরি করতে সহায়ক।