Scatter Plot এবং Bubble Chart কাস্টমাইজেশন

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

283

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

১. Scatter Plot (স্ক্যাটার প্লট)

Scatter Plot ডেটার মধ্যে সম্পর্ক বা কো-রিলেশন দেখতে ব্যবহৃত হয়, যেখানে ডেটা পয়েন্টগুলি এক্স এবং ওয়াই অক্ষের উপর প্লট করা হয়। এটি দুটি ভেরিয়েবল এর মধ্যে সম্পর্ক বিশ্লেষণ করতে সহায়ক।

উদাহরণ: Scatter Plot তৈরি

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DC.js Scatter Plot</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 Scatter Plot</h1>
    <div id="scatter-plot"></div>
    <script>
        // ডেটাসেট
        const data = [
            { x: 30, y: 40, category: "A" },
            { x: 50, y: 60, category: "B" },
            { x: 70, y: 90, category: "A" },
            { x: 90, y: 100, category: "C" },
            { x: 60, y: 80, category: "B" }
        ];

        // Crossfilter সেটআপ
        const ndx = crossfilter(data);
        const dimension = ndx.dimension(d => [d.x, d.y]);
        const group = dimension.group();

        // DC.js Scatter Plot তৈরি
        const scatterPlot = dc.scatterPlot("#scatter-plot");

        scatterPlot
            .width(600)
            .height(300)
            .dimension(dimension)
            .group(group)
            .x(d3.scaleLinear().domain([0, 100]))  // X-অক্ষের স্কেল
            .y(d3.scaleLinear().domain([0, 120]))  // Y-অক্ষের স্কেল
            .margins({top: 10, right: 10, bottom: 40, left: 40}) // মার্জিন কাস্টমাইজ
            .xAxisLabel("X Values")  // X-অক্ষের লেবেল
            .yAxisLabel("Y Values")  // Y-অক্ষের লেবেল
            .title(function(d) {
                return "X: " + d.x + ", Y: " + d.y; // টুলটিপের কাস্টমাইজেশন
            });

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

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

মার্জিন: .margins() ফাংশন ব্যবহার করে চার্টের চারপাশের মার্জিন কাস্টমাইজ করা হয়েছে।
টুলটিপ: .title() ফাংশন ব্যবহার করে প্রতিটি পয়েন্টের জন্য কাস্টম টুলটিপ তৈরি করা হয়েছে।
অক্ষের স্কেল: d3.scaleLinear().domain([min, max]) স্কেল ব্যবহার করে X এবং Y অক্ষের মান নির্ধারণ করা হয়েছে।

২. Bubble Chart (বাবল চার্ট)

Bubble Chart একটি বিশেষ ধরনের স্ক্যাটার প্লট যেখানে প্রতিটি ডেটা পয়েন্ট একটি বাবলের মতো প্রদর্শিত হয়, এবং প্রতিটি বাবলের আকার তার ডেটার মান অনুযায়ী পরিবর্তিত হয়। এটি তিনটি ডাইমেনশন দেখানোর জন্য উপযুক্ত: X এবং Y অক্ষের মান এবং বাবলের আকার (সাইজ)।

উদাহরণ: Bubble 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 Bubble 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>DC.js Bubble Chart</h1>
    <div id="bubble-chart"></div>
    <script>
        // ডেটাসেট
        const data = [
            { x: 30, y: 40, radius: 10, category: "A" },
            { x: 50, y: 60, radius: 20, category: "B" },
            { x: 70, y: 90, radius: 15, category: "A" },
            { x: 90, y: 100, radius: 25, category: "C" },
            { x: 60, y: 80, radius: 12, category: "B" }
        ];

        // Crossfilter সেটআপ
        const ndx = crossfilter(data);
        const dimension = ndx.dimension(d => [d.x, d.y, d.radius]);
        const group = dimension.group();

        // DC.js Bubble Chart তৈরি
        const bubbleChart = dc.bubbleChart("#bubble-chart");

        bubbleChart
            .width(600)
            .height(300)
            .dimension(dimension)
            .group(group)
            .x(d3.scaleLinear().domain([0, 100])) // X-অক্ষের স্কেল
            .y(d3.scaleLinear().domain([0, 120])) // Y-অক্ষের স্কেল
            .r(d => d.radius) // বাবলের আকার (radius)
            .margins({top: 10, right: 10, bottom: 40, left: 40}) // মার্জিন কাস্টমাইজ
            .xAxisLabel("X Values")  // X-অক্ষের লেবেল
            .yAxisLabel("Y Values")  // Y-অক্ষের লেবেল
            .title(function(d) {
                return "X: " + d.x + ", Y: " + d.y + ", Radius: " + d.radius; // টুলটিপ কাস্টমাইজ
            });

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

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

