داده نگار

ایجاد نقشه حبابی (bubble map) با کتابخانه observable plot

۱۷ مهر ۱۴۰۳ آموزش سایت کتابخانه observable plot

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

مقدمه

نقشه حبابی (Bubble Map) نوعی نمودار جغرافیایی است که در آن از دایره‌هایی با اندازه‌های متغیر برای نمایش مقدار داده‌های مربوط به هر منطقه استفاده می‌شود. در این مثال، ما از داده‌های جمعیتی استان‌های ایران برای تعیین اندازه حباب‌ها استفاده می‌کنیم. با استفاده از Observable Plot، به‌سادگی می‌توانیم این نوع نقشه را ایجاد کنیم.

کد کامل نمودار:

iranMap.features.forEach(d => {
const provinceData = iranPopulation.find(p => p.province === d.properties.name);
if (provinceData) {
d.properties.population = provinceData.population;
}
});
plotly.plot({
width: 900,
height: 800,
r: {
range: [0, 50]
},
x:{axis:null},
y:{axis:null},
marks: [
plotly.geo(iranMap, {stroke: "black", fill: "lightgray"}),
plotly.dot(
iranMap.features.map(d => ({
name: d.properties.name,
centroid: d3.geoCentroid(d),
population: d.properties.population
})),
{
x: d => d.centroid[0],
y: d => d.centroid[1],
r: d => d.population / 50000,
fill: "steelblue",
opacity: 0.7
}
)
]
})

پیش‌نیازها

قبل از شروع به کار، نیاز به دو منبع داده دارید:

فایل GeoJSON مربوط به نقشه ایران که شامل اطلاعات مرزی و جغرافیایی استان‌ها است.
داده‌های جمعیتی استان‌های ایران که شامل نام استان و جمعیت هر استان است.

بارگذاری داده‌های GeoJSON و جمعیتی

ابتدا باید داده‌های نقشه ایران (GeoJSON) و داده‌های جمعیتی را به دفتریادداشت خود اضافه کنید. داده‌های جمعیتی شامل نام هر استان و جمعیت آن است که به‌صورت یک آرایه از اشیاء JSON تعریف شده است. سپس این داده‌ها به ویژگی‌های هر استان در فایل GeoJSON متصل می‌شوند.

برای دریافت فایل GeoJSON ایران می‌توانید به مخزن گیت‌هاب داده نگار مراجعه کنید.

ابتدا داده‌های GeoJSON را بررسی می‌کنیم و برای هر استان، جمعیت مربوطه را از داده‌های جمعیتی پیدا کرده و به ویژگی‌های استان در نقشه اضافه می‌کنیم.

iranMap.features.forEach(d => {
const provinceData = iranPopulation.find(p => p.province === d.properties.name);
if (provinceData) {
d.properties.population = provinceData.population;
}
});

. تنظیمات کتابخانه Observable Plot

پس از اضافه کردن داده‌های جمعیتی به نقشه، با استفاده از Observable Plot نقشه را رسم می‌کنیم. در این مرحله، مرزهای استان‌ها با رنگ خاکستری و حباب‌هایی با رنگ آبی و براساس جمعیت هر استان رسم می‌شوند.

plotly.plot({
width: 900,
height: 800,
r: {
range: [0, 50]
},
x:{axis:null},
y:{axis:null},
marks: [
plotly.geo(iranMap, {stroke: "black", fill: "lightgray"}),
plotly.dot(
iranMap.features.map(d => ({
name: d.properties.name,
centroid: d3.geoCentroid(d),
population: d.properties.population
})),
{
x: d => d.centroid[0],
y: d => d.centroid[1],
r: d => d.population / 50000,
fill: "steelblue",
opacity: 0.7
}
)
]
})

