Composite এবং Overlay Chart এর জন্য Data Synchronization

DC.js ব্যবহার করে Composite এবং Overlay charts তৈরি করার সময়, বিভিন্ন চার্টের মধ্যে Data Synchronization খুবই গুরুত্বপূর্ণ। এর মাধ্যমে আপনি একাধিক চার্টকে একে অপরের সাথে সিঙ্ক্রোনাইজ করতে পারেন, যাতে একটিতে ফিল্টার বা সিলেকশন করার মাধ্যমে অন্য চার্টগুলোর ডেটা স্বয়ংক্রিয়ভাবে আপডেট হয়।

Composite Chart কী?

Composite Chart একটি একক চার্টের মধ্যে একাধিক ভিন্ন ধরনের চার্ট একত্রিত করে। এটি সাধারণত বার চার্ট, লাইন চার্ট, এবং অন্যান্য চার্টের কম্বিনেশন হতে পারে, যেখানে একাধিক ডেটা গ্রুপের তুলনা করা হয়।

Overlay Chart কী?

Overlay Chart হলো একটি চার্টের মধ্যে অন্য একটি চার্ট যোগ করা, সাধারণত একাধিক লাইন চার্ট বা বার চার্ট একে অপরের উপরে চিত্রিত করা হয়। Overlay chart সাধারণত একাধিক ডেটা সিরিজের তুলনা করার জন্য ব্যবহৃত হয়।

DC.js এর মাধ্যমে Data Synchronization

DC.js ব্যবহার করে Composite এবং Overlay Chart তৈরির সময় Data Synchronization করা খুবই সহজ, কারণ DC.js এর নিজস্ব crossfilter ডেটা ফিল্টারিং এবং renderAll() ফাংশন রয়েছে, যা একাধিক চার্টের মধ্যে সিঙ্ক্রোনাইজেশন সরবরাহ করে।

Composite Chart তৈরি করা

Composite Chart তৈরি করতে, আপনি একাধিক চার্ট (যেমন বার চার্ট এবং লাইন চার্ট) একত্রে ব্যবহার করেন এবং একই dimension এবং group ব্যবহার করে তাদেরকে সিঙ্ক্রোনাইজ করেন।

উদাহরণ: Composite Chart

const compositeChart = dc.compositeChart("#composite-chart");

const barChart = dc.barChart("#bar-chart");
const lineChart = dc.lineChart("#line-chart");

compositeChart
    .width(800)
    .height(400)
    .dimension(dimension)
    .group(group)
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal)
    .compose([
        barChart, // বার চার্ট
        lineChart  // লাইন চার্ট
    ])
    .yAxisLabel("Values")
    .xAxisLabel("Categories");

dc.renderAll();

এখানে:

• compose() ফাংশন ব্যবহার করে দুটি চার্ট (বার এবং লাইন) একত্রে রাখা হয়েছে।
• Composite chart এর মাধ্যমে একাধিক চার্টের মধ্যে সিঙ্ক্রোনাইজেশন নিশ্চিত করা হয়েছে।

Overlay Chart তৈরি করা

Overlay Chart তৈরি করতে, lineChart() এবং barChart() এর মধ্যে একটি overlapping লাইন চার্ট তৈরি করা হয়। একাধিক চার্ট একই এক্স-অক্ষ এবং ওয়াই-অক্ষ ব্যবহার করে একে অপরের উপরে দেখানো হয়।

উদাহরণ: Overlay Chart

const overlayChart = dc.lineChart("#overlay-chart");

overlayChart
    .width(800)
    .height(400)
    .dimension(dimension)
    .group(group1, "Group 1")  // প্রথম গ্রুপ
    .stack(group2, "Group 2")  // দ্বিতীয় গ্রুপ
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal)
    .yAxisLabel("Values")
    .xAxisLabel("Categories");

dc.renderAll();

এখানে:

• stack() ফাংশন ব্যবহার করে দুটি গ্রুপের ডেটা একে অপরের উপর চিত্রিত করা হয়।
• Overlay chart ব্যবহার করে একাধিক গ্রুপের তুলনা করা হয়।

Data Synchronization

DC.js এর crossfilter এবং renderAll() ফাংশন দিয়ে ডেটার সিঙ্ক্রোনাইজেশন করা হয়। যখন একটি চার্টে ফিল্টার করা হয়, তখন renderAll() ফাংশনটি অন্যান্য চার্টগুলোও আপডেট করে।

উদাহরণ: Data Synchronization

const ndx = crossfilter(data); // ডেটা লোড

// ডাইমেনশন এবং গ্রুপ তৈরি
const dimension = ndx.dimension(d => d.category);
const group1 = dimension.group().reduceSum(d => d.value1);
const group2 = dimension.group().reduceSum(d => d.value2);

// Composite chart
const compositeChart = dc.compositeChart("#composite-chart");
compositeChart
    .width(800)
    .height(400)
    .dimension(dimension)
    .group(group1)
    .x(d3.scaleBand())
    .compose([
        dc.barChart("#bar-chart").dimension(dimension).group(group1),
        dc.lineChart("#line-chart").dimension(dimension).group(group2)
    ])
    .render();

// Overlay chart
const overlayChart = dc.lineChart("#overlay-chart");
overlayChart
    .width(800)
    .height(400)
    .dimension(dimension)
    .group(group1, "Group 1")
    .stack(group2, "Group 2")
    .render();

// Render all charts
dc.renderAll();

এখানে:

• crossfilter ডেটার সিঙ্ক্রোনাইজেশন নিশ্চিত করে।
• renderAll() ফাংশনটি সমস্ত চার্ট আপডেট করে, যাতে ডেটা সিঙ্ক্রোনাইজ থাকে।

সারাংশ

• Composite Chart: একাধিক চার্টকে একত্রে উপস্থাপন করা হয় এবং তাদের মধ্যে সিঙ্ক্রোনাইজেশন করা হয়।
• Overlay Chart: একাধিক চার্টকে একে অপরের উপরে চিত্রিত করা হয়।
• Data Synchronization: DC.js এর crossfilter এবং renderAll() ফাংশন ব্যবহার করে একাধিক চার্টে ডেটা সিঙ্ক্রোনাইজ করা হয়, যাতে এক চার্টে পরিবর্তন হলে অন্য চার্টও আপডেট হয়।

DC.js ব্যবহার করে Composite এবং Overlay charts তৈরি করলে, আপনি সহজেই একাধিক ডেটা সিরিজের তুলনা করতে পারবেন এবং ডেটার মধ্যে সম্পর্ক আরো স্পষ্টভাবে বিশ্লেষণ করতে পারবেন।