Composite এবং Overlay চার্ট

ডিসি.জেএস (DC.js) - Web Development

292

DC.js একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়, বিশেষ করে D3.js এবং Crossfilter এর সাথে একত্রে। Composite এবং Overlay চার্ট হল ডেটার বিভিন্ন দিক বা সিরিজ একসঙ্গে ভিজ্যুয়ালাইজ করার উপায়, যা ডেটার তুলনা এবং বিশ্লেষণ করতে সাহায্য করে। এই দুইটি চার্ট একাধিক গ্রুপের ডেটা একই চার্টে প্রস্থাপন করতে সহায়ক।

১. Composite Chart

Composite Chart একটি চার্ট যেখানে একাধিক Line Charts বা Bar Charts একত্রে প্রদর্শিত হয়। এটি বিভিন্ন ডেটা সিরিজের মধ্যে সম্পর্ক দেখতে এবং তুলনা করতে ব্যবহৃত হয়। DC.js এ Composite Chart তৈরির জন্য lineChart বা barChart এর মধ্যে একটি সিরিজ স্ট্যাক করা হয়।

Composite Chart কাস্টমাইজেশন উদাহরণ

ডেটাসেট তৈরি:

const data = [
    { date: "2023-01-01", valueA: 30, valueB: 50 },
    { date: "2023-02-01", valueA: 40, valueB: 60 },
    { date: "2023-03-01", valueA: 50, valueB: 70 },
    { date: "2023-04-01", valueA: 60, valueB: 80 },
    { date: "2023-05-01", valueA: 70, valueB: 90 }
];

Crossfilter ইন্ডেক্স এবং ডাইমেনশন তৈরি:

const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => new Date(d.date));
const valueAGroup = dateDimension.group().reduceSum(d => d.valueA);
const valueBGroup = dateDimension.group().reduceSum(d => d.valueB);

Composite Chart (Line Chart with multiple series):

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

compositeChart
    .width(800)
    .height(400)
    .dimension(dateDimension)
    .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")]))
    .xUnits(d3.timeMonths)
    .yAxisLabel("Value")
    .xAxisLabel("Date")
    .legend(dc.legend()) // লেজেন্ড কাস্টমাইজ করা
    .compose([
        dc.lineChart(compositeChart)
            .group(valueAGroup, "Series A")
            .colors("blue"),
        dc.lineChart(compositeChart)
            .group(valueBGroup, "Series B")
            .colors("green")
    ]);

dc.renderAll();

কাস্টমাইজেশন বৈশিষ্ট্য:

compose([...]): এটি একাধিক চার্টের সিরিজ একত্রে প্রদর্শন করার জন্য ব্যবহৃত হয়। এখানে দুটি লাইন চার্ট তৈরি করা হয়েছে।
colors(): সিরিজগুলোর জন্য ভিন্ন ভিন্ন রঙ ব্যবহার করা হয়েছে।

২. Overlay Chart

Overlay Chart একটি চার্ট যেখানে একাধিক সিরিজকে একসাথে স্ট্যাক বা মিশ্রিত করা হয়। Overlay Chart সাধারণত ডেটার দুটি সিরিজের তুলনা করার জন্য ব্যবহৃত হয়, যেমন লাইন চার্ট এবং বার চার্ট একসাথে প্রদর্শন করা।

Overlay Chart কাস্টমাইজেশন উদাহরণ

ডেটাসেট তৈরি:

const data = [
    { date: "2023-01-01", valueA: 30, valueB: 50 },
    { date: "2023-02-01", valueA: 40, valueB: 60 },
    { date: "2023-03-01", valueA: 50, valueB: 70 },
    { date: "2023-04-01", valueA: 60, valueB: 80 },
    { date: "2023-05-01", valueA: 70, valueB: 90 }
];

Crossfilter ইন্ডেক্স এবং ডাইমেনশন তৈরি:

const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => new Date(d.date));
const valueAGroup = dateDimension.group().reduceSum(d => d.valueA);
const valueBGroup = dateDimension.group().reduceSum(d => d.valueB);