রেডিয়াস: .r() ফাংশন ব্যবহার করে বাবলের আকার কাস্টমাইজ করা হয়েছে, যা d.radius থেকে নেওয়া হচ্ছে।
টুলটিপ: .title() ফাংশন ব্যবহার করে প্রতিটি বাবলের জন্য কাস্টম টুলটিপ তৈরি করা হয়েছে, যেখানে X, Y মান এবং রেডিয়াসের তথ্য দেখানো হচ্ছে।
মার্জিন: .margins() ফাংশন ব্যবহার করে মার্জিন কাস্টমাইজ করা হয়েছে।

সারাংশ

Scatter Plot এবং Bubble Chart DC.js এর মাধ্যমে সহজে তৈরি করা যায়।
Scatter Plot ব্যবহার করে দুটি ভেরিয়েবল এর মধ্যে সম্পর্ক বিশ্লেষণ করা হয়, যেখানে X এবং Y অক্ষের মান প্লট করা হয়।
Bubble Chart তে একই স্ক্যাটার প্লটের মতো X এবং Y অক্ষের মান দেখানোর পাশাপাশি, প্রতিটি ডেটা পয়েন্টের আকার (radius) বাবল আকারে দেখানো হয়।
DC.js এ মার্জিন, টুলটিপ এবং অক্ষের স্কেল কাস্টমাইজ করার মাধ্যমে এই চার্টগুলো আরও ইন্টারেক্টিভ এবং ব্যবহারকারীর জন্য উপযোগী করা যায়।

এটি DC.js দিয়ে Scatter Plot এবং Bubble Chart কাস্টমাইজ করার একটি সাধারণ উদাহরণ এবং আপনি আপনার প্রয়োজন অনুযায়ী এগুলোর কাস্টমাইজেশন করতে পারেন।

Content added By

Azizar Rahman Aziz

Scatter Plot এবং Bubble Chart এর মৌলিক ধারণা

282

DC.js একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরিতে ব্যবহৃত হয়। DC.js দিয়ে scatter plot এবং bubble chart এর মতো বিভিন্ন ধরনের চার্ট তৈরি করা সম্ভব। এই চার্টগুলো ডেটার মধ্যে সম্পর্ক ও প্রক্রিয়া বোঝাতে সহায়ক, বিশেষ করে দুটি বা তার বেশি ভেরিয়েবলের মধ্যে সম্পর্ক বিশ্লেষণ করতে।

Scatter Plot এর মৌলিক ধারণা

Scatter Plot হল একটি ভিজ্যুয়ালাইজেশন টুল যা দুটি নির্ধারিত ভেরিয়েবলের মধ্যে সম্পর্ক প্রদর্শন করে। এটি সাধারণত x-axis এবং y-axis ব্যবহার করে প্রতিটি পয়েন্টের মান চিত্রিত করে।

Scatter Plot কীভাবে কাজ করে?

X-Axis: এক ভেরিয়েবলের মান
Y-Axis: অন্য ভেরিয়েবলের মান
ডেটা পয়েন্ট: প্রতিটি পয়েন্টের স্থান নির্ধারণ করা হয় তার X এবং Y মানের উপর ভিত্তি করে।

Scatter plot ব্যবহার করে আমরা সহজেই দুটি ভেরিয়েবলের মধ্যে সম্পর্ক, প্রবণতা, বা কোন ধরনের সম্পর্কের (positive, negative, no correlation) চিহ্নিত করতে পারি।

Bubble Chart এর মৌলিক ধারণা

Bubble Chart হল একটি উন্নত ধরনের scatter plot, যেখানে প্রতিটি ডেটা পয়েন্টের সাথে অতিরিক্ত তথ্য (বubbles) যুক্ত করা হয়। প্রতিটি "bubble" এর আকার, রঙ, বা অবস্থান দ্বারা আরও বেশি তথ্য উপস্থাপন করা হয়।

Bubble Chart কীভাবে কাজ করে?

