Gain insights into ML fundamentals, foundational mathematics, coding models, and real-world apps. Discover making perceptrons and exploring scikit-learn for classification, regression, and clustering.

ml101.tar.gz

python_cw

python_ml_galaxies

python_ml_3galaxies

This course explains machine learning for absolute beginners by building a visual understanding of the underlying concepts. It covers some foundational mathematics behind the machine learning models and then guides you in coding for models to solve real-world machine learning problems.

You’ll begin by understanding the limitations of traditional coding techniques in solving machine learning problems. Next, you’ll get familiar with the machine learning process. Then, you’ll build your first machine learning model from scratch—a single perceptron. The course then takes you from a single neuron to a multilayer perceptron to solve a non-linearly separable classification dataset. Finally, the course introduces Python’s library, scikit-learn, where you’ll learn to build models for classification, regression, and unsupervised clustering. 

This course aims to make you a lifelong learner and serves as a great starting point for a successful career in machine learning.

Machine Learning for Beginners

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Equation Widget</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="lineGraph"></canvas>
    
    <div class="controls">
        <label for="w0">Coefficient of x1 (a): </label>
        <input type="range" id="w0" min="-10" max="10" step="0.1" value="1">
        <span id="w0Value">1</span>

        <br>

        <label for="w1">Coefficient of x2 (b): </label>
        <input type="range" id="w1" min="-10" max="10" step="0.1" value="1">
        <span id="w1Value">1</span>

        <br>

        
    </div>

    <script src="script.js"></script>
</body>
</html>

// script.js

// Get the canvas element and its context
const canvas = document.getElementById('lineGraph');
const ctx = canvas.getContext('2d');

// Set the canvas size
canvas.width = 440;
canvas.height = 400;

// Calculate the center of the canvas
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// Define the range for x and y (-10 to 10)
const range = 10;

// Get the sliders and output spans
const w0Slider = document.getElementById('w0');
const w1Slider = document.getElementById('w1');
// const w2Slider = document.getElementById('w2');
const w0Value = document.getElementById('w0Value');
const w1Value = document.getElementById('w1Value');
// const w2Value = document.getElementById('w2Value');

// Initial values for w0, w1, and w2
let w0 = parseFloat(w0Slider.value);
let w1 = parseFloat(w1Slider.value);
// let w2 = parseFloat(w2Slider.value);

// Function to draw the straight line
function drawLine() {
    // Clear the canvas before redrawing
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the axes
    drawAxes();

    // Calculate the start and end points using the equation y = (w0 * x + w2) / w1
    const x1 = -range;
    const y1 = -(w0 * x1) / w1;

    const x2 = range;
    const y2 = -(w0 * x2) / w1;

    // Draw the line
    ctx.beginPath();
    ctx.moveTo(centerX + (x1 * centerX / range), centerY + (y1 * centerY / range));
    ctx.lineTo(centerX + (x2 * centerX / range), centerY + (y2 * centerY / range));
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 1;
    ctx.stroke();

    // Display the equation of the line
    ctx.font = '20px Arial';
    ctx.fillStyle = '#000';
    ctx.fillText(`${w1.toFixed(1)} x1 = ${w0.toFixed(1)} x2`, centerX + 35, centerY - centerY + 30);
}