Overlay Chart (Bar Chart and Line Chart):

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

overlayChart
    .width(800)
    .height(400)
    .dimension(dateDimension)
    .group(valueAGroup, "Series A") // বার চার্টের জন্য
    .overlayChart(dc.lineChart)  // লাইন চার্ট যোগ করা
    .compose([
        dc.barChart(overlayChart)
            .group(valueAGroup, "Bar Series")
            .colors("blue"),
        dc.lineChart(overlayChart)
            .group(valueBGroup, "Line Series")
            .colors("green")
    ])
    .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")]))
    .xUnits(d3.timeMonths)
    .yAxisLabel("Value")
    .xAxisLabel("Date");

dc.renderAll();

কাস্টমাইজেশন বৈশিষ্ট্য:

overlayChart(dc.lineChart): এটি লাইন চার্ট এবং বার চার্টকে একসঙ্গে যুক্ত করার জন্য ব্যবহার করা হয়।
compose([...]): এখানে বার চার্ট এবং লাইন চার্ট একসাথে যোগ করা হয়েছে।
colors(): বার চার্ট এবং লাইন চার্টের জন্য আলাদা রঙ ব্যবহার করা হয়েছে।

৩. সম্পূর্ণ HTML এবং JavaScript উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Composite and Overlay Charts</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 Composite and Overlay Charts</h1>

    <div id="composite-chart"></div>
    <div id="overlay-chart"></div>

    <script>
        const data = [
            { date: "2023-01-01", valueA: 30, valueB: 50 },
            { date: "2023-02-01", valueA: 40, valueB: 60 },
            { date: "2023-03-01", valueA: 50, valueB: 70 },
            { date: "2023-04-01", valueA: 60, valueB: 80 },
            { date: "2023-05-01", valueA: 70, valueB: 90 }
        ];

        const ndx = crossfilter(data);
        const dateDimension = ndx.dimension(d => new Date(d.date));
        const valueAGroup = dateDimension.group().reduceSum(d => d.valueA);
        const valueBGroup = dateDimension.group().reduceSum(d => d.valueB);

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

        compositeChart
            .width(800)
            .height(400)
            .dimension(dateDimension)
            .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")]))
            .xUnits(d3.timeMonths)
            .yAxisLabel("Value")
            .xAxisLabel("Date")
            .legend(dc.legend())
            .compose([
                dc.lineChart(compositeChart)
                    .group(valueAGroup, "Series A")
                    .colors("blue"),
                dc.lineChart(compositeChart)
                    .group(valueBGroup, "Series B")
                    .colors("green")
            ]);

        // Overlay Chart
        const overlayChart = dc.barChart("#overlay-chart");

        overlayChart
            .width(800)
            .height(400)
            .dimension(dateDimension)
            .group(valueAGroup, "Series A")
            .overlayChart(dc.lineChart)
            .compose([
                dc.barChart(overlayChart)
                    .group(valueAGroup, "Bar Series")
                    .colors("blue"),
                dc.lineChart(overlayChart)
                    .group(valueBGroup, "Line Series")
                    .colors("green")
            ])
            .x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")]))
            .xUnits(d3.timeMonths)
            .yAxisLabel("Value")
            .xAxisLabel("Date");

        dc.renderAll();
    </script>
</body>
</html>

সারাংশ

Composite Chart: একাধিক সিরিজ একত্রে প্রদর্শন করতে ব্যবহৃত হয়। এখানে দুটি লাইন চার্টকে একত্রে প্রদর্শন করা হয়েছে।
Overlay Chart: একাধিক সিরিজকে একসঙ্গে মিশ্রিত করা হয়, যেমন বার চার্ট এবং লাইন চার্ট একসাথে প্রদর্শিত হয়।
compose([...]): এটি একাধিক সিরিজের চার্ট তৈরি করার জন্য ব্যবহৃত হয়।
legend(): চার্টের লেজেন্ড কাস্টমাইজ করা যায়।

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

Content added By

Azizar Rahman Aziz

Composite Chart এর ধারণা

265

