طريقة الانحدار التربيعي الأصغر: دليل شامل لإيجاد خط أفضل ملاءمة

مقدمة إلى الانحدار التربيعي الأصغر

هل تتطلع إلى فهم كيفية التنبؤ بالمستقبل باستخدام صيغة بسيطة وبعض البيانات؟ هناك طرق متعددة لمعالجة مشكلة محاولة التنبؤ بالمستقبل. في هذا المقال، سنتعمق في النظرية الكامنة وراء كيفية تحقيق ذلك باستخدام الصيغة الرياضية Y = a + b * X. بعد تغطية الجانب النظري، سنقوم بإنشاء مشروع JavaScript عملي. سيساعدنا هذا في تصور كيفية عمل الصيغة بشكل أسهل، مستخدمين مكتبة Chart.js لتمثيل البيانات بصريًا.

ما هي طريقة الانحدار التربيعي الأصغر ولماذا نستخدمها؟

الانحدار التربيعي الأصغر (Least Squares Regression) هي طريقة لتطبيق الانحدار الخطي (Linear Regression). تساعدنا هذه الطريقة على التنبؤ بالنتائج بناءً على مجموعة بيانات موجودة، بالإضافة إلى تحديد الشذوذات الواضحة في بياناتنا. الشذوذات هي قيم تبدو جيدة جدًا، أو سيئة جدًا، لدرجة يصعب تصديقها، أو أنها تمثل حالات نادرة.

على سبيل المثال، لنفترض أن لدينا قائمة بعدد الموضوعات التي يمكن للمهندسين المستقبليين في freeCodeCamp حلها إذا استثمروا ساعة أو ساعتين أو ثلاث ساعات متواصلة في الدراسة. باستخدام هذه الطريقة، يمكننا التنبؤ بعدد الموضوعات التي سيتم تغطيتها بعد أربع ساعات من الدراسة المتواصلة، حتى لو لم تكن هذه البيانات متاحة لنا بشكل مباشر.

تُستخدم هذه الطريقة من قبل العديد من المهنيين، مثل الإحصائيين والمحاسبين والمديرين والمهندسين (خاصة في مشكلات تعلم الآلة).

إعداد مثال عملي

قبل أن نتعمق في الصيغة والتعليمات البرمجية، دعنا نحدد البيانات التي سنستخدمها. لتوضيح ذلك، دعنا نوسع المثال المذكور سابقًا. لنفترض أن هدفنا هو معرفة عدد الموضوعات التي يغطيها الطالب لكل ساعة تعلم. سيمثل كل زوج (X, Y) طالبًا. نظرًا لأن لكل منا معدلات تعلم مختلفة، فإن عدد الموضوعات التي يتم حلها يمكن أن يكون أعلى أو أقل لنفس الوقت المستثمر.

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

كل نقطة تمثل طالبًا (X, Y) والوقت الذي استغرقه هذا الطالب المحدد لإكمال عدد معين من الموضوعات.

إخلاء مسؤولية: هذه البيانات خيالية وتم إنشاؤها بضرب مفاتيح عشوائية. ليس لدي أي فكرة عن القيم الفعلية.

الصيغة الأساسية: Y = a + bX

بالنسبة لأولئك غير المطلعين عليها، قد تبدو الصيغة بسيطة جدًا، خاصة وأن لدينا بالفعل قيم Y و X في مثالنا. ومع ذلك، وبما أننا لم نعد نخشى الصيغة، فإننا نحتاج فقط إلى معرفة قيمتي a و b. إليك بعض السياق حول ما تعنيه كل منهما:

• a هو نقطة التقاطع (intercept)، وبعبارة أخرى، هي القيمة التي نتوقعها، في المتوسط، من طالب يمارس الدراسة لمدة ساعة واحدة. ساعة واحدة هي أقل قدر من الوقت سنقبله في مجموعة بيانات مثالنا.
• b هو الميل (slope) أو المعامل (coefficient)، وبعبارة أخرى، هو عدد الموضوعات التي يتم حلها في ساعة محددة (X). كلما زادت الساعات (X) التي قضاها في الدراسة، زادت قيمة b أكثر فأكثر.

حساب قيمة b

قد تبدو هذه الصيغة مخيفة أكثر مما هي عليه في الواقع. تمثل X و Y مواضعنا من الجدول السابق. عندما يكون فوقهما شريط (macron)، فهذا يعني أننا يجب أن نستخدم المتوسط الذي نحصل عليه بجمع كل القيم ثم القسمة على العدد الإجمالي:

