داده نگار

ایجاد نمودار scatterplot با کتابخانه Observable Plot

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

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

کد کامل:

plotly.plot({
marks: [
plotly.dot(education, {x: "age", y: "men", fill: "steelblue", r: 5, title: d => `Men: ${d.men}`}), 
plotly.dot(education, {x: "age", y: "women", fill: "orange", r: 5, title: d => `Women: ${d.women}`})
],
x: {
label: "مقدار دو",
domain: education.map(d => d.age),
padding: 0.1
},
y: {
label: "مقدار یک",
domain: [0, 4]
},
grid: true,
height: 400,
marginBottom: 40,
marginTop: 30,
});

خروجی کد:

توضیح هر بخش از کد:

plotly.plot({ ... }) این خط از کد، تابع اصلی plot از کتابخانه Observable Plot را فراخوانی می‌کند که تنظیمات و داده‌های لازم برای ایجاد نمودار را می‌پذیرد. در این تابع، تمام اطلاعات مربوط به محور‌ها، داده‌ها و ویژگی‌های بصری نمودار مشخص می‌شود.
marks: [ ... ] در بخش marks، تمامی نقاط یا نشان‌های موجود در نمودار را تعریف می‌کنیم. در اینجا، دو دسته داده (مردان و زنان) به صورت نقاط یا dots در نمودار نمایش داده می‌شود.
plotly.dot(education, {x: "age", y: "men", fill: "steelblue", r: 5, title: d => Men: ${d.men}})
- plotly.dot: این تابع برای رسم نقاط در نمودار استفاده می‌شود.
- education: این آرایه شامل داده‌های ماست که هر داده شامل اطلاعات مربوط به سن، تعداد مردان و زنان است.
- x: "age": مقدار محور X با استفاده از فیلد age از داده‌ها تنظیم می‌شود.
- y: "men": مقدار محور Y برای داده‌های مردان از فیلد men تنظیم می‌شود.
- fill: "steelblue": رنگ نقاط مربوط به مردان به رنگ آبی (steelblue) تنظیم شده است.
- r: 5: اندازه شعاع هر نقطه برابر ۵ است.
- title: d => Men: ${d.men}: این تابع برای نمایش عنوان روی هر نقطه به کار می‌رود و مقدار men` در آن نمایش داده می‌شود.
plotly.dot(education, {x: "age", y: "women", fill: "orange", r: 5, title: d => Women: ${d.women}})
- x: "age": همانطور که قبلاً گفتیم، محور X با استفاده از سن تنظیم می‌شود.
- y: "women": محور Y برای داده‌های زنان با استفاده از فیلد women تنظیم می‌شود.
- fill: "orange": نقاط مربوط به زنان با رنگ نارنجی (orange) نمایش داده می‌شوند.
x: { label: "مقدار دو", domain: education.map(d => d.age), padding: 0.1 } در این بخش تنظیمات مربوط به محور X انجام می‌شود:
- label: "مقدار دو": برچسب محور X "مقدار دو" نامگذاری شده است.
- domain: education.map(d => d.age): دامنه‌ی محور X با استفاده از آرایه‌ی education و مقادیر age برای نمایش سنین مختلف تعیین شده است.
- padding: 0.1: فاصله‌ای بین دسته‌های محور X به میزان ۱۰٪ ایجاد شده است تا نقاط از هم کمی فاصله داشته باشند.
y: { label: "مقدار یک", domain: [0, 4] } در این بخش تنظیمات مربوط به محور Y مشخص می‌شود:
- label: "مقدار یک": برچسب محور Y "مقدار یک" تنظیم شده است.
- domain: [0, 4]: دامنه‌ی محور Y بین ۰ تا ۴ تنظیم شده است که نشان‌دهنده محدوده مقادیر مردان و زنان در داده‌هاست.
grid: true این خط نشان می‌دهد که خطوط شبکه (grid) در پس‌زمینه‌ی نمودار نمایش داده می‌شوند. خطوط شبکه به خوانایی بهتر نمودار کمک می‌کنند.
height: 400 ارتفاع نمودار را ۴۰۰ پیکسل تنظیم می‌کند. این تنظیم به شما امکان می‌دهد تا ارتفاع بوم (canvas) نمودار را تعیین کنید.
marginBottom: 40 فاصله‌ای به اندازه ۴۰ پیکسل در پایین نمودار برای اطمینان از این که محور X و برچسب‌های آن به درستی نمایش داده شوند، تنظیم شده است.
marginTop: 30 فاصله‌ای به اندازه ۳۰ پیکسل در بالای نمودار تعیین شده تا فضای کافی برای نمایش عنوان‌ها یا هر متن دیگری فراهم شود.