DC.js একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন এবং বিশ্লেষণের জন্য ব্যবহৃত হয়। Composite Chart হল একটি বিশেষ ধরনের চার্ট, যেখানে একাধিক চার্ট একত্রে একটি গ্রাফে প্রদর্শিত হয়। এটি ডেটা সেটের বিভিন্ন দিক বিশ্লেষণ এবং তুলনা করার জন্য একটি শক্তিশালী টুল।

Composite Chart এর মধ্যে সাধারণত একাধিক চার্ট (যেমন বার চার্ট, লাইন চার্ট, ইত্যাদি) একসাথে একটানা প্রদর্শিত হয়। এই ধরনের চার্টগুলি ব্যবহারকারীদের একই সময়ে বিভিন্ন ডেটা সেটের তুলনা করার সুযোগ দেয়।

Composite Chart এর বৈশিষ্ট্য

একাধিক চার্টের সমন্বয়: একাধিক চার্ট যেমন বার চার্ট, লাইন চার্ট, ইত্যাদি একসাথে একটিতে সংযুক্ত করা হয়।
ডেটার বিভিন্ন দিকের তুলনা: Composite Chart এর মাধ্যমে আপনি একসাথে বিভিন্ন ধরনের ডেটার তুলনা করতে পারেন, যেমন মোট পরিমাণ, প্রবণতা, ইত্যাদি।
ইন্টারেক্টিভিটি: আপনি যদি একটি চার্টে কোনো পরিবর্তন করেন (যেমন একটি নির্দিষ্ট ক্যাটেগরি নির্বাচন), তবে অন্যান্য চার্টও স্বয়ংক্রিয়ভাবে আপডেট হতে পারে।
বিশ্লেষণের দক্ষতা: একাধিক ভিজ্যুয়াল উপাদান একত্রে ব্যবহার করা হয় যাতে একই সময়ে ডেটার বিভিন্ন দিক বিশ্লেষণ করা যায়।

Composite Chart তৈরির জন্য ডেটা প্রস্তুতি

DC.js এ Composite Chart তৈরি করতে হলে, প্রথমে একটি ডেটাসেট তৈরি করতে হবে যা বিভিন্ন চার্টের জন্য উপযুক্ত হবে। একটি সাধারণ ডেটাসেট উদাহরণ হতে পারে:

const data = [
    { date: "2023-12-01", value1: 30, value2: 50 },
    { date: "2023-12-02", value1: 70, value2: 80 },
    { date: "2023-12-03", value1: 90, value2: 40 },
    { date: "2023-12-04", value1: 50, value2: 60 },
    { date: "2023-12-05", value1: 60, value2: 90 }
];

এখানে, value1 এবং value2 দুটি পৃথক ডেটা সিরিজ হিসাবে ব্যবহার হবে, যা আমরা Composite Chart এ প্রদর্শন করব।

Composite Chart তৈরির ধাপ

DC.js ব্যবহার করে Composite Chart তৈরি করতে হলে, প্রথমে একাধিক চার্ট তৈরি করতে হবে এবং তারপর সেগুলোকে একত্রিত করতে হবে। নিচে একটি উদাহরণ দেখানো হলো যেখানে একটি Bar Chart এবং একটি Line Chart একত্রে প্রদর্শিত হবে।

