D3 এর মাধ্যমে Simple Bar Chart তৈরি

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

১. ডেটাসেট প্রস্তুত

বার চার্ট তৈরি করতে প্রথমে আমাদের ডেটা তৈরি করতে হবে। সাধারণত একটি অ্যারে বা অবজেক্ট অ্যারে ব্যবহার করা হয়, যাতে প্রতিটি মান একটি বারকে প্রতিনিধিত্ব করে।

উদাহরণ ডেটাসেট:

const data = [30, 80, 45, 60, 20, 90, 55];

এই ডেটাসেটটি সাতটি মানের একটি অ্যারে, যেগুলোর প্রত্যেকটি একটি বারকে প্রতিনিধিত্ব করবে।

২. SVG এলিমেন্ট তৈরি

D3.js এর মাধ্যমে প্রথমে একটি SVG এলিমেন্ট তৈরি করতে হবে, যেখানে আমাদের বার চার্টটি থাকবে। এটি একটি নির্দিষ্ট প্রস্থ (width) এবং উচ্চতা (height) নির্ধারণ করে।

উদাহরণ:

const svgWidth = 500;
const svgHeight = 300;

const svg = d3.select("body").append("svg")
  .attr("width", svgWidth)
  .attr("height", svgHeight);

এটি একটি svg উপাদান তৈরি করবে যার প্রস্থ 500px এবং উচ্চতা 300px।

৩. বার চার্ট তৈরি

বার চার্ট তৈরি করতে প্রতিটি ডেটা পয়েন্টের জন্য একটি <rect> (বর্গাকার/আয়তাকার) তৈরি করতে হবে। প্রতিটি rect এর জন্য x, y, width, এবং height অ্যাট্রিবিউট নির্ধারণ করা হবে।

• x: বারটির অনুভূমিক অবস্থান।
• y: বারটির উল্লম্ব অবস্থান।
• width: বারটির প্রস্থ।
• height: বারটির উচ্চতা।

কোড:

const barWidth = 40;
const barPadding = 5;

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * (barWidth + barPadding)) // X অবস্থান নির্ধারণ
  .attr("y", d => svgHeight - d) // Y অবস্থান এবং উচ্চতা নির্ধারণ
  .attr("width", barWidth) // প্রস্থ
  .attr("height", d => d) // উচ্চতা
  .attr("fill", "steelblue"); // রঙ

এটি বারগুলির জন্য rect উপাদান তৈরি করবে, যেখানে x দ্বারা বারের অনুভূমিক অবস্থান এবং y দ্বারা উল্লম্ব অবস্থান নির্ধারণ করা হবে। width এবং height দ্বারা বারের আকার নির্ধারণ হবে।

৪. X এবং Y অক্ষ তৈরি করা

একটি বার চার্টে X এবং Y অক্ষ থাকতে হবে যাতে ডেটার মান বোঝা যায়। D3.js এ axis মেথড ব্যবহার করে অক্ষ তৈরি করা হয়।

৪.১ Y অক্ষ (Value axis)

Y অক্ষটি বারের উচ্চতা নির্ধারণ করে, তাই এখানে স্কেল ব্যবহার করে ডেটার মানকে মানানসই উচ্চতায় রূপান্তর করা হবে।

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)]) // ডেটার সর্বোচ্চ মান
  .range([0, svgHeight]); // SVG এর উচ্চতা অনুযায়ী মান

// Y অক্ষ তৈরি
const yAxis = d3.axisLeft(yScale);

svg.append("g")
  .attr("transform", "translate(40,0)") // X অক্ষের কাছে Y অক্ষের অবস্থান
  .call(yAxis);

৪.২ X অক্ষ (Category axis)

X অক্ষটি প্রতিটি বারকে আলাদা করতে ব্যবহৃত হয়।

const xScale = d3.scaleBand()
  .domain(d3.range(data.length)) // ডেটার সংখ্যা
  .range([0, svgWidth]) // SVG এর প্রস্থ অনুযায়ী
  .padding(0.1); // বারগুলোর মধ্যে গ্যাপ

// X অক্ষ তৈরি
const xAxis = d3.axisBottom(xScale).tickFormat(i => i + 1); // টিক মার্কে সংখ্যা 1 থেকে শুরু হবে

svg.append("g")
  .attr("transform", "translate(0," + (svgHeight - 20) + ")") // Y অক্ষের নিচে X অক্ষ
  .call(xAxis);

এটি X অক্ষ তৈরি করবে, যেখানে বারগুলির জন্য একটি নির্দিষ্ট জায়গা এবং লেবেল থাকবে।

সম্পূর্ণ কোড:

const data = [30, 80, 45, 60, 20, 90, 55];

const svgWidth = 500;
const svgHeight = 300;
const barWidth = 40;
const barPadding = 5;

const svg = d3.select("body").append("svg")
  .attr("width", svgWidth)
  .attr("height", svgHeight);

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

const xScale = d3.scaleBand()
  .domain(d3.range(data.length)) 
  .range([0, svgWidth])
  .padding(0.1);

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => xScale(i)) 
  .attr("y", d => svgHeight - yScale(d)) 
  .attr("width", barWidth)
  .attr("height", d => yScale(d))
  .attr("fill", "steelblue");

const yAxis = d3.axisLeft(yScale);
svg.append("g")
  .attr("transform", "translate(40,0)")
  .call(yAxis);

const xAxis = d3.axisBottom(xScale).tickFormat(i => i + 1);
svg.append("g")
  .attr("transform", "translate(0," + (svgHeight - 20) + ")")
  .call(xAxis);

এটি একটি সহজ বার চার্ট তৈরির প্রক্রিয়া যেখানে D3.js ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশন করা হয়েছে। এখানে ডেটাকে বারগুলির মাধ্যমে চিত্রিত করা হয়েছে এবং X ও Y অক্ষ যোগ করে ডেটার মান সহজে বোঝানো হয়েছে। এই প্রক্রিয়া অন্য যেকোনো ধরনের ডেটা ভিজ্যুয়ালাইজেশন তৈরির জন্য ভিত্তি হিসেবে ব্যবহার করা যেতে পারে।