DC.js দিয়ে GeoJSON ডেটা লোড করে মানচিত্রে (Map) ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা যেতে পারে। সাধারণত, DC.js মূলত চার্ট তৈরির জন্য ব্যবহৃত হলেও, আপনি D3.js এর সাথে GeoJSON ডেটা একত্রিত করে ইন্টারেক্টিভ ম্যাপ তৈরি করতে পারেন। এই গাইডে, আমরা দেখব কীভাবে GeoJSON ব্যবহার করে DC.js এবং D3.js এর মাধ্যমে মানচিত্রে ডেটা লোড এবং ভিজ্যুয়ালাইজেশন তৈরি করা যায়।
১. প্রয়োজনীয় ফাইল যুক্ত করা
প্রথমে আপনাকে DC.js, D3.js, এবং Leaflet.js বা Mapbox.js এর সিডিএন লিঙ্কগুলো যুক্ত করতে হবে। Leaflet.js বা Mapbox.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">
<!-- Leaflet.js for Map -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
২. 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 GeoJSON Map Example</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">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
<h1>DC.js with GeoJSON Map Example</h1>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
৩. GeoJSON ডেটা লোড করা
GeoJSON ফাইলটি লোড করতে D3.js ব্যবহার করা হয়। এটি একটি ম্যাপের আকার এবং ডেটা দিয়ে মানচিত্রে পয়েন্ট, লাইন বা পলিগন তৈরি করতে সাহায্য করে।
উদাহরণ: GeoJSON ডেটা
এখানে একটি সিম্পল GeoJSON ডেটা উদাহরণ দেওয়া হলো:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-0.1276, 51.5074]
},
"properties": {
"name": "London",
"value": 10
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.0060, 40.7128]
},
"properties": {
"name": "New York",
"value": 20
}
}
]
}
৪. Leaflet.js এবং DC.js এর সাথে GeoJSON লোড করা
Leaflet.js এর মাধ্যমে GeoJSON ডেটা লোড এবং প্রদর্শন করা যায়। আমরা DC.js ব্যবহার করে এটির ওপর বিশ্লেষণ করতে পারি।
ডেটা লোড এবং মানচিত্র তৈরি
// Create the map object
const map = L.map('map').setView([51.5074, -0.1276], 2); // Default to London
// Set the tile layer for the map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Load GeoJSON data
d3.json("path_to_geojson_file.json").then(function(geojsonData) {
// Add GeoJSON to map
L.geoJSON(geojsonData, {
onEachFeature: function(feature, layer) {
// Add popups with feature properties
layer.bindPopup("<strong>" + feature.properties.name + "</strong><br>Value: " + feature.properties.value);
}
}).addTo(map);
// Use DC.js to filter or group the GeoJSON data
const ndx = crossfilter(geojsonData.features);
// Example of grouping based on value
const valueDimension = ndx.dimension(d => d.properties.value);
const valueGroup = valueDimension.group().reduceSum(d => d.properties.value);
// You can now create DC.js charts like pie chart or bar chart using valueGroup
const pieChart = dc.pieChart("#pie-chart");
pieChart
.dimension(valueDimension)
.group(valueGroup)
.width(300)
.height(300)
.radius(100)
.legend(dc.legend());
dc.renderAll();
});
এই কোডে কী হচ্ছে:
- Map Initialization: Leaflet.js এর মাধ্যমে মানচিত্র তৈরি করা হয়েছে এবং
L.tileLayer()দিয়ে OpenStreetMap এর টাইল লেয়ার যোগ করা হয়েছে। - GeoJSON Loading: D3.js দিয়ে GeoJSON ডেটা লোড করা হয়েছে।
- Popup Binding: GeoJSON এর প্রতিটি ফিচারে পপআপ যোগ করা হয়েছে, যা ফিচারের নাম এবং মান দেখাবে।
- DC.js Integration: DC.js দিয়ে GeoJSON ডেটার ওপর বিশ্লেষণ করা হচ্ছে (এখানে value ভিত্তিক গ্রুপিং দেখানো হয়েছে) এবং একটি Pie Chart তৈরি করা হয়েছে।
৫. Pie Chart Integration
ডেটার উপর বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশন করার জন্য DC.js ব্যবহার করা যায়। Pie Chart তৈরি করা হলে এটি GeoJSON ডেটার উপর ভিত্তি করে একটি ড্যাশবোর্ড উপস্থাপন করবে।
<div id="pie-chart"></div>
const pieChart = dc.pieChart("#pie-chart");
pieChart
.dimension(valueDimension)
.group(valueGroup)
.width(300)
.height(300)
.radius(100)
.legend(dc.legend());
৬. পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js with GeoJSON Map</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">
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
<h1>DC.js with GeoJSON Map Example</h1>
<div id="map" style="width: 600px; height: 400px;"></div>
<div id="pie-chart"></div>
<script>
const data = [
{ category: "A", value1: 30, value2: 20 },
{ category: "B", value1: 40, value2: 60 },
{ category: "C", value1: 50, value2: 70 }
];
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value1);
const map = L.map('map').setView([51.5074, -0.1276], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
d3.json("path_to_geojson_file.json").then(function(geojsonData) {
L.geoJSON(geojsonData).addTo(map);
const pieChart = dc.pieChart("#pie-chart");
pieChart
.dimension(categoryDimension)
.group(categoryGroup)
.width(300)
.height(300)
.radius(100)
.legend(dc.legend());
dc.renderAll();
});
</script>
</body>
</html>
সারাংশ
- DC.js এবং Leaflet.js বা Mapbox.js এর সাথে GeoJSON ডেটা একত্রিত করে আপনি ইন্টারেক্টিভ ম্যাপ তৈরি করতে পারেন।
- DC.js ডেটা বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশন করে, এবং Leaflet.js বা Mapbox.js ম্যাপের ওপর ডেটা পয়েন্ট প্রদর্শন করে।
- GeoJSON ডেটার উপর কাজ করতে D3.js ব্যবহার করে ডেটা লোড এবং ম্যাপে প্লট করা যায়।
এইভাবে আপনি DC.js ব্যবহার করে GeoJSON ডেটা ভিজ্যুয়ালাইজেশন এবং বিশ্লেষণ করতে পারবেন।
Content added By
Read more