HTML এবং JavaScript কোড উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Composite Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.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 Composite Chart</h1>
    <div id="composite-chart"></div>

    <script>
        // ডেটাসেট
        const data = [
            { date: "2023-12-01", value1: 30, value2: 50 },
            { date: "2023-12-02", value1: 70, value2: 80 },
            { date: "2023-12-03", value1: 90, value2: 40 },
            { date: "2023-12-04", value1: 50, value2: 60 },
            { date: "2023-12-05", value1: 60, value2: 90 }
        ];

        // Crossfilter সেটআপ
        const ndx = crossfilter(data);

        // ডেটার ডাইমেনশন তৈরি
        const dateDimension = ndx.dimension(d => new Date(d.date));

        // দুইটি গ্রুপ তৈরি
        const value1Group = dateDimension.group().reduceSum(d => d.value1);
        const value2Group = dateDimension.group().reduceSum(d => d.value2);

        // Composite Chart তৈরি
        const compositeChart = dc.compositeChart("#composite-chart");

        compositeChart
            .width(800)
            .height(400)
            .dimension(dateDimension)
            .group(value1Group, "Value 1") // প্রথম গ্রুপ (Value 1)
            .stack(value2Group, "Value 2") // দ্বিতীয় গ্রুপ (Value 2)
            .x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")])) // এক্স-অক্ষের স্কেল
            .xAxisLabel("Date") // এক্স-অক্ষের লেবেল
            .yAxisLabel("Value") // ওয়াই-অক্ষের লেবেল
            .legend(dc.legend()) // লেজেন্ড যোগ
            .brushOn(false) // ব্রাশিং (জুমিং) নিষ্ক্রিয়
            .renderHorizontalGridLines(true) // গ্রিড লাইন
            .render();

    </script>
</body>
</html>

ব্যাখ্যা:

ডেটা: ডেটা সেটে value1 এবং value2 দুটি ভিন্ন মান রয়েছে।
ডাইমেনশন তৈরি: dateDimension তৈরি করা হয়েছে যা ডেটার date প্রোপার্টি থেকে তারিখের ভিত্তিতে ডেটাকে ভাগ করবে।
গ্রুপ তৈরি:
- value1Group গ্রুপে value1 এর যোগফল করা হয়েছে।
- value2Group গ্রুপে value2 এর যোগফল করা হয়েছে।
Composite Chart:
- dc.compositeChart() ফাংশন দিয়ে Composite Chart তৈরি করা হয়েছে।
- group() দিয়ে প্রথম সিরিজ এবং stack() দিয়ে দ্বিতীয় সিরিজ যোগ করা হয়েছে। এতে দুটি ভিন্ন ভিন্ন ডেটা সিরিজ একসাথে এক গ্রাফে প্রদর্শিত হবে।
- x() এবং y() স্কেল কাস্টমাইজ করা হয়েছে।

Composite Chart এর সুবিধা

একাধিক ডেটা সিরিজের তুলনা: একাধিক ডেটা সিরিজ বা মেট্রিকের তুলনা করার জন্য Composite Chart উপকারী।
স্পষ্ট ভিজ্যুয়াল উপস্থাপনা: একসাথে বার এবং লাইন চার্টের মতো ভিজ্যুয়াল উপাদান প্রদর্শন করার মাধ্যমে ডেটা সম্পর্ক আরও স্পষ্ট হয়।
ইন্টারঅ্যাকটিভিটি: ব্যবহারকারী এক চার্টে পরিবর্তন করলে, অন্যান্য চার্টও আপডেট হতে পারে (যেমন DC.js এর ইন্টারঅ্যাকটিভ ফিল্টারিং)।
সহজ এবং কার্যকর বিশ্লেষণ: ডেটার বিভিন্ন দিক বিশ্লেষণ করার জন্য এটি একটি সহজ এবং কার্যকর উপায়।

সারাংশ

Composite Chart একটি অত্যন্ত কার্যকর টুল যেখানে একাধিক চার্ট একত্রে প্রদর্শিত হয়। DC.js ব্যবহার করে একাধিক গ্রুপ বা সিরিজের ডেটা Bar Chart এবং Line Chart এর মতো চার্টগুলিকে একসাথে প্রদর্শন করা সম্ভব। এটি ডেটার বিভিন্ন দিক বিশ্লেষণ এবং তুলনা করতে সহায়ক এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরিতে ব্যবহৃত হয়।

Content added By

Azizar Rahman Aziz

Multiple Line, Bar বা Area Chart একত্রে তৈরি করা

286

DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এর উপর ভিত্তি করে তৈরি এবং ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। একাধিক চার্ট (যেমন Line Chart, Bar Chart, Area Chart) একত্রে তৈরি করা যায় এবং সেগুলোর মাধ্যমে ডেটার বিভিন্ন দিক বিশ্লেষণ করা যায়।