// Function to draw the graph axes, ticks, and labels
function drawAxes() {
    // X-axis
    ctx.beginPath();
    ctx.moveTo(0, centerY);
    ctx.lineTo(canvas.width, centerY);
    ctx.strokeStyle = '#aaa';
    ctx.lineWidth = 1;
    ctx.stroke();

    // Y-axis
    ctx.beginPath();
    ctx.moveTo(centerX, 0);
    ctx.lineTo(centerX, canvas.height);
    ctx.strokeStyle = '#aaa';
    ctx.lineWidth = 1;
    ctx.stroke();

    // Draw the ticks and labels on the X-axis
    for (let i = -range; i <= range; i+=2) {
        const x = centerX + (i * centerX / range);
        ctx.beginPath();
        ctx.moveTo(x, centerY - 5);
        ctx.lineTo(x, centerY + 5);
        ctx.strokeStyle = '#000';
        ctx.stroke();

        // Label for X-axis
        if (i !== 0) { // Avoid labeling the origin
            ctx.font = '12px Arial';
            ctx.fillText(i, x - 5, centerY + 20);
        }
    }

    // Draw the ticks and labels on the Y-axis
    for (let i = -range; i <= range; i+=2) {
        const y = centerY - (i * centerY / range);
        ctx.beginPath();
        ctx.moveTo(centerX - 5, y);
        ctx.lineTo(centerX + 5, y);
        ctx.strokeStyle = '#000';
        ctx.stroke();

        // Label for Y-axis
        if (i !== 0) { // Avoid labeling the origin
            ctx.font = '12px Arial';
            ctx.fillText(i, centerX + 10, y + 5);
        }
    }
}

// Event listeners for the sliders
w0Slider.addEventListener('input', function() {
    w0 = parseFloat(w0Slider.value);
    w0Value.textContent = w0;
    drawLine();
});

w1Slider.addEventListener('input', function() {
    w1 = parseFloat(w1Slider.value);
    w1Value.textContent = w1;
    drawLine();
});

// w2Slider.addEventListener('input', function() {
//     w2 = parseFloat(w2Slider.value);
//     w2Value.textContent = w2;
//     drawLine();
// });

// Initial drawing of the line
drawLine();


/* styles.css */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #fff;
}

canvas {
    border: 1px solid #000;
    margin-bottom: 20px;
    background-color: #f0f0f0;
    position: absolute;
    top: 50%;
    left: 31%;
    transform: translate(-50%, -50%);
    display: flex;
}

.controls {
    position: fixed; /* Fix the position of the controls */
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%); /* Center the controls horizontally */
    background-color: #fff; /* Optional: Add a background color */
    padding: 10px; /* Optional: Add padding around the controls */
    border-radius: 8px; /* Optional: Add rounded corners */
    // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    text-align: center;
    width: 300px;
    border: 1pt solid black;
}

label {
    font-weight: bold;
}

input[type="range"] {
    margin: 10px 0;
    width: 250px;
}

span {
    margin-left: 10px;
    font-weight: bold;
}

