داده نگار

ایجاد نقشه ایران با استفاده از کتابخانه D3

در این مقاله، قصد داریم نحوه رسم نقشه ایران با استفاده از کتابخانه D3.js را در داده نگار به شما آموزش دهیم. کتابخانه D3 به ما امکان می‌دهد تا با استفاده از داده‌های GeoJSON، نقشه‌های تعاملی ایجاد کنیم. در این مثال، از داده‌های GeoJSON برای نمایش نقشه استان‌های ایران استفاده خواهیم کرد.

کد:

var width = 800;
var height = 800;
var svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
var projection = d3.geoMercator()
.center([54, 32])
.scale(2200)
.translate([width / 2, height / 2]);
var path = d3.geoPath().projection(projection);
svg.append("g")
.selectAll("path")
.data(iran.features)
.join("path")
.attr("d", path)
.attr("fill", "grey")
.style("stroke", "#fff")
.append("title")
.text(function(d) { return d.properties.name; });
svg.node()

خروجی کد:

بارگذاری فایل geojson

ابتدا فایل geojson ایران را از لینک دریافت کرده و سپس آن را در داده نگار بارگذاری می‌کنیم. پس از بارگذاری فایل، داده‌های فایل با نام فایل در دسترس است. در اینجا نام فایل iran است.

تنظیم ابعاد SVG

ابتدا ابعاد SVG را تعیین می‌کنیم که قرار است نقشه در آن رسم شود. در این قسمت، یک عنصر SVG با عرض و ارتفاع ۸۰۰ پیکسل ایجاد می‌کنیم.

var width = 800 مشخص کردن مقدار عرض svg
var height = 800 مشخص کردن مقدار ارتفاع svg
var svg = d3.create("svg") ایجاد svg
attr('width', width) مقداردهی عرض svg
attr('height', height) مقداردهی ارتفاع svg

ایجاد طرح نقشه و مسیر

برای رسم نقشه نیاز به یک طرح (projection) و مسیر (path) داریم. طرح نقشه به ما کمک می‌کند که مختصات جغرافیایی را به مختصات دوبعدی تبدیل کنیم.

var projection = d3.geoMercator() استفاده از طرح geoMercator برای ایجاد نقشه
center([54, 32]) مشخص کردن مرکز نقشه
scale(2200) تنظیم مقیاس نقشه
translate([width / 2, height / 2]); جابجایی نقشه به وسط svg
var path = d3.geoPath().projection(projection); ایجاد تابع مسیر جدید که آن را به متغیر path اختصاص می‌دهد. مشخص کردن تابع مسیر تا از طرح projection استفاده کند.

بارگذاری فایل GeoJSON و رسم نقشه

در این بخش، داده‌های GeoJSON را بارگذاری کرده و نقشه را رسم می‌کنیم.

svg.append("g") ایجاد تگ g (یک گروه در svg)
selectAll("path") انتخاب تمام عناصر path در گروه <g> که در حال حاضر وجود دارند. اگر وجود نداشته باشد ایجاد می‌شوند.
data(iran.features) داده‌های GeoJSON را به عناصر path متصل می‌کند. iran.features یک آرایه از ویژگی‌های GeoJSON است که هر کدام نمایانگر یک استان از نقشه ایران هستند.
join("path") عناصر path جدید را برای هر ویژگی در داده‌ها ایجاد می‌کند.
attr("d", path) ویژگی d هر عنصر path را تنظیم می‌کند. d مشخص می‌کند که مسیر (شکل) هر استان چگونه ترسیم شود.
attr("fill", "grey") مشخص کردن رنگ هر استان
style("stroke", "#fff") مشخص کردن رنگ حاشیه هر استان
append("title") ایجاد عنوان برای استان
text(function(d) { return d.properties.name; }); نمایش نام هر استان با قرار دادن ماوس بر روی آن

با اجرای این کد، نقشه ایران با استان‌های مختلف در یک عنصر SVG نمایش داده می‌شود. هر استان با رنگ خاکستری پر شده و مرزهای بین استان‌ها با رنگ سفید نمایش داده می‌شود. همچنین، با قرار گرفتن نشانگر ماوس روی هر استان، نام آن به صورت یک ابزارک نمایان می‌شود.