এখানে আমরা দেখব কীভাবে Multiple Line, Bar, বা Area Chart একত্রে তৈরি করা যায়।

১. প্রয়োজনীয় লাইব্রেরি যোগ করা

HTML ফাইলের মধ্যে 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">

২. ডেটাসেট তৈরি এবং Crossfilter ইন্ডেক্স

আমরা একটি সাধারণ ডেটাসেট তৈরি করব যা Date, Category এবং Value সহ থাকবে। এর মাধ্যমে বিভিন্ন চার্ট তৈরি করা যাবে।

const data = [
    { date: "2023-01-01", category: "A", value: 30 },
    { date: "2023-01-02", category: "B", value: 50 },
    { date: "2023-01-03", category: "A", value: 70 },
    { date: "2023-01-04", category: "B", value: 20 },
    { date: "2023-01-05", category: "A", value: 60 },
    { date: "2023-01-06", category: "B", value: 90 }
];

// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);

৩. ডাইমেনশন এবং গ্রুপ তৈরি

ডেটা ফিল্টার এবং গ্রুপ করার জন্য Crossfilter এর মাধ্যমে ডাইমেনশন এবং গ্রুপ তৈরি করা হবে।

// তারিখের উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);

// ক্যাটেগরি ভিত্তিক গ্রুপ তৈরি
const categoryGroupA = dateDimension.group().reduceSum(d => d.category === "A" ? d.value : 0);
const categoryGroupB = dateDimension.group().reduceSum(d => d.category === "B" ? d.value : 0);

এখানে, categoryGroupA এবং categoryGroupB গ্রুপ তৈরি করা হয়েছে, যা category অনুসারে ডেটার যোগফল বের করবে।

৪. Multiple Line, Bar বা Area Chart একত্রে তৈরি

এখন আমরা Multiple Line, Bar, এবং Area চার্ট একত্রে তৈরি করব। সব চার্ট একই পৃষ্ঠায় রেন্ডার করা হবে।

// DC.js Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
    .width(600)
    .height(300)
    .dimension(dateDimension)
    .group(categoryGroupA, "Category A")
    .stack(categoryGroupB, "Category B")
    .x(d3.scaleTime()) // টাইম স্কেল
    .xUnits(d3.timeDays)
    .xAxisLabel("Date")
    .yAxisLabel("Value")
    .renderArea(true)
    .elasticY(true)
    .renderHorizontalGridLines(true);

// DC.js Bar Chart তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
    .width(600)
    .height(300)
    .dimension(dateDimension)
    .group(categoryGroupA, "Category A")
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal)
    .xAxisLabel("Date")
    .yAxisLabel("Value")
    .renderHorizontalGridLines(true);

// DC.js Area Chart তৈরি
const areaChart = dc.areaChart("#area-chart");
areaChart
    .width(600)
    .height(300)
    .dimension(dateDimension)
    .group(categoryGroupB, "Category B")
    .x(d3.scaleTime())
    .xUnits(d3.timeDays)
    .xAxisLabel("Date")
    .yAxisLabel("Value")
    .elasticY(true)
    .renderArea(true)
    .renderHorizontalGridLines(true);

// সমস্ত চার্ট রেন্ডার করা
dc.renderAll();

এখানে আমরা তিনটি চার্ট তৈরি করেছি:

Line Chart: দুইটি ক্যাটেগরি A এবং B এর জন্য একটি লাইন চার্ট।
Bar Chart: ক্যাটেগরি A এর জন্য একটি বার চার্ট।
Area Chart: ক্যাটেগরি B এর জন্য একটি এরিয়া চার্ট।

আমরা stack() ফাংশন ব্যবহার করে Line Chart এ দুটি ক্যাটেগরি (A এবং B) যোগ করেছি, যাতে একটি স্ট্যাকড লাইন চার্ট তৈরি হয়। Bar Chart এবং Area Chart সহজে তৈরি করা হয়েছে।