• متوسط X (͞x) -> (1 + 1.2 + 1.5 + 2 + 2.3 + 2.5 + 2.7 + 3 + 3.1 + 3.2 + 3.6) / 11 = 2.37
• متوسط Y (͞y) -> (1.5 + 2 + 3 + 1.8 + 2.7 + 4.7 + 7.1 + 10 + 6 + 5 + 8.9) / 11 = 4.79

الآن بعد أن حصلنا على المتوسط، يمكننا توسيع جدولنا ليشمل النتائج الجديدة:

الرمز الغريب سيجما (∑) يخبرنا بجمع كل شيء:

• ∑(X - ͞x) * (Y - ͞y) -> 4.51 + 3.26 + 1.56 + 1.11 + 0.15 + (-0.01) + 0.76 + 3.28 + 0.88 + 0.17 + 5.06 = 20.73
• ∑(X - ͞x)² -> 1.88 + 1.37 + 0.76 + 0.14 + 0.00 + 0.02 + 0.11 + 0.40 + 0.53 + 0.69 + 1.51 = 7.41

وأخيرًا، نقوم بالقسمة 20.73 / 7.41 فنحصل على b = 2.8.

ملاحظة: عند استخدام آلة حاسبة لإدخال التعبيرات، مثل تلك المتوفرة في Ubuntu، فإن -2² تُرجع -4 بدلاً من 4. لتجنب ذلك، أدخل (-2)².

حساب قيمة a

كل ما تبقى هو حساب a، والتي صيغتها هي ͞y = a + b ͞x. لقد حصلنا بالفعل على جميع القيم الأخرى، لذا يمكننا استبدالها فنحصل على:

4.79 = a + 2.8 * 2.37
4.79 = a + 6.64
a = -6.64 + 4.79
a = -1.85

النتيجة النهائية

تصبح صيغتنا النهائية:

Y = -1.85 + 2.8 * X

الآن نستبدل X في صيغتنا بكل قيمة لدينا:

وهو رسم بياني يبدو كالتالي:

لدينا الآن خط يمثل عدد الموضوعات التي نتوقع حلها لكل ساعة دراسة. إذا أردنا التنبؤ بعدد الموضوعات التي نتوقع أن يحلها الطالب بـ 8 ساعات دراسة، فإننا نستبدلها في صيغتنا:

Y = -1.85 + 2.8 * 8
Y = 20.55

وفي الرسم البياني يمكننا أن نرى:

ملاحظة هامة: كلما كانت النقطة أبعد في المستقبل أو خارج نطاق البيانات الأصلية، كلما قلّت الدقة التي يجب أن نتوقعها من التنبؤ.

قيود طريقة الانحدار التربيعي الأصغر

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

• لا تأخذ في الاعتبار تعقيد الموضوعات المحلولة: من المرجح أن يستغرق تعلم وحل موضوع يتم تغطيته في بداية "شهادة تصميم الويب المتجاوب" (Responsive Web Design Certification) وقتًا أقل من إنجاز أحد المشاريع النهائية. لذا، إذا كانت البيانات التي لدينا من نقاط بداية مختلفة لدورة تدريبية، فلن تكون التنبؤات دقيقة.
• التنبؤات غير الواقعية: من المستحيل أن يدرس شخص ما 240 ساعة متواصلة أو أن يحل عددًا أكبر من الموضوعات المتاحة. ومع ذلك، تسمح لنا الطريقة بالتنبؤ بتلك القيم. في هذه المرحلة، لم تعد الطريقة تعطي نتائج دقيقة لأنها تمثل استحالة واقعية.

مشروع JavaScript عملي

ليس من الضروري القيام بهذه الحسابات يدويًا. يمكننا إنشاء مشروعنا حيث ندخل قيم X و Y، ويرسم المشروع رسمًا بيانيًا بتلك النقاط، ويطبق صيغة الانحدار الخطي. سيتكون مجلد المشروع من المحتويات التالية:

src/
  |-public // folder with the content that we will feed to the browser
    |-index.html
    |-style.css
    |-least-squares.js
package.json
server.js // our Node.js server

وملف package.json:

{
  "name": "least-squares-regression",
  "version": "1.0.0",
  "description": "Visualize linear least squares",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "server-debug": "nodemon --inspect server.js"
  },
  "author": "daspinola",
  "license": "MIT",
  "devDependencies": {
    "nodemon": "2.0.4"
  },
  "dependencies": {
    "express": "4.17.1"
  }
}