button {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: steelblue;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


codemirror

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Equation Widget</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="lineGraph"></canvas>
    
    <div class="controls">
        

        <label for="w2">Constant (c): </label>
        <input type="range" id="w2" min="-10" max="10" step="0.5" value="0">
        <span id="w2Value">0</span>
    </div>

    <script src="script.js"></script>
</body>
</html>

// script.js

// Get the canvas element and its context
const canvas = document.getElementById('lineGraph');
const ctx = canvas.getContext('2d');

// Set the canvas size
canvas.width = 440;
canvas.height = 400;

// Calculate the center of the canvas
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// Define the range for x and y (-10 to 10)
const range = 10;

// Get the sliders and output spans
// const w0Slider = document.getElementById('w0');
// const w1Slider = document.getElementById('w1');
const w2Slider = document.getElementById('w2');
// const w0Value = document.getElementById('w0Value');
// const w1Value = document.getElementById('w1Value');
const w2Value = document.getElementById('w2Value');

// Initial values for w0, w1, and w2
// let w0 = parseFloat(w0Slider.value);
// let w1 = parseFloat(w1Slider.value);
let w2 = parseFloat(w2Slider.value);

// Function to draw the straight line
function drawLine() {
    // Clear the canvas before redrawing
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the axes
    drawAxes();

    // Calculate the start and end points using the equation y = (w0 * x + w2) / w1
    const x1 = -range;
    const y1 = - x1 + w2;

    const x2 = range;
    const y2 = - x2 + w2;

    // Draw the line
    ctx.beginPath();
    ctx.moveTo(centerX + (x1 * centerX / range), centerY + (y1 * centerY / range));
    ctx.lineTo(centerX + (x2 * centerX / range), centerY + (y2 * centerY / range));
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 1;
    ctx.stroke();

    // Display the equation of the line
    ctx.font = '20px Arial';
    ctx.fillStyle = '#000';
    ctx.fillText(`x1 = x2 + ${w2.toFixed(1)}`, centerX + 35, centerY - centerY + 30);
}

// Function to draw the graph axes, ticks, and labels
function drawAxes() {
    // X-axis
    ctx.beginPath();
    ctx.moveTo(0, centerY);
    ctx.lineTo(canvas.width, centerY);
    ctx.strokeStyle = '#aaa';
    ctx.lineWidth = 1;
    ctx.stroke();

    // Y-axis
    ctx.beginPath();
    ctx.moveTo(centerX, 0);
    ctx.lineTo(centerX, canvas.height);
    ctx.strokeStyle = '#aaa';
    ctx.lineWidth = 1;
    ctx.stroke();

    // Draw the ticks and labels on the X-axis
    for (let i = -range; i <= range; i+=2) {
        const x = centerX + (i * centerX / range);
        ctx.beginPath();
        ctx.moveTo(x, centerY - 5);
        ctx.lineTo(x, centerY + 5);
        ctx.strokeStyle = '#000';
        ctx.stroke();

        // Label for X-axis
        if (i !== 0) { // Avoid labeling the origin
            ctx.font = '12px Arial';
            ctx.fillText(i, x - 5, centerY + 20);
        }
    }

    // Draw the ticks and labels on the Y-axis
    for (let i = -range; i <= range; i+=2) {
        const y = centerY - (i * centerY / range);
        ctx.beginPath();
        ctx.moveTo(centerX - 5, y);
        ctx.lineTo(centerX + 5, y);
        ctx.strokeStyle = '#000';
        ctx.stroke();

        // Label for Y-axis
        if (i !== 0) { // Avoid labeling the origin
            ctx.font = '12px Arial';
            ctx.fillText(i, centerX + 10, y + 5);
        }
    }
}

// Event listeners for the sliders
// w0Slider.addEventListener('input', function() {
//     w0 = parseFloat(w0Slider.value);
//     w0Value.textContent = w0;
//     drawLine();
// });

// w1Slider.addEventListener('input', function() {
//     w1 = parseFloat(w1Slider.value);
//     w1Value.textContent = w1;
//     drawLine();
// });

w2Slider.addEventListener('input', function() {
    w2 = parseFloat(w2Slider.value);
    w2Value.textContent = w2;
    drawLine();
});

// Initial drawing of the line
drawLine();


/* styles.css */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #fff;
}

canvas {
    border: 1px solid #000;
    margin-bottom: 20px;
    background-color: #f0f0f0;
    position: absolute;
    top: 50%;
    left: 31%;
    transform: translate(-50%, -50%);
    display: flex;
}

.controls {
    position: fixed; /* Fix the position of the controls */
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%); /* Center the controls horizontally */
    background-color: #fff; /* Optional: Add a background color */
    padding: 10px; /* Optional: Add padding around the controls */
    border-radius: 8px; /* Optional: Add rounded corners */
    // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    text-align: center;
    width: 300px;
    border: 1pt solid black;
}

label {
    font-weight: bold;
}

input[type="range"] {
    margin: 10px 0;
    width: 280px;
}

span {
    margin-left: 10px;
    font-weight: bold;
}

button {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: steelblue;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


Learn about our first machine learning model, the perceptron, which is inspired by a single neuron in our brain.

The Machine Learning Problem

The Machine Learning Process

From a Single Neuron to Artificial Neural Networks

Code for Machine Learning Using scikit-learn

Concluding Thoughts

How to Predict the Traffic Volume Using Machine Learning

Model

The ML process

Detour: Math behind the line

Choosing the right decision boundary