plotly.plot({ ... }): این تابع برای رسم نمودار و نقشه استفاده می‌شود. داخل این تابع، مشخصات و عناصر مختلف نقشه و نمودار مانند اندازه و نوع داده‌ها تعریف می‌شوند.
width: 900: این خط عرض نقشه را تعیین می‌کند. در اینجا عرض نقشه برابر با 900 پیکسل است.
height: 800: این خط ارتفاع نقشه را تعیین می‌کند. ارتفاع نقشه نیز برابر با 800 پیکسل تنظیم شده است.
r: { range: [0, 50] }: این بخش برای تنظیم مقیاس شعاع حباب‌ها استفاده می‌شود. محدوده شعاع‌ها از 0 تا 50 پیکسل تنظیم شده است. این مقدار برای تعیین اندازه حباب‌های دایره‌ای در نمودار براساس داده‌های ورودی کاربرد دارد.
x: {axis: null} و y: {axis: null}: این خطوط نشان می‌دهند که محورها (X و Y) در نمودار نباید نمایش داده شوند. از آنجا که ما نیازی به نمایش مختصات دقیق جغرافیایی به‌صورت محور نداریم، آن‌ها را غیرفعال می‌کنیم.
marks: [ ... ]: این قسمت برای تعیین عناصر و نشانه‌های گرافیکی در نقشه استفاده می‌شود. در اینجا ما دو نوع نشانه داریم: geo برای نمایش نقشه و مرزهای استان‌ها، و dot برای نمایش حباب‌ها براساس جمعیت هر استان.
plotly.geo(iranMap, {stroke: "black", fill: "lightgray"}): این خط نقشه ایران را براساس داده‌های iranMap (GeoJSON) رسم می‌کند.
- stroke: "black" مرز استان‌ها را با رنگ سیاه رسم می‌کند.
- fill: "lightgray" باعث می‌شود که استان‌ها با رنگ خاکستری روشن پر شوند.
plotly.dot(..., { ... }): این خط مسئول رسم حباب‌های مربوط به هر استان است.
- dot برای رسم دایره‌ها (حباب‌ها) استفاده می‌شود که اندازه آن‌ها براساس داده‌های جمعیت تعیین می‌شود.
iranMap.features.map(d => ({ ... })): این تابع تمام استان‌های موجود در iranMap را پیمایش می‌کند و برای هر استان یک شیء جدید می‌سازد که شامل اطلاعاتی مانند نام، مرکز هندسی (centroid) و جمعیت آن است.
name: d.properties.name: این خط نام هر استان را از داده‌های GeoJSON استخراج می‌کند و به‌عنوان یک ویژگی ذخیره می‌کند.
centroid: d3.geoCentroid(d): این تابع با استفاده از d3.geoCentroid مرکز هندسی (centroid) هر استان را محاسبه می‌کند. این مرکز به‌عنوان مختصات نقطه‌ای در نقشه به کار می‌رود تا حباب در آن نقطه رسم شود.
population: d.properties.population: این خط جمعیت هر استان را که قبلاً به ویژگی‌های آن اضافه شده بود، استخراج می‌کند.
x: d => d.centroid[0] و y: d => d.centroid[1]: این خطوط مختصات طول جغرافیایی (x) و عرض جغرافیایی (y) مرکز هندسی هر استان را مشخص می‌کنند. حباب‌ها در این نقاط قرار می‌گیرند.
r: d => d.population / 50000: این خط اندازه شعاع حباب‌ها را براساس جمعیت استان‌ها تعیین می‌کند. جمعیت هر استان بر عدد 50000 تقسیم می‌شود تا شعاع به اندازه مناسبی تنظیم شود.
fill: "steelblue": این خط رنگ حباب‌ها را تعیین می‌کند. رنگ steelblue برای پر کردن حباب‌ها استفاده شده است.
opacity: 0.7: این خط شفافیت حباب‌ها را تنظیم می‌کند. مقدار 0.7 باعث می‌شود که حباب‌ها نیمه‌شفاف باشند تا نقشه زیر آن‌ها نیز به خوبی دیده شود.

در این مقاله آموزشی، نحوه ایجاد یک نقشه حبابی براساس جمعیت استان‌های ایران با استفاده از کتابخانه Observable Plot را بررسی کردیم. این نقشه می‌تواند به‌طور مؤثری داده‌های جمعیتی را به‌صورت بصری نمایش دهد و به تحلیل بهتر اطلاعات کمک کند.

برای رسم این نمودار با استفاده از کتابخانه D3 می‌توانید به مقاله «ایجاد نقشه حبابی (bubble map) با استفاده از کتابخانه D3» مراجعه کنید.