৫. পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Multiple Line, Bar, and Area Charts</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 Multiple Line, Bar, and Area Charts</h1>
    <div id="line-chart"></div>
    <div id="bar-chart"></div>
    <div id="area-chart"></div>

    <script>
        const data = [
            { date: "2023-01-01", category: "A", value: 30 },
            { date: "2023-01-02", category: "B", value: 50 },
            { date: "2023-01-03", category: "A", value: 70 },
            { date: "2023-01-04", category: "B", value: 20 },
            { date: "2023-01-05", category: "A", value: 60 },
            { date: "2023-01-06", category: "B", value: 90 }
        ];

        const ndx = crossfilter(data);

        const dateDimension = ndx.dimension(d => d.date);

        const categoryGroupA = dateDimension.group().reduceSum(d => d.category === "A" ? d.value : 0);
        const categoryGroupB = dateDimension.group().reduceSum(d => d.category === "B" ? d.value : 0);

        // DC.js Line Chart
        const lineChart = dc.lineChart("#line-chart");
        lineChart
            .width(600)
            .height(300)
            .dimension(dateDimension)
            .group(categoryGroupA, "Category A")
            .stack(categoryGroupB, "Category B")
            .x(d3.scaleTime())
            .xUnits(d3.timeDays)
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .renderArea(true)
            .elasticY(true)
            .renderHorizontalGridLines(true);

        // DC.js Bar Chart
        const barChart = dc.barChart("#bar-chart");
        barChart
            .width(600)
            .height(300)
            .dimension(dateDimension)
            .group(categoryGroupA, "Category A")
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .renderHorizontalGridLines(true);

        // DC.js Area Chart
        const areaChart = dc.areaChart("#area-chart");
        areaChart
            .width(600)
            .height(300)
            .dimension(dateDimension)
            .group(categoryGroupB, "Category B")
            .x(d3.scaleTime())
            .xUnits(d3.timeDays)
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .elasticY(true)
            .renderArea(true)
            .renderHorizontalGridLines(true);

        // Render all charts
        dc.renderAll();
    </script>
</body>
</html>

সারাংশ

Multiple Line, Bar, and Area Charts একত্রে তৈরি করা হয়েছে।
Line Chart এ দুটি ক্যাটেগরি (A এবং B) stack() ফাংশনের মাধ্যমে যোগ করা হয়েছে।
Bar Chart এবং Area Chart তৈরি করা হয়েছে আলাদাভাবে।
সমস্ত চার্ট DC.js এর renderAll() ফাংশন ব্যবহার করে রেন্ডার করা হয়েছে।

এভাবে আপনি DC.js ব্যবহার করে একাধিক চার্ট একসঙ্গে তৈরি করতে পারেন এবং interactive data visualization তৈরি করতে পারেন।

Content added By

Azizar Rahman Aziz

Overlay Chart তৈরি এবং Styling

251

Overlay Chart হল একটি চার্ট টাইপ যেখানে একাধিক সিরিজ একই চার্টে একত্রে প্রদর্শিত হয়। এটি ডেটার তুলনা করতে সহায়ক। DC.js এ Overlay Chart তৈরি করতে lineChart বা barChart ব্যবহার করা যেতে পারে, যেখানে বিভিন্ন ডেটা গ্রুপকে একসাথে দেখানো হয়।

এখানে Overlay Chart তৈরি করার প্রক্রিয়া এবং কাস্টম Styling করা হবে।

১. Overlay Chart তৈরি

Overlay Chart তৈরি করার জন্য stack() ফাংশন ব্যবহার করা হয়, যা একাধিক সিরিজকে একই চার্টে স্তুপীকৃত (stacked) ভাবে প্রদর্শন করে। আমরা lineChart বা barChart এর মাধ্যমে Overlay Chart তৈরি করতে পারি।