بمجرد أن يكون لدينا ملف package.json ونقوم بتشغيل npm install، ستتوفر لدينا مكتبتي Express و nodemon. يمكنك استبدالها بأخرى حسب تفضيلك، لكنني أستخدمها لسهولتها. في ملف server.js:

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'public')))

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'public/index.html'))
})

app.listen(5000, function () {
  console.log(`Listening on port ${5000}!`)
})

تم إنشاء هذا الخادم الصغير حتى نتمكن من الوصول إلى صفحتنا عندما نكتب في المتصفح localhost:5000. قبل تشغيله، دعنا ننشئ الملفات المتبقية:

ملف public/index.html

<html>
<head>
  <title>Least Squares Regression</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="left-half">
      <div>
        <input type="number" class="input-x" placeholder="X">
        <input type="number" class="input-y" placeholder="Y">
        <button class="btn-update-graph">Add</button>
      </div>
      <div>
        <span class="span-formula"></span>
      </div>
      <div>
        <table class="table-pairs">
          <thead>
            <th>X</th>
            <th>Y</th>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
    <div class="right-half">
      <canvas id="myChart"></canvas>
    </div>
  </div>
  <script src="/js/least-squares.js"></script>
</body>
</html>

نقوم بإنشاء عناصرنا:

• مدخلان لأزواجنا، أحدهما لـ X والآخر لـ Y.
• زر لإضافة تلك القيم إلى جدول.
• عنصر span لعرض الصيغة الحالية مع إضافة القيم.
• جدول لعرض الأزواج التي أضفناها.
• عنصر canvas للرسم البياني الخاص بنا.

نقوم أيضًا باستيراد مكتبة Chart.js عبر CDN ونضيف ملفات CSS و JavaScript الخاصة بنا.

ملف public/style.css (النسخة الأولية)

.container {
  display: grid;
}

.left-half {
  grid-column: 1;
}

.right-half {
  grid-column: 2;
}

نضيف بعض القواعد بحيث تكون مدخلاتنا وجدولنا إلى اليسار ورسمنا البياني إلى اليمين. يستفيد هذا من تخطيط شبكة CSS Grid.

ملف public/least-squares.js (النسخة الأولية)

document.addEventListener('DOMContentLoaded', init, false);

function init() {
  const currentData = {
    pairs: [],
    slope: 0,
    coeficient: 0,
    line: [],
  };

  const chart = initChart();
}

function initChart() {
  const ctx = document.getElementById('myChart').getContext('2d');
  return new Chart(ctx, {
    type: 'scatter',
    data: {
      datasets: [{
        label: 'Scatter Dataset',
        backgroundColor: 'rgb(125,67,120)',
        data: [],
      }, {
        label: 'Line Dataset',
        fill: false,
        data: [],
        type: 'line',
      }],
    },
    options: {
      scales: {
        xAxes: [{
          type: 'linear',
          position: 'bottom',
          display: true,
          scaleLabel: {
            display: true,
            labelString: '(X)',
          },
        }],
        yAxes: [{
          type: 'linear',
          position: 'bottom',
          display: true,
          scaleLabel: {
            display: true,
            labelString: '(Y)',
          },
        }],
      },
    },
  });
}

وأخيرًا، نقوم بتهيئة الرسم البياني الخاص بنا. في البداية، يجب أن يكون فارغًا لأننا لم نضف أي بيانات إليه بعد.

الآن إذا قمنا بتشغيل npm run server-debug وفتح متصفحنا على localhost:5000، يجب أن نرى شيئًا كهذا:

مدخلاتنا إلى اليسار مع زر "إضافة"، وجدولنا برؤوس X و Y فقط، وإلى اليمين رسم بياني فارغ.

إضافة الوظائف

الخطوة التالية هي جعل زر "إضافة" يقوم بشيء ما. في حالتنا، نريد تحقيق ما يلي:

1. إضافة قيم X و Y إلى الجدول.
2. تحديث الصيغة عندما نضيف أكثر من زوج واحد (نحتاج إلى زوجين على الأقل لإنشاء خط).
3. تحديث الرسم البياني بالنقاط والخط.
4. تنظيف المدخلات، فقط لتسهيل إدخال البيانات باستمرار.

إضافة القيم إلى الجدول

تحديث ملف public/least-squares.js:

document.addEventListener('DOMContentLoaded', init, false);