X-Axis: প্রথম ভেরিয়েবলের মান
Y-Axis: দ্বিতীয় ভেরিয়েবলের মান
Bubble Size: তৃতীয় ভেরিয়েবলের মান (অথবা অন্য কোন পরিমাণ)
Bubble Color: বিভিন্ন ভেরিয়েবল বা শ্রেণীর মান

Bubble chart সাধারণত বড় ডেটাসেটে তথ্য বিশ্লেষণ এবং তুলনা করতে ব্যবহৃত হয়, যেখানে তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক বোঝানো হয়।

DC.js দিয়ে Scatter Plot তৈরি

DC.js এর মাধ্যমে Scatter Plot তৈরি করতে, প্রথমে একটি ডেটাসেট তৈরি করতে হবে এবং Crossfilter এর মাধ্যমে ডেটার ডাইমেনশন তৈরি করতে হবে। তারপর D3.js এর মাধ্যমে ভিজ্যুয়াল উপস্থাপনা করা হয়।

উদাহরণ: Scatter Plot

const scatterChart = dc.scatterPlot("#scatter-plot");

scatterChart
    .width(600)
    .height(400)
    .dimension(dimension)  // Crossfilter dimension
    .group(group)  // Grouping data
    .x(d3.scaleLinear())  // X-axis scale
    .y(d3.scaleLinear())  // Y-axis scale
    .xAxisLabel("X-Axis Label")  // X-axis label
    .yAxisLabel("Y-Axis Label")  // Y-axis label
    .render();

DC.js দিয়ে Bubble Chart তৈরি

Bubble Chart তৈরি করতে, scatterPlot() ফাংশনটি ব্যবহার করা হয়, তবে এখানে bubble size এবং color কাস্টমাইজ করা হয়।

উদাহরণ: Bubble Chart

const bubbleChart = dc.bubbleChart("#bubble-chart");

bubbleChart
    .width(600)
    .height(400)
    .dimension(dimension)  // Crossfilter dimension
    .group(group)  // Grouping data
    .x(d3.scaleLinear())  // X-axis scale
    .y(d3.scaleLinear())  // Y-axis scale
    .r(d3.scaleLinear())  // Bubble size scale
    .xAxisLabel("X-Axis Label")  // X-axis label
    .yAxisLabel("Y-Axis Label")  // Y-axis label
    .colorAccessor(d => d.key)  // Bubble color based on key
    .render();

Scatter Plot এবং Bubble Chart এর মধ্যে পার্থক্য

বৈশিষ্ট্য	Scatter Plot	Bubble Chart
ভেরিয়েবল	দুটি ভেরিয়েবল	তিনটি ভেরিয়েবল
ডেটা পয়েন্ট	এক্স ও ওয়াই অক্ষের উপর ডেটা পয়েন্ট দেখানো হয়	এক্স, ওয়াই এবং বুদ্বুদ আকার বা রঙের মাধ্যমে তৃতীয় ভেরিয়েবল প্রকাশ
ব্যবহার	দুটি ভেরিয়েবলের মধ্যে সম্পর্ক দেখানোর জন্য	তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক বিশ্লেষণ করতে
তিনটি ভেরিয়েবল প্রদর্শন	না	হ্যাঁ (আকার ও রঙ দ্বারা)

সারাংশ

Scatter Plot: দুটি ভেরিয়েবলের মধ্যে সম্পর্ক বা প্রবণতা বিশ্লেষণ করতে ব্যবহৃত হয়। এটি একটি সাধারণ 2D গ্রাফ যেখানে X এবং Y অক্ষের উপর ডেটা পয়েন্টস চিত্রিত হয়।
Bubble Chart: এটি একটি উন্নত scatter plot যা আরও একটি তৃতীয় ভেরিয়েবল বা পরিমাণ প্রদর্শন করে বুদ্বুদ আকার এবং রঙের মাধ্যমে। এটি একাধিক ভেরিয়েবলের মধ্যে সম্পর্ক বিশ্লেষণ করতে সহায়ক।
DC.js: D3.js এবং Crossfilter এর সাথে একত্রে ব্যবহার করে সহজেই scatter plot এবং bubble chart তৈরি করা সম্ভব, যা ডেটার বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশনকে আরও কার্যকরী করে তোলে।

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

Content added By

Azizar Rahman Aziz