উদাহরণ: Overlay Chart (Line Chart) তৈরি

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Overlay Chart</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>Overlay Chart (Line Chart) with DC.js</h1>
    <div id="overlay-chart"></div>
    <script>
        // ডেটাসেট
        const data = [
            { date: "2023-01-01", value1: 30, value2: 40 },
            { date: "2023-02-01", value1: 50, value2: 60 },
            { date: "2023-03-01", value1: 70, value2: 90 },
            { date: "2023-04-01", value1: 90, value2: 100 },
            { date: "2023-05-01", value1: 60, value2: 80 }
        ];

        // Crossfilter সেটআপ
        const ndx = crossfilter(data);
        const dateDimension = ndx.dimension(d => d.date);
        
        const group1 = dateDimension.group().reduceSum(d => d.value1);
        const group2 = dateDimension.group().reduceSum(d => d.value2);

        // DC.js Overlay Chart (Line Chart)
        const lineChart = dc.lineChart("#overlay-chart");

        lineChart
            .width(600)
            .height(300)
            .dimension(dateDimension)
            .group(group1, "Value 1")
            .stack(group2, "Value 2")
            .x(d3.scaleBand()) // X-অক্ষের জন্য স্কেল
            .xUnits(dc.units.ordinal)
            .elasticY(true)
            .renderHorizontalGridLines(true)
            .xAxisLabel("Date")
            .yAxisLabel("Value")
            .title(function(d) {
                return d.key + ": " + d.value; // টুলটিপ কাস্টমাইজেশন
            });

        dc.renderAll();
    </script>
</body>
</html>

কাস্টমাইজেশন:

stack() ফাংশন: দুটি গ্রুপ (value1 এবং value2) একসাথে প্রদর্শন করতে stack() ব্যবহার করা হয়েছে।
x(d3.scaleBand()): X-অক্ষের জন্য স্কেল সেট করা হয়েছে যা ডেটা ক্যাটেগরি অনুযায়ী বার প্রদর্শন করে।
elasticY(true): Y-অক্ষের স্কেলটি ডেটা অনুযায়ী স্বয়ংক্রিয়ভাবে প্রসারিত হয়।
টুলটিপ: .title() ফাংশন ব্যবহার করে টুলটিপ কাস্টমাইজ করা হয়েছে।

২. Styling for Overlay Chart

DC.js দিয়ে তৈরি করা Overlay Chart কাস্টমাইজ করার জন্য CSS ব্যবহার করা যায়। এখানে কিছু স্টাইলিং সেট করা হয়েছে:

Styling for Overlay Chart

<style>
    #overlay-chart {
        border: 2px solid #4CAF50; /* চার্টের চারপাশে বর্ডার */
        margin: 20px; /* মার্জিন */
        padding: 10px; /* প্যাডিং */
        background-color: #f9f9f9; /* ব্যাকগ্রাউন্ড কালার */
    }

    .dc-chart rect {
        opacity: 0.7; /* বার বা লাইনের অপাসিটি কমানো */
    }

    .dc-chart path.line {
        stroke-width: 3px; /* লাইনের প্রস্থ */
        stroke: #3498db; /* প্রথম সিরিজের লাইন রঙ */
    }

    .dc-chart path.stack {
        stroke-width: 0; /* স্ট্যাকের জন্য সীমানা অপসারণ */
        fill-opacity: 0.6; /* স্ট্যাকের জন্য ফিল অপাসিটি */
    }

    .dc-chart path.stack:nth-child(2) {
        fill: #e74c3c; /* দ্বিতীয় সিরিজের স্ট্যাক রঙ */
    }

    .dc-chart path.line:nth-child(1) {
        stroke: #2ecc71; /* প্রথম সিরিজের লাইন রঙ */
    }

    .dc-chart text {
        font-size: 12px; /* টেক্সট সাইজ */
        font-family: Arial, sans-serif; /* ফন্ট */
    }
</style>

Styling ব্যাখ্যা:

বর্ডার, প্যাডিং, এবং ব্যাকগ্রাউন্ড কালার: #overlay-chart ডিভের জন্য কিছু CSS স্টাইল প্রয়োগ করা হয়েছে।
লাইনের অপাসিটি এবং রঙ: .dc-chart path.line এবং .dc-chart path.stack ব্যবহার করে লাইনের অপাসিটি এবং রঙ কাস্টমাইজ করা হয়েছে।
স্ট্যাকের জন্য আলাদা রঙ: .dc-chart path.stack:nth-child(2) এর মাধ্যমে দ্বিতীয় সিরিজের স্ট্যাক রঙ পরিবর্তন করা হয়েছে।
টেক্সট কাস্টমাইজেশন: .dc-chart text এর মাধ্যমে টেক্সটের ফন্ট এবং সাইজ কাস্টমাইজ করা হয়েছে।