function init() {
  const currentData = {
    pairs: [],
    slope: 0,
    coeficient: 0,
    line: [],
  };

  const btnUpdateGraph = document.querySelector('.btn-update-graph');
  const tablePairs = document.querySelector('.table-pairs');
  const spanFormula = document.querySelector('.span-formula');
  const inputX = document.querySelector('.input-x');
  const inputY = document.querySelector('.input-y');

  const chart = initChart();

  btnUpdateGraph.addEventListener('click', () => {
    const x = parseFloat(inputX.value);
    const y = parseFloat(inputY.value);
    updateTable(x, y);
  });

  function updateTable(x, y) {
    const tr = document.createElement('tr');
    const tdX = document.createElement('td');
    const tdY = document.createElement('td');
    tdX.innerHTML = x;
    tdY.innerHTML = y;
    tr.appendChild(tdX);
    tr.appendChild(tdY);
    tablePairs.querySelector('tbody').appendChild(tr);
  }
}
// ... بقية التعليمات البرمجية كما كانت

نحصل على جميع العناصر التي سنستخدمها قريبًا ونضيف حدثًا على زر "إضافة". سيقوم هذا الحدث بسحب القيم الحالية وتحديث جدولنا بصريًا. نحتاج إلى تحليل (parse) القيمة لأننا نحصل على سلسلة نصية (string). سيكون هذا مهمًا للخطوة التالية عندما يتعين علينا تطبيق الصيغة.

عندما نضغط على "إضافة"، يجب أن نرى الأزواج في الجدول.

إجراء الحسابات

يجب الآن تحويل كل العمليات الحسابية التي تحدثنا عنها سابقًا (الحصول على متوسط X و Y، حساب b، وحساب a) إلى تعليمات برمجية. سنعرض أيضًا قيم a و b حتى نراها تتغير مع إضافة القيم.

تحديث ملف public/least-squares.js:

// ... بقية التعليمات البرمجية كما كانت
btnUpdateGraph.addEventListener('click', () => {
  const x = parseFloat(inputX.value);
  const y = parseFloat(inputY.value);
  updateTable(x, y);
  updateFormula(x, y);
});

function updateFormula(x, y) {
  currentData.pairs.push({ x, y });
  const pairsAmount = currentData.pairs.length;
  const sum = currentData.pairs.reduce(
    (acc, pair) => ({
      x: acc.x + pair.x,
      y: acc.y + pair.y,
    }),
    { x: 0, y: 0 }
  );
  const average = {
    x: sum.x / pairsAmount,
    y: sum.y / pairsAmount,
  };

  const slopeDividend = currentData.pairs.reduce(
    (acc, pair) => parseFloat(acc + ((pair.x - average.x) * (pair.y - average.y))),
    0
  );
  const slopeDivisor = currentData.pairs.reduce(
    (acc, pair) => parseFloat(acc + (pair.x - average.x) ** 2),
    0
  );

  const slope = slopeDivisor !== 0 ? parseFloat((slopeDividend / slopeDivisor).toFixed(2)) : 0;
  const coeficient = parseFloat(
    (-(slope * average.x) + average.y).toFixed(2),
  );

  currentData.line = currentData.pairs.map((pair) => ({
    x: pair.x,
    y: parseFloat((coeficient + (slope * pair.x)).toFixed(2)),
  }));

  spanFormula.innerHTML = `Formula: Y = ${coeficient} + ${slope} * X`;
}
// ... بقية التعليمات البرمجية كما كانت

لا يوجد الكثير ليقال عن الكود هنا لأنه يمثل كل النظرية التي مررنا بها سابقًا. نقوم بالتكرار عبر القيم للحصول على المجاميع والمتوسطات وجميع القيم الأخرى التي نحتاجها للحصول على المعامل (a) والميل (b).

العنصر span لعرض الصيغة ورؤيتها تتغير عند إضافة القيم. لدينا الأزواج والخط في المتغير الحالي، لذا نستخدمها في الخطوة التالية لتحديث الرسم البياني الخاص بنا.

تحديث الرسم البياني وتنظيف المدخلات

تحديث ملف public/least-squares.js:

// ... بقية التعليمات البرمجية كما كانت
btnUpdateGraph.addEventListener('click', () => {
  const x = parseFloat(inputX.value);
  const y = parseFloat(inputY.value);
  updateTable(x, y);
  updateFormula(x, y);
  updateChart();
  clearInputs();
});

function updateChart() {
  chart.data.datasets[0].data = currentData.pairs;
  chart.data.datasets[1].data = currentData.line;
  chart.update();
}

function clearInputs() {
  inputX.value = '';
  inputY.value = '';
}
// ... بقية التعليمات البرمجية كما كانت

