DC.js একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং ডাইনামিক করে তোলে। GeoChoropleth Chart হলো একটি ভৌগোলিক ডেটা ভিজ্যুয়ালাইজেশন যেটিতে বিভিন্ন অঞ্চল বা অবস্থানের উপর ভিত্তি করে ডেটা প্রস্থাপন করা হয়। এই চাটে GeoJSON ডেটা ব্যবহৃত হয় যেখানে একটি নির্দিষ্ট অঞ্চলের উপর ডেটা আভ্যন্তরীণভাবে রঙের মাধ্যমে প্রদর্শিত হয়।
এই গাইডে, আমরা দেখব কিভাবে DC.js ব্যবহার করে GeoChoropleth Chart তৈরি করা যায়।
১. প্রয়োজনীয় ফাইল যুক্ত করা
প্রথমে, 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo/1.10.1/d3-geo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
এছাড়াও, GeoChoropleth Chart তৈরি করার জন্য GeoJSON ডেটার প্রয়োজন হবে। এটি একটি বিশেষ ধরনের JSON ফরম্যাট যেখানে বিভিন্ন ভৌগোলিক অঞ্চল বা জেলা সম্পর্কিত তথ্য থাকে। আপনি কোন নির্দিষ্ট GeoJSON ফাইল ব্যবহার করতে পারেন, যেমন দেশের মানচিত্র বা রাজ্যগুলির মানচিত্রের ডেটা।
২. HTML ফাইল তৈরি
GeoChoropleth Chart দেখানোর জন্য একটি ডিভ তৈরি করতে হবে। এছাড়াও, একটি নির্দিষ্ট ডিভে মানচিত্রটি রেন্ডার হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoChoropleth Chart with DC.js</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo/1.10.1/d3-geo.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 GeoChoropleth Chart</h1>
<div id="geo-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
৩. GeoJSON ডেটা লোড করা
GeoChoropleth Chart তৈরি করার জন্য আপনাকে GeoJSON ডেটা লোড করতে হবে। উদাহরণস্বরূপ, আমরা একটি মার্কিন যুক্তরাষ্ট্রের রাজ্যগুলির GeoJSON ডেটা ব্যবহার করব।
d3.json("https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.geojson").then(function(geojson) {
// ডেটা প্রক্রিয়া এবং চার্ট তৈরি করা হবে
});
৪. DC.js এর মাধ্যমে GeoChoropleth Chart তৈরি
এখন আমরা DC.js ব্যবহার করে GeoChoropleth Chart তৈরি করতে পারব। এখানে, প্রতিটি রাজ্যের উপর ভিত্তি করে রঙ পরিবর্তিত হবে এবং এটি Crossfilter দিয়ে ফিল্টার এবং গ্রুপ করা হবে।
ডেটাসেট তৈরি এবং Crossfilter সেটআপ
const data = [
{ state: "Alabama", value: 10 },
{ state: "Alaska", value: 20 },
{ state: "Arizona", value: 15 },
// আরও রাজ্য এবং মান যোগ করুন
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
// state ডাইমেনশন এবং গ্রুপ তৈরি
const stateDimension = ndx.dimension(d => d.state);
const stateGroup = stateDimension.group().reduceSum(d => d.value);
GeoChoropleth Chart তৈরি
const geoChart = dc.geoChoroplethChart("#geo-chart");
geoChart
.width(800) // চার্টের প্রস্থ
.height(500) // চার্টের উচ্চতা
.dimension(stateDimension) // ডাইমেনশন
.group(stateGroup) // গ্রুপ
.colors(d3.scaleQuantize().domain([0, 100]).range(["#f0f0f0", "#e0e0e0", "#d0d0d0", "#c0c0c0", "#b0b0b0"])) // রঙের স্কিম
.colorDomain([0, 100]) // রঙের পরিসীমা
.colorCalculator(d => d ? geoChart.colors()(d) : "#ccc") // রঙ ক্যালকুলেটর
.overlayGeoJson(geojson.features, "state") // GeoJSON লেয়ার যোগ করা
.projection(d3.geoAlbersUsa()); // মানচিত্রের projection
কাস্টমাইজেশন:
- রঙ কাস্টমাইজেশন (Colors):
colors(d3.scaleQuantize().domain([0, 100]))দিয়ে ডেটার মান অনুযায়ী রঙ কাস্টমাইজ করা হয়েছে। - GeoJSON:
overlayGeoJson()ব্যবহার করে GeoJSON ডেটা লোড করা হয়েছে এবংprojection(d3.geoAlbersUsa())দিয়ে মানচিত্রের projection নির্ধারণ করা হয়েছে। - Dimension এবং Grouping: Crossfilter দিয়ে stateDimension এবং stateGroup তৈরি করা হয়েছে, যা GeoChoropleth 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 GeoChoropleth 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo/1.10.1/d3-geo.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 GeoChoropleth Chart</h1>
<div id="geo-chart"></div>
<script>
// ডেটাসেট
const data = [
{ state: "Alabama", value: 10 },
{ state: "Alaska", value: 20 },
{ state: "Arizona", value: 15 },
{ state: "Arkansas", value: 30 },
{ state: "California", value: 40 },
{ state: "Colorado", value: 50 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const stateDimension = ndx.dimension(d => d.state);
const stateGroup = stateDimension.group().reduceSum(d => d.value);
// GeoJSON ডেটা লোড করা
d3.json("https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.geojson").then(function(geojson) {
// GeoChoropleth Chart তৈরি
const geoChart = dc.geoChoroplethChart("#geo-chart");
geoChart
.width(800)
.height(500)
.dimension(stateDimension)
.group(stateGroup)
.colors(d3.scaleQuantize().domain([0, 100]).range(["#f0f0f0", "#e0e0e0", "#d0d0d0", "#c0c0c0", "#b0b0b0"]))
.colorDomain([0, 100])
.colorCalculator(d => d ? geoChart.colors()(d) : "#ccc")
.overlayGeoJson(geojson.features, "state")
.projection(d3.geoAlbersUsa());
dc.renderAll();
});
</script>
</body>
</html>
৬. সারাংশ
- GeoChoropleth Chart তৈরি করতে DC.js ব্যবহার করা যায়, যেখানে GeoJSON ডেটা এবং Crossfilter এর মাধ্যমে ডেটার ফিল্টারিং এবং গ্রুপিং করা হয়।
- Colors এবং projection কাস্টমাইজ করার মাধ্যমে মানচিত্রের উপস্থাপনা আরও আকর্ষণীয় এবং সহজে বোঝার যোগ্য হয়।
- OverlayGeoJson এবং d3.geoAlbersUsa() ব্যবহার করে GeoJSON ডেটা প্রক্ষেপণ এবং মানচিত্রের স্কেল কাস্টমাইজ করা যায়।
DC.js এর মাধ্যমে আপনি সহজেই GeoChoropleth Chart তৈরি করতে পারেন, যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য অত্যন্ত কার্যকরী।
Read more
