استخدام Plotly.js في الرسوم البيانية

تُعد Plotly.js من أشهر مكتبات JavaScript
المستخدمة في رسم البيانات والمخططات داخل المتصفح.
وتوضح الصفحة الأصلية أنها مكتبة قوية تدعم
عددًا كبيرًا من أنواع الرسوم، بما في ذلك
الرسوم ثنائية الأبعاد، وبعض الرسوم الإحصائية،
إضافة إلى أنواع أخرى متعددة يمكن استخدامها
في تطبيقات الذكاء الاصطناعي وتحليل البيانات.

ما هي Plotly.js؟

الفكرة الأساسية في Plotly.js أنها مكتبة تسمح لك
بناء الرسوم البيانية من خلال تعريف
البيانات Data والتخطيط Layout،
ثم عرض النتيجة داخل عنصر HTML محدد.

في معظم الأمثلة المعروضة في الصفحة،
يتم استخدام الدالة التالية لعرض الرسم:

Plotly.newPlot(\"myPlot\", data, layout);

وهذا يعني أننا نحتاج عادة إلى:

• عنصر في الصفحة يحمل المعرف myPlot
• مصفوفة أو كائن بيانات باسم data
• كائن تخطيط باسم layout

المخططات المبعثرة Scatter Plots

تبدأ الصفحة بعرض مثال على
Scatter Plot باستخدام Plotly.js.
في هذا المثال يتم تمثيل العلاقة بين:

• مساحة المنازل على المحور الأفقي
• السعر على المحور الرأسي

ويتم تعريف البيانات باستخدام قيم x وy،
ثم تحديد أن نمط الرسم هو
markers وأن النوع هو
scatter.

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data
const data = [{
x: xArray,
y: yArray,
mode:\"markers\",
type:\"scatter\"
}];

// Define Layout
const layout = {
xaxis: {range: [40, 160], title: \"Square Meters\"},
yaxis: {range: [5, 16], title: \"Price in Millions\"},
title: \"House Prices vs. Size\"
};

Plotly.newPlot(\"myPlot\", data, layout);

هذا النوع من الرسوم مناسب جدًا عندما نريد عرض البيانات
كنقاط منفصلة ورؤية العلاقة العامة بينها.

الرسوم الخطية Line Graphs

بعد ذلك تنتقل الصفحة إلى رسم
Line Graph.
وهنا يتم استخدام نفس البيانات تقريبًا،
لكن الفرق أن نمط الرسم يصبح:

mode: \"lines\"

وبالتالي تتحول النقاط إلى خط متصل بدلًا من نقاط منفصلة.

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data
const data = [{
x: xArray,
y: yArray,
mode: \"lines\",
type: \"scatter\"
}];

// Define Layout
const layout = {
xaxis: {range: [40, 160], title: \"Square Meters\"},
yaxis: {range: [5, 16], title: \"Price in Millions\"},
title: \"House Prices vs Size\"
};

// Display using Plotly
Plotly.newPlot(\"myPlot\", data, layout);

هذا المثال يوضح أن Plotly.js تسمح باستخدام النوع نفسه
مع تغيير بسيط في طريقة العرض فقط.

الرسوم الخطية الرياضية Linear Graphs

تعرض الصفحة بعد ذلك مثالًا على رسم
دالة خطية بدلًا من بيانات ثابتة جاهزة.
في هذا المثال يتم تعريف تعبير رياضي،
ثم توليد قيم x وy باستخدام حلقة.

let exp = \"x + 17\";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 1) {
yValues.push(eval(exp));
xValues.push(x);
}

// Define Data
const data = [{
x: xValues,
y: yValues,
mode: \"lines\"
}];

// Define Layout
const layout = {title: \"y = \" + exp};

// Display using Plotly
Plotly.newPlot(\"myPlot\", data, layout);

الفكرة هنا أن Plotly.js لا تقتصر على عرض البيانات الموجودة فقط،
بل يمكنها أيضًا رسم نتائج معادلات يتم توليدها برمجيًا.

رسم أكثر من خط Multiple Lines

ثم تعرض الصفحة مثالًا أكثر تقدمًا،
وهو رسم أكثر من خط في نفس المخطط.
في هذا المثال يتم تعريف 3 تعبيرات مختلفة:

let exp1 = \"x\";
let exp2 = \"1.5*x\";
let exp3 = \"1.5*x + 7\";

ثم يتم توليد 3 مجموعات من القيم،
ووضعها جميعًا داخل مصفوفة بيانات واحدة.

let exp1 = \"x\";
let exp2 = \"1.5*x\";
let exp3 = \"1.5*x + 7\";

// Generate values
const x1Values = [];
const x2Values = [];
const x3Values = [];
const y1Values = [];
const y2Values = [];
const y3Values = [];

for (let x = 0; x <= 10; x += 1) {
x1Values.push(x);
x2Values.push(x);
x3Values.push(x);
y1Values.push(eval(exp1));
y2Values.push(eval(exp2));
y3Values.push(eval(exp3));
}

// Define Data
const data = [
{x: x1Values, y: y1Values, mode:\"lines\"},
{x: x2Values, y: y2Values, mode:\"lines\"},
{x: x3Values, y: y3Values, mode:\"lines\"}
];

// Define Layout
const layout = {title: \"[y=\" + exp1 + \"] [y=\" + exp2 + \"] [y=\" + exp3 + \"]\"};

// Display using Plotly
Plotly.newPlot(\"myPlot\", data, layout);

هذا المثال مفيد جدًا في مقارنة أكثر من علاقة رياضية
أو أكثر من سلسلة بيانات داخل نفس الرسم.

الرسوم العمودية Bar Charts

بعد الرسوم الخطية، تنتقل الصفحة إلى
Bar Charts.
وهنا يتم تعريف أسماء الدول على المحور الأفقي،
وكميات الإنتاج على المحور الرأسي.

const xArray = [\"Italy\",\"France\",\"Spain\",\"USA\",\"Argentina\"];
const yArray = [55, 49, 44, 24, 15];

const data = [{
x: xArray,
y: yArray,
type: \"bar\"
}];

const layout = {title:\"World Wide Wine Production\"};

Plotly.newPlot(\"myPlot\", data, layout);

هذا النوع من الرسوم مفيد للمقارنات المباشرة
بين قيم منفصلة أو فئات متعددة.

الرسوم العمودية الأفقية Horizontal Bar Charts

توضح الصفحة أيضًا أنه يمكن تحويل الأعمدة إلى
شكل أفقي بإضافة خاصية:

orientation: \"h\"

وفي هذه الحالة يتم عكس دور x وy بحيث تصبح
القيم الرقمية على المحور الأفقي،
والفئات النصية على المحور الرأسي.

const xArray = [55, 49, 44, 24, 15];
const yArray = [\"Italy\",\"France\",\"Spain\",\"USA\",\"Argentina\"];

const data = [{
x: xArray,
y: yArray,
type: \"bar\",
orientation: \"h\"
}];

const layout = {title:\"World Wide Wine Production\"};

Plotly.newPlot(\"myPlot\", data, layout);

الرسوم الدائرية Pie Charts

بعد ذلك تعرض الصفحة طريقة تحويل نفس البيانات
إلى Pie Chart.
وتوضح أن التغيير الأساسي هنا هو استبدال
x وy بـ:

• labels
• values

مع تغيير النوع إلى:

type: \"pie\"

والشكل البرمجي يكون كالتالي:

const data = [{
labels: xArray,
values: yArray,
type: \"pie\"
}];

مخططات Donut

ثم توضّح الصفحة أن تحويل الرسم الدائري إلى
Donut Chart
يحتاج فقط إلى إضافة فتحة داخلية باستخدام:

hole: .4

ليصبح المثال كالتالي:

const data = [{
labels: xArray,
values: yArray,
hole: .4,
type: \"pie\"
}];

وهذا يوضح أن Plotly.js تسمح بتعديل شكل الرسم
بإضافات بسيطة جدًا دون تغيير جذري في الكود.

رسم المعادلات Plotting Equations

في الجزء الأخير، تعرض الصفحة مثالًا على
رسم معادلة رياضية مباشرة.
وفي هذا المثال يتم استخدام:

let exp = \"Math.sin(x)\";

ثم يتم توليد قيم كثيرة بين 0 و10
بخطوة صغيرة مقدارها 0.1،
وبعد ذلك رسمها بخط متصل.

let exp = \"Math.sin(x)\";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.1) {
yValues.push(eval(exp));
xValues.push(x);
}

// Display using Plotly
const data = [{x:xValues, y:yValues, mode:\"lines\"}];
const layout = {title: \"y = \" + exp};
Plotly.newPlot(\"myPlot\", data, layout);

هذا المثال يوضح أن Plotly.js ليست فقط لعرض بيانات جاهزة،
بل يمكن استخدامها أيضًا لتصور سلوك الدوال والمعادلات الرياضية.

ما الذي يميز Plotly.js؟

من خلال أمثلة الصفحة يتضح أن Plotly.js تتميز بأنها:

• تدعم أكثر من نوع من الرسوم داخل نفس المكتبة
• تسمح باستخدام البنية نفسها تقريبًا مع تغييرات بسيطة
• مناسبة للبيانات المبعثرة والخطوط والأعمدة والدوائر
• مناسبة أيضًا لرسم المعادلات الرياضية

وهذا يجعلها خيارًا قويًا جدًا في مشاريع الذكاء الاصطناعي
وعرض النتائج التعليمية أو التحليلية داخل الويب.

الخلاصة

يوضح هذا الدرس أن Plotly.js مكتبة قوية
لرسم البيانات في JavaScript، وتسمح بإنشاء أنواع متعددة
من الرسوم مثل:
Scatter Plots وLine Graphs
وLinear Graphs وMultiple Lines
وBar Charts وHorizontal Bar Charts
وPie Charts وDonut Charts
وحتى رسم المعادلات الرياضية.
كما توضح الصفحة أن فكرة Plotly.js الأساسية تعتمد
على تعريف data وlayout
ثم عرض الرسم باستخدام
Plotly.newPlot().