تحديث الرسم البياني وتنظيف مدخلات X و Y أمر مباشر للغاية. لدينا مجموعتان من البيانات (datasets)، الأولى (الموضع صفر) مخصصة لأزواجنا، لذا نعرض النقطة على الرسم البياني. الثانية (الموضع واحد) مخصصة لخط الانحدار الخاص بنا. يجب أن نلتقط نسخة من الرسم البياني الخاص بنا ونستدعي update() حتى نرى القيم الجديدة تؤخذ في الاعتبار.

نحتاج إلى ثلاث قيم على الأقل حتى نتمكن من استخلاص أي نوع من المعلومات من الرسم البياني.

إضافة بعض التنسيقات (Styling)

يمكننا تغيير تخطيطنا قليلاً ليكون أكثر قابلية للإدارة. لا شيء كبير، إنه مجرد تذكير بأنه يمكننا تحديث واجهة المستخدم في أي وقت.

تحديث ملف public/style.css

.container {
  display: grid;
}

.left-half {
  grid-column: 1;
}

.right-half {
  grid-column: 2;
}

.pairs-style input[type="number"],
.pairs-style button {
  margin: 5px 0px;
}

.table-pairs {
  border-collapse: collapse;
  width: 100%;
}

.table-pairs td {
  text-align: center;
}

.table-pairs,
.table-pairs th,
.table-pairs td {
  margin: 10px 0px;
  border: 1px solid black;
}

تحديث ملف public/index.html

<html>
<head>
  <title>Least Squares Regression</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="left-half">
      <div class="pairs-style">
        <div>
          <input type="number" class="input-x" placeholder="X">
        </div>
        <div>
          <input type="number" class="input-y" placeholder="Y">
        </div>
        <button class="btn-update-graph">Add</button>
      </div>
      <div>
        <span class="span-formula">Formula: Y = a + b * X</span>
      </div>
      <div>
        <table class="table-pairs">
          <thead>
            <th>X</th>
            <th>Y</th>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
    <div class="right-half">
      <canvas id="myChart"></canvas>
    </div>
  </div>
  <script src="/js/least-squares.js"></script>
</body>
</html>

ليس تغييرًا كبيرًا، لكن على الأقل العناصر أصبحت محاذية بشكل أفضل.

إثبات المفهوم

لقد أضفنا نفس القيم التي استخدمناها سابقًا في الجزء النظري وحصلنا على نفس الرسم البياني والصيغة تمامًا! 🙂

ملاحظات ختامية

للاختصار، لقد حذفت الكثير مما يمكن اعتباره تمرينًا لتحسين المشروع بشكل كبير. على سبيل المثال:

• إضافة فحوصات للقيم الفارغة وما شابه ذلك.
• إتاحة إمكانية إزالة البيانات التي تم إدخالها عن طريق الخطأ.
• إضافة مدخل لـ X أو Y وتطبيق صيغة البيانات الحالية "للتنبؤ بالمستقبل"، على غرار المثال الأخير في الجزء النظري.

بغض النظر عن ذلك، فإن التنبؤ بالمستقبل مفهوم ممتع حتى لو كان أقصى ما يمكننا أن نأمل في التنبؤ به في الواقع هو تقريب بناءً على نقاط البيانات السابقة. إنها صيغة قوية، وإذا قمت ببناء أي مشروع باستخدامها، فسأحب رؤيته.

آمل أن يكون هذا المقال مفيدًا كمدخل لهذا المفهوم. يمكن العثور على الكود المستخدم في المقال في مستودعي على GitHub هنا. أراكم في المقال التالي، وفي هذه الأثناء، انطلقوا واكتبوا بعض الأكواد!

الخلاصة التقنية

تُعد طريقة الانحدار التربيعي الأصغر أداة تحليلية قوية لا غنى عنها في مجالات متعددة، من الإحصاء إلى تعلم الآلة. إنها توفر منهجية واضحة لتحديد العلاقة الخطية بين المتغيرات، مما يتيح التنبؤ بالقيم المستقبلية وتحديد الاتجاهات. على الرغم من بساطتها الظاهرية، إلا أن فهم قيودها، مثل عدم مراعاة تعقيد البيانات أو إمكانية التنبؤ بقيم غير واقعية، أمر بالغ الأهمية لضمان استخدامها بفعالية وموثوقية. يوضح التطبيق العملي باستخدام JavaScript و Chart.js كيف يمكن تحويل هذه النظرية الرياضية إلى حلول برمجية تفاعلية، مما يسهل استكشاف البيانات واتخاذ قرارات مستنيرة.