DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর ওপর ভিত্তি করে তৈরি এবং এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশনের জন্য ইন্টারেক্টিভ ফিচার যেমন Brush, Pan, এবং Zoom প্রয়োগ করা যায়। এই ফিচারগুলো ব্যবহারকারীকে ডেটা বিশ্লেষণের সময় ডেটাকে আরো বিস্তারিতভাবে দেখতে সাহায্য করে।
এই গাইডে, আমরা দেখব কিভাবে Brush, Pan, এবং Zoom ইন্টারঅ্যাকশন টেকনিক DC.js ব্যবহার করে বাস্তবায়ন করা যায়।
১. প্রয়োজনীয় ফাইল যুক্ত করা
প্রথমে, DC.js, D3.js, এবং Crossfilter এর সিডিএন লিঙ্ক যোগ করতে হবে। এই লাইব্রেরিগুলি আপনাকে ডেটা ভিজ্যুয়ালাইজেশন এবং ইন্টারেক্টিভ চার্ট তৈরি করতে সহায়তা করবে।
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
২. HTML ফাইল তৈরি
এখানে একটি সাধারণ HTML ফাইল তৈরি করা হয়েছে যেখানে বিভিন্ন চার্ট এবং Brush, Pan, এবং Zoom এর জন্য জায়গা রাখা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Advanced Interactions: Brush, Pan, Zoom</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
</head>
<body>
<h1>DC.js: Brush, Pan, Zoom</h1>
<div id="bar-chart"></div>
<div id="line-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
৩. ডেটাসেট তৈরি এবং DC.js সেটআপ
এখন ডেটাসেট তৈরি করে, Crossfilter এবং DC.js এর মাধ্যমে একটি Bar Chart এবং Line Chart তৈরি করা হবে। এগুলোর মধ্যে আমরা Brush, Pan, এবং Zoom ইন্টারঅ্যাকশন যুক্ত করব।
ডেটাসেট উদাহরণ
const data = [
{ date: "2023-12-01", value: 30 },
{ date: "2023-12-02", value: 50 },
{ date: "2023-12-03", value: 70 },
{ date: "2023-12-04", value: 20 },
{ date: "2023-12-05", value: 60 }
];
Crossfilter এবং DC.js সেটআপ
const ndx = crossfilter(data);
// date এর উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
// value এর উপর গ্রুপ তৈরি
const valueGroup = dateDimension.group().reduceSum(d => d.value);
৪. Bar Chart এবং Line Chart তৈরি
Bar Chart তৈরি এবং Zoom/Pan ইনক্লুড করা
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleBand()) // x-axis scale
.xUnits(dc.units.ordinal)
.elasticY(true)
.xAxisLabel("Date")
.yAxisLabel("Value")
.on("zoom", function() {
// Zoom/Brush update handling
console.log("Zoom or brush updated");
});
Line Chart তৈরি এবং Zoom/Pan ইনক্লুড করা
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")])) // time scale
.xUnits(d3.timeDays)
.elasticY(true)
.xAxisLabel("Date")
.yAxisLabel("Value")
.on("zoom", function() {
// Zoom handling
console.log("Zoom applied on Line Chart");
});
৫. Brush, Pan, and Zoom এর জন্য কাস্টমাইজেশন
Brush (চয়ন) ইন্টারঅ্যাকশন
Brush এর মাধ্যমে আপনি ডেটার একটি নির্দিষ্ট অংশ নির্বাচন করতে পারেন। এই ইন্টারঅ্যাকশন ব্যবহারকারীদের জন্য ডেটার নির্দিষ্ট অংশে ফোকাস করা সহজ করে।
barChart
.brushOn(true) // Brush সক্রিয় করুন
.on("brushend", function() {
console.log("Brush updated");
});
এটি Bar Chart এর উপর ব্রাশ যোগ করবে, যার মাধ্যমে ব্যবহারকারী নির্দিষ্ট একটি অংশ নির্বাচন করতে পারবেন।
Zoom (যতটা বড় বা ছোট করা)
Zoom ব্যবহারকারীদের চার্টের স্কেল পরিবর্তন করতে সহায়ক হয়। DC.js এর মাধ্যমে, আমরা zoom ইভেন্টে ডেটা পুনরায় রেন্ডার করতে পারি।
lineChart
.zoomable(true) // Zoom সক্ষম করুন
.on("zoom", function() {
console.log("Zoom applied");
});
এটি Line Chart এর জন্য জুম সক্ষম করবে, যাতে ব্যবহারকারী চার্টের স্কেল বাড়াতে বা কমাতে পারেন।
৬. Full Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js: Brush, Pan, Zoom</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
</head>
<body>
<h1>DC.js: Brush, Pan, Zoom</h1>
<div id="bar-chart"></div>
<div id="line-chart"></div>
<script>
// ডেটাসেট
const data = [
{ date: "2023-12-01", value: 30 },
{ date: "2023-12-02", value: 50 },
{ date: "2023-12-03", value: 70 },
{ date: "2023-12-04", value: 20 },
{ date: "2023-12-05", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const valueGroup = dateDimension.group().reduceSum(d => d.value);
// Bar Chart তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.elasticY(true)
.xAxisLabel("Date")
.yAxisLabel("Value")
.brushOn(true) // Brush ব্যবহার
.on("brushend", function() {
console.log("Brush updated");
});
// Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")])) // time scale
.xUnits(d3.timeDays)
.elasticY(true)
.xAxisLabel("Date")
.yAxisLabel("Value")
.zoomable(true) // Zoom সক্ষম করা
.on("zoom", function() {
console.log("Zoom applied");
});
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Brush: একটি নির্দিষ্ট ডেটা অংশ নির্বাচন করার জন্য ব্যবহার করা হয়।
- Pan: স্কেল পরিবর্তন এবং চার্টে প্যানিং এর মাধ্যমে ব্যবহারকারীরা ডেটার বিভিন্ন অংশ দেখতে পারেন।
- Zoom: চার্টের স্কেল পরিবর্তন করে ব্যবহারকারীদের আরও বিস্তারিতভাবে ডেটা দেখতে সাহায্য করে।
- DC.js এবং D3.js এর মাধ্যমে এই ইন্টারঅ্যাকশনগুলো সহজেই যোগ করা যায় এবং ব্যবহারকারীদের জন্য ইন্টারেক্টিভ ডেটা বিশ্লেষণের অভিজ্ঞতা উন্নত করা যায়।
এগুলি DC.js এর ইন্টারেক্টিভ চার্ট তৈরি করার কিছু মূল কৌশল, যা ডেটা বিশ্লেষণকে আরো শক্তিশালী এবং ব্যবহারকারী বান্ধব করে তোলে।
Read more