Custom Axis এবং Color Scale যোগ করা

242

DC.js দিয়ে Custom Axis এবং Color Scale যোগ করা একটি শক্তিশালী ফিচার, যা ডেটাকে আরও কাস্টমাইজড ও স্পষ্টভাবে উপস্থাপন করতে সাহায্য করে। এখানে আমরা DC.js দিয়ে কিভাবে কাস্টম এক্স-অক্ষ এবং রঙের স্কেল যোগ করা যায়, তা বিস্তারিতভাবে দেখবো।

১. Custom Axis (কাস্টম এক্স-অক্ষ) যোগ করা

DC.js ডিফল্টভাবে এক্স-অক্ষ এবং ওয়াই-অক্ষের লেবেল ও স্কেল সরবরাহ করে, তবে আপনি কাস্টম এক্স-অক্ষ বা ওয়াই-অক্ষ ব্যবহার করতে চাইলে, আপনাকে D3.js এর স্কেল এবং axis ফাংশন ব্যবহার করতে হবে।

২. Color Scale (রঙের স্কেল) যোগ করা

Color Scale ডেটার বিভিন্ন ভ্যালু বা ক্যাটেগরি অনুযায়ী বিভিন্ন রঙ দিয়ে ডেটাকে আলাদা করার জন্য ব্যবহৃত হয়। D3.js এর scaleOrdinal অথবা scaleLinear ফাংশন ব্যবহার করে রঙের স্কেল তৈরি করা যেতে পারে।

DC.js দিয়ে Custom Axis এবং Color Scale যোগ করার উদাহরণ

এখানে আমরা একটি Bar 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 Custom Axis and Color Scale</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 Custom Axis and Color Scale</h1>
    <div id="bar-chart"></div>

    <script>
        // ডেটাসেট
        const data = [
            { category: "A", value: 30 },
            { category: "B", value: 80 },
            { category: "C", value: 45 },
            { category: "D", value: 60 },
            { category: "E", value: 20 },
            { category: "F", value: 90 }
        ];

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

        // ক্যাটেগরি এর উপর ডাইমেনশন তৈরি
        const categoryDimension = ndx.dimension(d => d.category);

        // ক্যাটেগরি অনুযায়ী গ্রুপ তৈরি
        const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

        // DC.js বার চার্ট
        const barChart = dc.barChart("#bar-chart");

        // রঙের স্কেল তৈরি (D3.js এর scaleOrdinal ব্যবহার)
        const colorScale = d3.scaleOrdinal(d3.schemeCategory10);

        // কাস্টম এক্স-অক্ষ তৈরি
        const xAxis = d3.axisBottom().scale(d3.scaleBand()).padding(0.1);

        // বার চার্ট কনফিগারেশন
        barChart
            .width(600) // চার্টের প্রস্থ
            .height(300) // চার্টের উচ্চতা
            .dimension(categoryDimension) // ডাইমেনশন নির্ধারণ
            .group(categoryGroup) // গ্রুপ নির্ধারণ
            .x(d3.scaleBand()) // এক্স-অক্ষের স্কেল
            .xUnits(dc.units.ordinal) // ডিসক্রিট ডেটার জন্য
            .xAxisLabel("Categories") // এক্স-অক্ষের কাস্টম লেবেল
            .yAxisLabel("Values") // ওয়াই-অক্ষের কাস্টম লেবেল
            .renderHorizontalGridLines(true) // গ্রিড লাইন যোগ করা
            .colors(colorScale) // রঙের স্কেল যোগ করা
            .colorAccessor(d => d.key) // রঙের অ্যাক্সেসর
            .on("pretransition", function(chart) {
                // কাস্টম এক্স-অক্ষ সেলফ-ড্র করার জন্য
                chart.select("g.x").call(xAxis);
            });

        // চার্ট রেন্ডার
        dc.renderAll();
    </script>
</body>
</html>

৪. কোডের ব্যাখ্যা

১. ডেটাসেট এবং Crossfilter সেটআপ:

এখানে একটি ডেটাসেট তৈরি করা হয়েছে, যেখানে category এবং value এর মান দেওয়া হয়েছে। Crossfilter ব্যবহার করে এই ডেটাকে ইন্ডেক্স করা হয়েছে।