৩. অন্যান্য কাস্টমাইজেশন অপশন

X এবং Y অক্ষের লেবেল কাস্টমাইজেশন: .xAxisLabel() এবং .yAxisLabel() ফাংশন ব্যবহার করে অক্ষের লেবেল কাস্টমাইজ করা হয়েছে।
মার্জিন কাস্টমাইজেশন: .margins() ফাংশন ব্যবহার করে চার্টের চারপাশের মার্জিন কাস্টমাইজ করা হয়েছে।
Grid Lines: .renderHorizontalGridLines() ব্যবহার করে হরিজেন্টাল গ্রিড লাইন যোগ করা হয়েছে।

সারাংশ

Overlay Chart তৈরি করার জন্য DC.js এ stack() ফাংশন ব্যবহার করা হয়, যা একাধিক সিরিজকে একসাথে প্রদর্শন করে।
Line Chart বা Bar Chart উভয় ধরনের Overlay Chart তৈরি করা যেতে পারে।
CSS Styling এর মাধ্যমে Overlay Chart এর বিভিন্ন অংশ যেমন বার, লাইন, টেক্সট, এবং ব্যাকগ্রাউন্ড কাস্টমাইজ করা যায়।

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

Content added By

Azizar Rahman Aziz

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

253

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 তৈরি করলে, আপনি সহজেই একাধিক ডেটা সিরিজের তুলনা করতে পারবেন এবং ডেটার মধ্যে সম্পর্ক আরো স্পষ্টভাবে বিশ্লেষণ করতে পারবেন।

Content added By

Azizar Rahman Aziz

DC.js পরিচিতি DC.js সেটআপ এবং ইনস্টলেশন Crossfilter এর মাধ্যমে ডেটা হ্যান্ডলিং DC.js এর বেসিক চার্ট তৈরি ডায়নামিক চার্ট ইন্টারঅ্যাকশন

Composite এবং Overlay চার্ট

১. Composite Chart

Composite Chart কাস্টমাইজেশন উদাহরণ

কাস্টমাইজেশন বৈশিষ্ট্য:

২. Overlay Chart

Overlay Chart কাস্টমাইজেশন উদাহরণ

কাস্টমাইজেশন বৈশিষ্ট্য:

৩. সম্পূর্ণ HTML এবং JavaScript উদাহরণ

সারাংশ

Composite Chart এর ধারণা

Composite Chart এর বৈশিষ্ট্য

Composite Chart তৈরির জন্য ডেটা প্রস্তুতি

Composite Chart তৈরির ধাপ

HTML এবং JavaScript কোড উদাহরণ

ব্যাখ্যা:

Composite Chart এর সুবিধা

সারাংশ

Multiple Line, Bar বা Area Chart একত্রে তৈরি করা

১. প্রয়োজনীয় লাইব্রেরি যোগ করা

২. ডেটাসেট তৈরি এবং Crossfilter ইন্ডেক্স

৩. ডাইমেনশন এবং গ্রুপ তৈরি

৪. Multiple Line, Bar বা Area Chart একত্রে তৈরি

৫. পূর্ণ কোড উদাহরণ

সারাংশ

Overlay Chart তৈরি এবং Styling

১. Overlay Chart তৈরি

উদাহরণ: Overlay Chart (Line Chart) তৈরি

কাস্টমাইজেশন:

২. Styling for Overlay Chart

Styling for Overlay Chart

Styling ব্যাখ্যা:

৩. অন্যান্য কাস্টমাইজেশন অপশন

সারাংশ

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

Composite Chart কী?

Overlay Chart কী?

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

Composite Chart তৈরি করা

উদাহরণ: Composite Chart

Overlay Chart তৈরি করা

উদাহরণ: Overlay Chart

Data Synchronization

উদাহরণ: Data Synchronization

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!