DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর ওপর ভিত্তি করে তৈরি এবং ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং ডাইনামিক করতে সাহায্য করে। ডেটা পয়েন্টের size (আকার) এবং color encoding (রঙের মাধ্যমে ডেটা বোঝানো) কাস্টমাইজ করা যায় যাতে ডেটার বিভিন্ন দিক সহজে বোঝা যায়। এই গাইডে, আমরা দেখব কিভাবে 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 ফাইল তৈরি
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Data Points Size and Color Encoding</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 Data Points Size and Color Encoding</h1>
<div id="scatter-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
৩. ডেটাসেট তৈরি করা
আমরা একটি সহজ ডেটাসেট ব্যবহার করব, যেখানে প্রতিটি ডেটা পয়েন্টের জন্য দুটি সংখ্যাসূচক মান (যেমন value1 এবং value2) এবং একটি ক্যাটেগরি (যেমন category) থাকবে।
const data = [
{ category: "A", value1: 30, value2: 20 },
{ category: "B", value1: 40, value2: 60 },
{ category: "C", value1: 50, value2: 70 },
{ category: "A", value1: 60, value2: 80 },
{ category: "B", value1: 70, value2: 90 },
{ category: "C", value1: 80, value2: 40 },
{ category: "A", value1: 90, value2: 30 },
{ category: "B", value1: 100, value2: 50 },
{ category: "C", value1: 110, value2: 60 }
];
৪. Crossfilter এবং DC.js সেটআপ
const ndx = crossfilter(data);
// value1 এবং value2 এর উপর ডাইমেনশন তৈরি
const value1Dimension = ndx.dimension(d => d.value1);
const value2Dimension = ndx.dimension(d => d.value2);
// value1 এবং value2 এর জন্য গ্রুপ তৈরি
const value1Group = value1Dimension.group();
const value2Group = value2Dimension.group();
৫. Scatter Chart তৈরি করা
এখন আমরা DC.js দিয়ে একটি Scatter Chart তৈরি করব যেখানে data points এর আকার (size) এবং রঙ (color) কাস্টমাইজ করা হবে।
const scatterChart = dc.scatterPlot("#scatter-chart");
scatterChart
.width(600) // চার্টের প্রস্থ
.height(400) // চার্টের উচ্চতা
.x(d3.scaleLinear().domain([0, 120])) // X-অক্ষের স্কেল
.y(d3.scaleLinear().domain([0, 120])) // Y-অক্ষের স্কেল
.dimension(value1Dimension) // X-অক্ষের জন্য ডাইমেনশন
.group(value2Group) // Y-অক্ষের জন্য গ্রুপ
.colorAccessor(d => d.key) // রঙ কাস্টমাইজেশন
.colors(d3.scaleOrdinal(d3.schemeCategory10)) // রঙের স্কিম
.symbolSize(d => d.key * 2) // আকার কাস্টমাইজেশন
.xAxisLabel("Value 1") // X-অক্ষের লেবেল
.yAxisLabel("Value 2") // Y-অক্ষের লেবেল
.render();
কাস্টমাইজেশন:
- রঙ (Color Encoding):
colorAccessor(d => d.key)এবংcolors(d3.scaleOrdinal(d3.schemeCategory10))ব্যবহার করে ডেটা পয়েন্টের জন্য রঙ কাস্টমাইজ করা হয়েছে। এখানে ক্যাটেগরি অনুযায়ী রঙ নির্ধারণ করা হয়েছে। - আকার (Size):
symbolSize(d => d.key * 2)দিয়ে ডেটা পয়েন্টের আকার কাস্টমাইজ করা হয়েছে। এখানেkeyমানের ভিত্তিতে আকার বৃদ্ধি বা কমানো হয়েছে। - x এবং y অ্যাক্সেসর:
d3.scaleLinear()ব্যবহার করে X এবং Y অক্ষের স্কেল কাস্টমাইজ করা হয়েছে, যেখানে ডেটা পয়েন্টের মান অনুযায়ী সেগুলির অবস্থান নির্ধারণ করা হয়।
৬. সম্পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Data Points Size and Color Encoding</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 Data Points Size and Color Encoding</h1>
<div id="scatter-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value1: 30, value2: 20 },
{ category: "B", value1: 40, value2: 60 },
{ category: "C", value1: 50, value2: 70 },
{ category: "A", value1: 60, value2: 80 },
{ category: "B", value1: 70, value2: 90 },
{ category: "C", value1: 80, value2: 40 },
{ category: "A", value1: 90, value2: 30 },
{ category: "B", value1: 100, value2: 50 },
{ category: "C", value1: 110, value2: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const value1Dimension = ndx.dimension(d => d.value1);
const value2Dimension = ndx.dimension(d => d.value2);
const value1Group = value1Dimension.group();
const value2Group = value2Dimension.group();
// Scatter Chart তৈরি
const scatterChart = dc.scatterPlot("#scatter-chart");
scatterChart
.width(600)
.height(400)
.x(d3.scaleLinear().domain([0, 120]))
.y(d3.scaleLinear().domain([0, 120]))
.dimension(value1Dimension)
.group(value2Group)
.colorAccessor(d => d.key)
.colors(d3.scaleOrdinal(d3.schemeCategory10))
.symbolSize(d => d.key * 2)
.xAxisLabel("Value 1")
.yAxisLabel("Value 2")
.render();
</script>
</body>
</html>
৭. কাস্টমাইজেশন উপকারিতা
- Size Encoding: ডেটা পয়েন্টের আকার কাস্টমাইজ করে ডেটার গুরুত্ব বা মানের উপর ভিত্তি করে ভিজ্যুয়াল পার্থক্য তৈরি করা যায়।
- Color Encoding: বিভিন্ন ক্যাটেগরি বা ডেটা পয়েন্টের জন্য আলাদা রঙ ব্যবহার করে ডেটাকে সহজে শ্রেণীবদ্ধ এবং বিশ্লেষণ করা যায়।
- Dynamic Interaction: DC.js এর সাথে Crossfilter ব্যবহারের মাধ্যমে ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করা যায়, যেখানে ডেটা পয়েন্টের আকার এবং রঙ ফিল্টারিং এবং ইনপুটের মাধ্যমে পরিবর্তিত হতে পারে।
সারাংশ
- DC.js দিয়ে scatter plots এর আকার এবং রঙ কাস্টমাইজ করা সহজ।
- Size Encoding এবং Color Encoding এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশনে আরও বেশি তথ্য প্রদান করা সম্ভব।
- Crossfilter এর সাহায্যে ডেটা ফিল্টার এবং গ্রুপ করা যায়, যা ইনটেরেক্টিভ চার্ট তৈরি করতে সহায়ক।
Content added By
Read more