const data = [
    { category: "A", value: 30 },
    { category: "B", value: 80 },
    { category: "C", value: 45 },
    { category: "D", value: 60 },
    { category: "E", value: 20 },
    { category: "F", value: 90 }
];

const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

২. কাস্টম এক্স-অক্ষ (Custom Axis):

ডিফল্ট এক্স-অক্ষের পরিবর্তে একটি কাস্টম এক্স-অক্ষ তৈরি করা হয়েছে। এখানে d3.axisBottom() ব্যবহার করা হয়েছে কাস্টম এক্স-অক্ষ তৈরির জন্য, এবং এই এক্স-অক্ষকে বার চার্টে প্রয়োগ করা হয়েছে।

const xAxis = d3.axisBottom().scale(d3.scaleBand()).padding(0.1);

৩. রঙের স্কেল (Color Scale):

DC.js-এ colors() ফাংশন ব্যবহার করে আমরা একটি color scale যোগ করেছি, যা D3.js এর scaleOrdinal() ফাংশন ব্যবহার করে তৈরি করা হয়েছে। এখানে d3.schemeCategory10 রঙের স্কিম ব্যবহৃত হয়েছে।

const colorScale = d3.scaleOrdinal(d3.schemeCategory10);

৪. বার চার্ট কনফিগারেশন:

DC.js এর barChart() ফাংশন ব্যবহার করে বার চার্ট কনফিগার করা হয়েছে। এখানে কাস্টম এক্স-অক্ষ এবং রঙের স্কেল যোগ করা হয়েছে, এবং on("pretransition") ইভেন্ট ব্যবহার করে কাস্টম এক্স-অক্ষ সেলফ-ড্র করা হয়েছে।

barChart
    .colors(colorScale)
    .colorAccessor(d => d.key)
    .on("pretransition", function(chart) {
        chart.select("g.x").call(xAxis);
    });

৫. `dc.renderAll()` দিয়ে চার্ট রেন্ডার করা:

সবশেষে, dc.renderAll() ফাংশনটি ব্যবহার করা হয়েছে যাতে সমস্ত চার্ট রেন্ডার হয়।

dc.renderAll();

৫. সারাংশ

Custom Axis: DC.js এবং D3.js ব্যবহার করে কাস্টম এক্স-অক্ষ তৈরি করা হয়েছে, যা গ্রিড লাইন এবং লেবেল কাস্টমাইজ করার জন্য কার্যকর।
Color Scale: D3.js এর scaleOrdinal() ব্যবহার করে বার চার্টে রঙের স্কেল যোগ করা হয়েছে, যা বিভিন্ন ক্যাটেগরি অনুযায়ী বারগুলোর রঙ পরিবর্তন করে।
Legends: DC.js এর লিজেন্ড ফিচার ব্যবহার করে চার্টের পাশে একটি বর্ণনা যোগ করা হয়েছে, যা রঙ এবং ক্যাটেগরি সম্পর্কিত।

এই কাস্টম এক্স-অক্ষ এবং রঙের স্কেল ব্যবহার করে আপনি DC.js এর মাধ্যমে আরও কাস্টমাইজড এবং ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।

Content added By

Azizar Rahman Aziz

Data Points এর Size এবং Color Encoding

318

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

Azizar Rahman Aziz

281

DC.js ব্যবহার করে আপনি বিভিন্ন Advanced Interaction Techniques যেমন Zoom এবং Tooltip সহ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। এই টেকনিকগুলো ডেটা বিশ্লেষণ এবং ইন্টারেক্টিভ ফিল্টারিং আরো উন্নত করে তোলে। নিচে Zoom এবং Tooltip ব্যবহারের পদ্ধতি আলোচনা করা হলো।

১. Zoom Implementation in DC.js

Zoom ফিচার ব্যবহার করে আপনি চার্টের বিভিন্ন অংশে স্কেলিং এবং প্যানিং করতে পারেন। এটি D3.js এর scale ফাংশন ব্যবহার করে সহজেই যুক্ত করা যায়।

Line Chart Example with Zoom

এখানে একটি Line Chart তৈরি করা হয়েছে এবং 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 }
];

Zoom Chart Code

const ndx = crossfilter(data);

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

// value এর উপর গ্রুপ তৈরি
const valueGroup = dateDimension.group().reduceSum(d => d.value);

