D3.js ব্যবহার করে Multi-series Line Chart এবং Multi-series Bar Chart তৈরি করা সম্ভব, যেখানে একাধিক ডেটা সিরিজ বা ক্যাটেগরি উপস্থাপন করা হয়। এই ধরনের চার্ট বিভিন্ন ডেটা পয়েন্টের তুলনা করার জন্য খুবই উপকারী।
এখানে আমরা দুইটি উদাহরণ দেখব:
- Multi-series Line Chart: যেখানে একাধিক লাইন গ্রাফ ব্যবহার করে বিভিন্ন ডেটা সিরিজ প্রদর্শন করা হয়।
- Multi-series Bar Chart: যেখানে একাধিক বার সিরিজ দিয়ে ডেটা তুলনা করা হয়।
১. Multi-series Line Chart
Multi-series Line Chart-এ একাধিক লাইন গ্রাফ থাকবে, যেখানে প্রতিটি সিরিজের জন্য আলাদা রং এবং ডেটা পয়েন্ট থাকবে। এটি সময় বা অন্যান্য ভেরিয়েবলের উপর একাধিক ডেটা সিরিজের পরিবর্তন দেখানোর জন্য উপযুক্ত।
উদাহরণ: Multi-series Line Chart
HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-series Line Chart with D3.js</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>Multi-series Line Chart with D3.js</h1>
<div id="chart"></div>
<script src="multiSeriesLineChart.js"></script>
</body>
</html>
JavaScript ফাইল (multiSeriesLineChart.js):
// ডেটাসেট (Multiple series)
const data = [
{ year: 2000, series1: 30, series2: 40 },
{ year: 2001, series1: 50, series2: 60 },
{ year: 2002, series1: 70, series2: 80 },
{ year: 2003, series1: 90, series2: 100 },
{ year: 2004, series1: 110, series2: 120 }
];
// SVG ক্যানভাস তৈরি
const width = 500, height = 300;
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
// X এবং Y স্কেল
const x = d3.scaleLinear()
.domain([2000, 2004]) // ডেটার রেঞ্জ
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, 130]) // ডেটার রেঞ্জ
.range([height - margin.bottom, margin.top]);
// লাইন জেনারেটর
const line = d3.line()
.x(d => x(d.year))
.y(d => y(d.series1));
const line2 = d3.line()
.x(d => x(d.year))
.y(d => y(d.series2));
// X এবং Y অক্ষ তৈরি
svg.append("g")
.selectAll(".x-axis")
.data([data])
.enter()
.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.selectAll(".y-axis")
.data([data])
.enter()
.append("g")
.attr("class", "y-axis")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y));
// লাইন ১ এবং লাইন ২ আঁকা
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", line)
.style("fill", "none")
.style("stroke", "blue")
.style("stroke-width", 2);
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", line2)
.style("fill", "none")
.style("stroke", "orange")
.style("stroke-width", 2);
ব্যাখ্যা:
- এখানে দুটি ডেটা সিরিজ রয়েছে (
series1এবংseries2)। lineএবংline2জেনারেটর দুটি আলাদা আলাদা লাইন তৈরি করছে।xস্কেল বছরের জন্য এবংyস্কেল ডেটা সিরিজের জন্য ব্যবহার করা হয়েছে।- দুটি আলাদা লাইন রঙ (নীল এবং কমলা) দিয়ে প্রদর্শিত হচ্ছে।
২. Multi-series Bar Chart
Multi-series Bar Chart-এ একাধিক বার সিরিজ থাকবে এবং এই সিরিজগুলো সাধারণত পাশে পাশে প্রদর্শিত হয়। এটি তুলনামূলকভাবে ডেটা সিরিজের মধ্যে পার্থক্য দেখানোর জন্য ব্যবহৃত হয়।
উদাহরণ: Multi-series Bar Chart
JavaScript ফাইল (multiSeriesBarChart.js):
// ডেটাসেট (Multiple series)
const data = [
{ year: 2000, series1: 30, series2: 40 },
{ year: 2001, series1: 50, series2: 60 },
{ year: 2002, series1: 70, series2: 80 },
{ year: 2003, series1: 90, series2: 100 },
{ year: 2004, series1: 110, series2: 120 }
];
// SVG ক্যানভাস তৈরি
const width = 500, height = 300;
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height);
// X এবং Y স্কেল
const x0 = d3.scaleBand()
.domain(data.map(d => d.year))
.range([margin.left, width - margin.right])
.padding(0.1);
const x1 = d3.scaleBand()
.domain(["series1", "series2"])
.range([0, x0.bandwidth()])
.padding(0.05);
const y = d3.scaleLinear()
.domain([0, 130]) // ডেটার রেঞ্জ
.range([height - margin.bottom, margin.top]);
// X এবং Y অক্ষ তৈরি
svg.append("g")
.selectAll(".x-axis")
.data([data])
.enter()
.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x0));
svg.append("g")
.selectAll(".y-axis")
.data([data])
.enter()
.append("g")
.attr("class", "y-axis")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y));
// বার চার্ট তৈরি
svg.append("g")
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", d => `translate(${x0(d.year)}, 0)`)
.selectAll("rect")
.data(d => [d.series1, d.series2])
.enter()
.append("rect")
.attr("x", (d, i) => x1(i === 0 ? "series1" : "series2"))
.attr("y", d => y(d))
.attr("width", x1.bandwidth())
.attr("height", d => height - margin.bottom - y(d))
.style("fill", (d, i) => i === 0 ? "steelblue" : "orange");
ব্যাখ্যা:
- এখানে আমরা দুটি সিরিজের বার চার্ট তৈরি করছি (
series1এবংseries2)। x0স্কেল বছরের জন্য এবংx1স্কেল সিরিজের জন্য ব্যবহৃত হচ্ছে।bandwidth()মেথড ব্যবহার করে বারগুলোর প্রস্থ এবং তাদের স্থান নির্ধারণ করা হয়েছে।- দুটি সিরিজের জন্য আলাদা রং (নীল এবং কমলা) ব্যবহার করা হয়েছে।
Multi-series Line Chart এবং Multi-series Bar Chart তৈরি করতে D3.js-এর স্কেল, ডেটা বাইন্ডিং, এবং আর্কিটেকচারাল কৌশল ব্যবহার করা হয়।
- Line Chart-এ একাধিক লাইন দিয়ে সময় বা অন্যান্য ভেরিয়েবলের উপর বিভিন্ন ডেটা সিরিজ দেখানো হয়।
- Bar Chart-এ একাধিক বার সিরিজ ব্যবহার করে ডেটা তুলনা করা হয়, যেখানে প্রতিটি সিরিজ একে অপরের পাশে প্রদর্শিত হয়। D3.js এই ধরনের চার্ট তৈরির জন্য অত্যন্ত নমনীয় এবং কাস্টমাইজেবল।
Content added By
Read more
