D3.js ব্যবহার করে Line Chart তৈরি করা একটি সাধারণ এবং জনপ্রিয় ভিজ্যুয়ালাইজেশন পদ্ধতি। Line Chart সাধারণত কন্টিনিউয়াস ডেটার মধ্যে সম্পর্ক বা প্রবণতা দেখাতে ব্যবহৃত হয়, যেমন সময়ের সাথে সাথে বিক্রির পরিমাণ, তাপমাত্রা পরিবর্তন ইত্যাদি।
D3.js এর মাধ্যমে একটি Line Chart তৈরি করতে, সাধারণত আপনাকে ডেটা, স্কেল, লাইন জেনারেটর এবং SVG উপাদান ব্যবহার করতে হয়। এখানে প্রতিটি পদক্ষেপ বিস্তারিতভাবে আলোচনা করা হয়েছে।
১. প্রয়োজনীয় লাইব্রেরি ইনক্লুড করা
প্রথমেই আপনাকে D3.js লাইব্রেরি আপনার HTML ফাইলে ইনক্লুড করতে হবে। আপনি CDN বা npm ব্যবহার করে এটি অন্তর্ভুক্ত করতে পারেন।
<script src="https://d3js.org/d3.v7.min.js"></script>
২. ডেটা প্রস্তুত করা
Line Chart তৈরির জন্য ডেটা একটি অ্যারে হিসেবে প্রস্তুত করতে হবে। এখানে আমরা একটি সাধারণ ডেটাসেট ব্যবহার করবো যা সময়ের সাথে সাথে কিছু পরিমাণ পরিবর্তন দেখায়।
const data = [
{ date: new Date(2020, 0, 1), value: 30 },
{ date: new Date(2020, 1, 1), value: 40 },
{ date: new Date(2020, 2, 1), value: 35 },
{ date: new Date(2020, 3, 1), value: 50 },
{ date: new Date(2020, 4, 1), value: 60 },
{ date: new Date(2020, 5, 1), value: 80 }
];
এখানে ডেটা দুটি ফিল্ড নিয়ে তৈরি:
date: তারিখ (যে সময়ের ভিত্তিতে চার্ট তৈরি হবে)value: পরিমাণ (যে ডেটা ভ্যালু আমরা চিত্রিত করতে চাই)
৩. SVG এলিমেন্ট তৈরি করা
SVG উপাদান ব্যবহার করে চার্টের ক্যানভাস তৈরি করতে হবে। D3.js এই ক্যানভাসে ডেটা প্লট করবে।
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
// SVG ক্যানভাস তৈরি
const svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
এখানে:
- margin চারপাশে স্পেস সেট করে।
- width এবং height স্কেল এবং ভিউপোর্ট সাইজ নির্ধারণ করে।
- svg ক্যানভাস তৈরি করা হয়, যেখানে আমাদের চার্ট আঁকা হবে।
৪. স্কেল তৈরি করা
স্কেল ব্যবহার করে ডেটাকে SVG ক্যানভাসের পরিসরে রূপান্তরিত করা হয়। এখানে, x অক্ষের জন্য time scale এবং y অক্ষের জন্য linear scale ব্যবহার করা হবে।
// X অক্ষের জন্য সময় স্কেল
const x = d3.scaleTime()
.domain(d3.extent(data, d => d.date)) // ডেটার মধ্যে প্রথম এবং শেষ তারিখ বের করা
.range([0, width]);
// Y অক্ষের জন্য লিনিয়ার স্কেল
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]) // ডেটার মধ্যে সর্বোচ্চ মান বের করা
.range([height, 0]);
এখানে:
- x স্কেল
dateফিল্ডের জন্য সময়ের ভিত্তিতে স্কেল তৈরি করবে। - y স্কেল
valueফিল্ডের জন্য পরিমাণের ভিত্তিতে স্কেল তৈরি করবে।
৫. লাইন জেনারেটর তৈরি করা
D3.js-এ line() ফাংশন ব্যবহার করে একটি লাইন জেনারেটর তৈরি করা হয়, যা ডেটা পয়েন্টগুলির মধ্যে লাইন আঁকবে।
// লাইন জেনারেটর তৈরি
const line = d3.line()
.x(d => x(d.date)) // x অক্ষের জন্য ডেটার তারিখ ব্যবহার করা
.y(d => y(d.value)); // y অক্ষের জন্য ডেটার মান ব্যবহার করা
৬. লাইন চার্ট আঁকা
এখন svg ক্যানভাসে ডেটা আঁকতে হবে। line() ফাংশনটি ব্যবহার করে লাইন আঁকা হবে।
// লাইন আঁকা
svg.append("path")
.data([data])
.enter()
.append("path")
.attr("class", "line")
.attr("d", line) // লাইন জেনারেটরের আউটপুট
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", 2);
এখানে:
pathউপাদান দিয়ে ডেটার লাইন আঁকা হয়।dঅ্যাট্রিবিউটটিline()ফাংশনের আউটপুট হবে, যা লাইনটিকে আঁকবে।
৭. অক্ষ (Axis) যোগ করা
লিনিয়ার এবং টাইম স্কেলগুলোর জন্য অক্ষ (axis) যোগ করা প্রয়োজন।
// X অক্ষ তৈরি
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Y অক্ষ তৈরি
svg.append("g")
.call(d3.axisLeft(y));
এখানে:
- axisBottom(x) ব্যবহার করে x অক্ষ এবং axisLeft(y) ব্যবহার করে y অক্ষ তৈরি করা হচ্ছে।
৮. সম্পূর্ণ কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3.js Line Chart</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.line {
fill: none;
stroke: steelblue;
stroke-width: 2;
}
</style>
</head>
<body>
<script>
const data = [
{ date: new Date(2020, 0, 1), value: 30 },
{ date: new Date(2020, 1, 1), value: 40 },
{ date: new Date(2020, 2, 1), value: 35 },
{ date: new Date(2020, 3, 1), value: 50 },
{ date: new Date(2020, 4, 1), value: 60 },
{ date: new Date(2020, 5, 1), value: 80 }
];
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([height, 0]);
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.value));
svg.append("path")
.data([data])
.enter()
.append("path")
.attr("class", "line")
.attr("d", line);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
</script>
</body>
</html>
D3.js এর মাধ্যমে Line Chart তৈরি করা একটি সাধারণ এবং কার্যকর উপায় ডেটা ভিজ্যুয়ালাইজ করতে। এই প্রক্রিয়াটি ডেটা প্রস্তুতি, স্কেল সেটআপ, লেখন স্কেল এবং SVG এলিমেন্ট ব্যবহারের মাধ্যমে সম্পন্ন হয়। এটি ডেটার প্রবণতা বা সম্পর্ক সহজেই দেখানোর জন্য একটি চমৎকার টুল।
Read more