// 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")])) // টাইম স্কেল
    .xUnits(d3.timeDays) // টাইম ইউনিট নির্ধারণ
    .renderHorizontalGridLines(true)
    .on("zoom", function() {
        // Zoom ব্যবহারকারীর স্কেল পরিবর্তনের সময়
        console.log("Zoom applied");
    });

dc.renderAll();

Zoom Integration

Zoom ব্যবহার করতে, dc.lineChart() এর মধ্যে on("zoom", function() {...}) ব্যবহার করা হয়।
এটি d3.scaleTime() এর মাধ্যমে সময় স্কেল করার সুবিধা দেয় এবং ব্যবহারকারী যখন চার্টের স্কেল পরিবর্তন করে, তখন এটি ইন্টারেক্টিভভাবে রেন্ডার হয়।

২. Tooltip Implementation in DC.js

Tooltip ব্যবহারকারীকে মাউস হোভার করার সময় অতিরিক্ত তথ্য দেখানোর সুযোগ দেয়। DC.js এর সাথে D3.js এর title() ফাংশন ব্যবহার করে টুলটিপ তৈরি করা যায়।

Tooltip Example for Bar Chart

এখানে একটি Bar Chart তৈরি করা হয়েছে এবং প্রতিটি বারের জন্য Tooltip ফিচার যুক্ত করা হয়েছে:

ডেটাসেট উদাহরণ

const data = [
    { category: "A", value: 30 },
    { category: "B", value: 50 },
    { category: "C", value: 70 },
    { category: "D", value: 20 },
    { category: "E", value: 60 }
];

Bar Chart with Tooltip Code

const ndx = crossfilter(data);

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

// value এর উপর গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

// Bar Chart তৈরি
const barChart = dc.barChart("#bar-chart");

barChart
    .width(600)
    .height(300)
    .dimension(categoryDimension)
    .group(categoryGroup)
    .x(d3.scaleBand()) // x axis scale
    .xUnits(dc.units.ordinal)
    .on('postRender', function(chart) {
        chart.selectAll('rect')
            .on('mouseover', function(d) {
                const value = d.data.value;
                const category = d.data.key;
                const tooltipText = `Category: ${category}<br>Value: ${value}`;
                
                // Tooltip তৈরি
                const tooltip = d3.select('body').append('div')
                    .attr('class', 'tooltip')
                    .style('position', 'absolute')
                    .style('background', 'rgba(0, 0, 0, 0.7)')
                    .style('color', '#fff')
                    .style('padding', '5px')
                    .style('border-radius', '4px')
                    .html(tooltipText)
                    .style('left', `${d3.event.pageX + 5}px`)
                    .style('top', `${d3.event.pageY + 5}px`);
            })
            .on('mouseout', function() {
                // Tooltip মুছে ফেলুন
                d3.select('.tooltip').remove();
            });
    });

dc.renderAll();

HTML Code for Bar Chart

<div id="bar-chart"></div>

Tooltip Integration

এখানে, on('mouseover') ইভেন্টে, প্রতিটি বারের উপর মাউস হোভার করার সময় টুলটিপ দেখানো হয়।
Tooltip স্টাইল করার জন্য D3.js এর append(), style(), এবং html() ফাংশন ব্যবহার করা হয়েছে।
mouseout ইভেন্টে, টুলটিপটি সরিয়ে ফেলা হয়।

৩. সম্পূর্ণ কোড উদাহরণ

<!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: Zoom and Tooltip</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 Advanced Interaction Example</h1>
    
    <div id="line-chart"></div>
    <div id="bar-chart"></div>

    <script>
        // Line Chart with 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 }
        ];

        const ndx = crossfilter(data);
        const dateDimension = ndx.dimension(d => d.date);
        const valueGroup = dateDimension.group().reduceSum(d => d.value);

        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")]))
            .xUnits(d3.timeDays)
            .renderHorizontalGridLines(true)
            .on("zoom", function() {
                console.log("Zoom applied");
            });

        // Bar Chart with Tooltip
        const barData = [
            { category: "A", value: 30 },
            { category: "B", value: 50 },
            { category: "C", value: 70 },
            { category: "D", value: 20 },
            { category: "E", value: 60 }
        ];

        const ndx2 = crossfilter(barData);
        const categoryDimension = ndx2.dimension(d => d.category);
        const categoryGroup = categoryDimension.group().reduceSum(d => d.value);

        const barChart = dc.barChart("#bar-chart");
        barChart
            .width(600)
            .height(300)
            .dimension(categoryDimension)
            .group(categoryGroup)
            .x(d3.scaleBand())
            .xUnits(dc.units.ordinal)
            .on('postRender', function(chart) {
                chart.selectAll('rect')
                    .on('mouseover', function(d) {
                        const value = d.data.value;
                        const category = d.data.key;
                        const tooltipText = `Category: ${category}<br>Value: ${value}`;
                        
                        // Tooltip
                        const tooltip = d3.select('body').append('div')
                            .attr('class', 'tooltip')
                            .style('position', 'absolute')
                            .style('background', 'rgba(0, 0, 0, 0.7)')
                            .style('color', '#fff')
                            .style('padding', '5px')
                            .style('border-radius', '4px')
                            .html(tooltipText)
                            .style('left', `${d3.event.pageX + 5}px`)
                            .style('top', `${d3.event.pageY + 5}px`);
                    })
                    .on('mouseout', function() {
                        d3.select('.tooltip').remove();
                    });
            });

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

