D3.js দিয়ে একটি সহজ প্রজেক্ট তৈরি করা আপনার শেখার প্রক্রিয়ার প্রথম ধাপ হতে পারে। এখানে একটি বেসিক বার চার্ট তৈরির মাধ্যমে D3.js ব্যবহার শেখানোর পদ্ধতি দেখানো হলো।
ধাপ ১: প্রজেক্টের কাঠামো তৈরি
প্রথমে একটি ফোল্ডার তৈরি করুন যেখানে আপনার প্রজেক্টের ফাইলগুলো থাকবে।
ফোল্ডারের কাঠামো:
my-d3-project/
|-- index.html
|-- style.css
|-- script.js
ধাপ ২: HTML ফাইল তৈরি
index.html
<!DOCTYPE html>
<html>
<head>
<title>My First D3.js Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My First D3.js Bar Chart</h1>
<svg width="600" height="400"></svg>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="script.js"></script>
</body>
</html>
HTML ফাইলের ভূমিকা:
- একটি
<svg>ট্যাগ ব্যবহার করা হয়েছে যেখানে বার চার্ট রেন্ডার হবে। - D3.js এর CDN লোড করা হয়েছে এবং
script.jsফাইল লিঙ্ক করা হয়েছে।
ধাপ ৩: CSS ফাইল তৈরি
style.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
svg {
margin: 0 auto;
display: block;
background-color: #f4f4f4;
}
.bar {
fill: steelblue;
}
.bar:hover {
fill: orange;
}
CSS ফাইলের ভূমিকা:
- SVG-এর ব্যাকগ্রাউন্ড এবং বারগুলোর রঙ নির্ধারণ করা হয়েছে।
- হোভার করলে বারগুলোর রঙ পরিবর্তনের স্টাইল যোগ করা হয়েছে।
ধাপ ৪: জাভাস্ক্রিপ্ট ফাইল তৈরি
script.js
// ডেটাসেট
const data = [100, 200, 150, 250, 300];
// SVG নির্বাচন
const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");
const barWidth = width / data.length;
// বার চার্ট তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("width", barWidth - 10)
.attr("height", d => d)
.attr("x", (d, i) => i * barWidth)
.attr("y", d => height - d);
জাভাস্ক্রিপ্ট ফাইলের ভূমিকা:
- ডেটাসেট: একটি সাধারণ ডেটাসেট ব্যবহার করা হয়েছে।
- SVG নির্বাচন:
d3.selectএর মাধ্যমে<svg>নির্বাচন করা হয়েছে। - বার চার্ট তৈরি: ডেটার প্রতিটি মান অনুযায়ী বার তৈরি এবং তাদের পজিশন নির্ধারণ করা হয়েছে।
ধাপ ৫: প্রজেক্ট চালানো
- আপনার প্রোজেক্ট ফোল্ডারটি খুলুন।
- ফাইলগুলো সঠিকভাবে লিঙ্ক করা হয়েছে কিনা তা যাচাই করুন।
- একটি ব্রাউজারে
index.htmlফাইলটি ওপেন করুন।
আউটপুট
আপনার ব্রাউজারে একটি বার চার্ট দেখতে পাবেন যেখানে প্রতিটি বার ডেটাসেটের মান অনুযায়ী উচ্চতা পাবে। মাউস হোভার করলে বারগুলোর রঙ পরিবর্তন হবে।
প্রজেক্টের সংক্ষিপ্ত বিবরণ
- HTML: প্রজেক্টের কাঠামো তৈরি।
- CSS: স্টাইলিং এবং ডিজাইন।
- JavaScript (D3.js): ডেটার ভিত্তিতে ভিজ্যুয়াল উপাদান তৈরি।
এই সহজ প্রজেক্টটি আপনাকে D3.js এর মৌলিক ধারণা এবং এর কাজ করার প্রক্রিয়া সম্পর্কে একটি স্পষ্ট ধারণা দেবে। পরবর্তী ধাপে, আপনি এই জ্ঞান ব্যবহার করে আরও জটিল এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়াল তৈরি করতে পারেন।
Content added By
Read more