সারাংশ

Zoom: DC.js এর সাথে D3.js এর scale ফাংশন ব্যবহার করে ইন্টারেক্টিভ জুম ফিচার তৈরি করা যায়।
Tooltip: DC.js এর চার্টে D3.js এর mouseover ইভেন্ট ব্যবহার করে টুলটিপ যুক্ত করা হয়, যা মাউস হোভার করলে অতিরিক্ত তথ্য প্রদর্শন করে।

এই টেকনিকগুলো DC.js এর ভিজ্যুয়ালাইজেশনগুলোকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারী বান্ধব করে তোলে।

Content added By

Azizar Rahman Aziz

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

Scatter Plot এবং Bubble Chart কাস্টমাইজেশন

১. Scatter Plot (স্ক্যাটার প্লট)

উদাহরণ: Scatter Plot তৈরি

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

২. Bubble Chart (বাবল চার্ট)

উদাহরণ: Bubble Chart তৈরি

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

সারাংশ

Scatter Plot এবং Bubble Chart এর মৌলিক ধারণা

Scatter Plot এর মৌলিক ধারণা

Scatter Plot কীভাবে কাজ করে?

Bubble Chart এর মৌলিক ধারণা

Bubble Chart কীভাবে কাজ করে?

DC.js দিয়ে Scatter Plot তৈরি

উদাহরণ: Scatter Plot

DC.js দিয়ে Bubble Chart তৈরি

উদাহরণ: Bubble Chart

Scatter Plot এবং Bubble Chart এর মধ্যে পার্থক্য

সারাংশ

Custom Axis এবং Color Scale যোগ করা

১. Custom Axis (কাস্টম এক্স-অক্ষ) যোগ করা

২. Color Scale (রঙের স্কেল) যোগ করা

DC.js দিয়ে Custom Axis এবং Color Scale যোগ করার উদাহরণ

৩. HTML এবং JavaScript কোড

৪. কোডের ব্যাখ্যা

১. ডেটাসেট এবং Crossfilter সেটআপ:

২. কাস্টম এক্স-অক্ষ (Custom Axis):

৩. রঙের স্কেল (Color Scale):

৪. বার চার্ট কনফিগারেশন:

৫. dc.renderAll() দিয়ে চার্ট রেন্ডার করা:

৫. সারাংশ

Data Points এর Size এবং Color Encoding

১. প্রয়োজনীয় ফাইল যুক্ত করা

২. HTML ফাইল তৈরি

৩. ডেটাসেট তৈরি করা

৪. Crossfilter এবং DC.js সেটআপ

৫. Scatter Chart তৈরি করা

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

৬. সম্পূর্ণ কোড উদাহরণ

৭. কাস্টমাইজেশন উপকারিতা

সারাংশ

Advanced Interaction Techniques (Zoom, Tooltip)

১. Zoom Implementation in DC.js

Line Chart Example with Zoom

ডেটাসেট উদাহরণ

Zoom Chart Code

Zoom Integration

২. Tooltip Implementation in DC.js

Tooltip Example for Bar Chart

ডেটাসেট উদাহরণ

Bar Chart with Tooltip Code

HTML Code for Bar Chart

Tooltip Integration

৩. সম্পূর্ণ কোড উদাহরণ

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

৫. `dc.renderAll()` দিয়ে চার্ট রেন্ডার করা: