k Nearest Neighbours Classifier (kNN) with Javascript Implementation for Beginners

k Nearest Neighbours Classifier (kNN) is a powerful but computational costly nonlinear classifier. Basically, kNN works based on distance calculation and finding of closest neighbour vectors according to a distance function. Distance function can be l1 (Manhattan distance), l2 (Euclidean distance) or a different available appropriate distance function. kNN uses a hyper parameter (k) that implies count of closest neighbours. 

Algorithm find closest k vector to current vector, and returns classification result as class label of the largest matched number of class between these k closest vectors.

In this example; classes 1,2,3 corresponds to red, green and purple respectively. Algorithm takes k, x and y as input and return class label as color and draw last input point as a orange point. 

->k

->X

->Y

Javascript Codes:

document.addEventListener('DOMContentLoaded', (e) => {

            drawPoints();
        });

        var point = { x: 0, y: 0 };
        var k = 3;

        var datas = [

            { c: 1, x: 10, y: 100 },
            { c: 1, x: -10, y: 50 },
            { c: 1, x: 50, y: 150 },
            { c: 2, x: 100, y: 80 },
            { c: 1, x: 30, y: 200 },
            { c: 2, x: 200, y: 50 },
            { c: 2, x: 120, y: 30 },
            { c: 2, x: 100, y: 150 },
            { c: 3, x: 300, y: 50 },
            { c: 1, x: -150, y: 200 },
            { c: 3, x: -300, y: 400 },
            { c: 3, x: 233, y: 333 },
            { c: 2, x: 127, y: 190 },
            { c: 3, x: 100, y: -32 },
            { c: 1, x: -50, y: -12 },
            { c: 1, x: -101, y: -50 },
            { c: 1, x: -301, y: -19 },
            { c: 2, x: 127, y: -22 },
            { c: 3, x: 120, y: -100 },
            { c: 2, x: -50, y: -200 },
            { c: 3, x: 800, y: 100 },
            { c: 3, x: 150, y: -150 },
            { c: 3, x: 70, y: -80 },
            { c: 3, x: 70, y: -500 },
            { c: 3, x: 200, y: -300 },
            { c: 2, x: -50, y: -150 },
            { c: 3, x: 111, y: -200 },
            { c: 3, x: 301, y: -310 },
            { c: 3, x: 200, y: -151 },
            { c: 1, x: -122, y: -99 },
            { c: 1, x: -301, y: -499 },
            { c: 1, x: 401, y: -1 },
        ];

        function start() {

            let classColor = "";

            setValues();

            drawCurrentPoint();

            let c = knnClassify();

            if (c == 1)
                classColor = "red";
            else if (c == 2)
                classColor = "green";
            else
                classColor = "purple";

            alert(classColor);
        }

        function knnClassify() {

            var classificationResults = [

                { c: 1, count: 0 },
                { c: 2, count: 0 },
                { c: 3, count: 0 }
            ];

            let distances = [];

            for (let i = 0; i < datas.length; i++) {

                let distance = l2Distance(datas[i], point);
                let distanceToClass = { c: datas[i].c, d: distance };

                distances.push(distanceToClass);
            }

            distances.sort(function (a, b) {

                return a.d - b.d;
            });

            for (let i = 0; i < k; i++) {

                for (let k = 0; k < classificationResults.length; k++) {

                    if (classificationResults[k].c == distances[i].c) {

                        classificationResults[k].count++;
                    }
                }
            }

            classificationResults.sort(function (a, b) {

                return b.count - a.count;
            });

            return classificationResults[0].c;
        }

        function l2Distance(point1, point2) {

            return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
        }

        function drawPoints() {

            var canvas = document.getElementById("g");

            for (let i = 0; i < datas.length; i++) {

                let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');;
                circle.setAttributeNS(null, "cx", datas[i].x);
                circle.setAttributeNS(null, "cy", datas[i].y);
                circle.setAttributeNS(null, "r", 3);

                if (datas[i].c == 1)
                    circle.setAttributeNS(null, "fill", "red");
                else if (datas[i].c == 2)
                    circle.setAttributeNS(null, "fill", "green");
                else
                    circle.setAttributeNS(null, "fill", "purple");

                canvas.appendChild(circle);
            }
        }

        function drawCurrentPoint() {

            var canvas = document.getElementById("g");

            let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttributeNS(null, "cx", point.x);
            circle.setAttributeNS(null, "cy", point.y);
            circle.setAttributeNS(null, "r", 3);

            circle.setAttributeNS(null, "fill", "orange");

            canvas.appendChild(circle);
        }
                   
        function setValues() {

            k = parseFloat(document.getElementById("pk").value);
            point.x = parseFloat(document.getElementById("pX").value);
            point.y = parseFloat(document.getElementById("pY").value);
        }

HTML Codes:

    <div>
        <input id="pk" type="text" value="3" />->k
    </div>
    <div>
        <input id="pX" type="text" value="0" />->X
    </div>
    <div>
        <input id="pY" type="text" value="0" />->Y
    </div>

    <div id="resultDiv" style="margin-top: 20px;"></div>
    <div style="margin-top: 20px;">
        <button onclick="start()" type="button">CLASSIFY</button>
    </div>

    <div style="margin-top: 50px;">
        <svg height="500" id="canvas" width="500">
            <g id="g" transform="translate(250 250) scale(1,-1)">
                <line style="stroke-width: 1; stroke: rgb(0, 0, 255);" x1="-1000" x2="1000" y1="0" y2="0"></line>
                <line style="stroke-width: 1; stroke: rgb(0, 0, 255);" x1="0" x2="0" y1="-1000" y2="1000"></line>

            </g>
        </svg>
    </div>

Devextreme Toast Wrapper for Global Widget Configuration

While using Devextreme toast widget, you may need to configure it. By default, toast widget placed bottom middle of window. In this article, I write a wrapper javascript code to configure widget globally, and I provide to show widged at bottom right of window and widget will be continuing to display content while mouse hover on it. This wrapper code is also compatible with older browsers. 

Wrapper code is dependent to Jquery.

dx-toast-wrapper.js:

var toastDefault = {

            width: "500px",
            displayTime: 4000,
            cancelHiding: false,

            contentTemplate: null,

            position: {

                at: "right bottom",
                collision: "fit",
                boundaryOffset: "20 20",

            },

            onContentReady: function (e) {

                $(e.element).on("mouseenter", function () {

                    this.cancelHiding = true;

                }.bind(this));

                $(e.element).on("mouseleave", function () {

                    this.cancelHiding = false;
                    e.component.hide();

                }.bind(this));
            }.bind(this),

            onHiding: function (e) {

                e.cancel = this.cancelHiding;

            }.bind(this)
        };

        var toast = {

            success: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "success";

                DevExpress.ui.notify(toastDefault);
            },
            error: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "error";

                DevExpress.ui.notify(toastDefault);
            },
            info: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "info";

                DevExpress.ui.notify(toastDefault);
            },
            warning: function (message) {

                toastDefault.contentTemplate = function () {

                    return $("</p>").html(message);
                };

                toastDefault.type = "warning";

                DevExpress.ui.notify(toastDefault);
            }
        }

You can use Devextreme toast like that:

index.html:

<script>
toast.success("Success message");
toast.error("Error message");
toast.info("Info message");
toast.warning("Warning message");
</script>

Using ProjectBaseCore without Dependency Injection

We can use ProjectBaseCore(PBC) without dependency injection(DI) by instantiating DatabaseFactory class with new keyword. We can give to factory class's constructor function a object that is implemented IConfiguration interface, or we can create database object by simply giving connection string and provider parameters to GetDbObject function. I give a console application example of how to use PBC without DI.

Program.cs:

class Program
{
   static void Main(string[] args)
   {
        DatabaseFactory databaseFactory = new DatabaseFactory(GetConfiguration());
        IDatabase2 db = databaseFactory.GetDbObject();
        var dt = db.ExecuteQueryDataTable("select * from product");
   }

   static IConfigurationRoot GetConfiguration()
   {
         var builder = new ConfigurationBuilder()
           .SetBasePath(System.AppContext.BaseDirectory)
           .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true);

         return builder.Build();
   }
}

appsettings.json:

{
  "DefaultDb": "Context",
  "ContextProviderName": "MySql.Data.MySqlClient",
  "ConnectionStrings": {
    "Context": "Server=localhost;Database=db;Uid=root;Pwd=1234;"
  }
}

Injecting ProjectBaseCore in .Net Core Project

ProjectBaseCore (PBC) has to be injected to use in .net core project with version 2.x and later. After version 2.x, DatabaseFactory and QueryGeneratorFactory classes are no longer static classes. As a result, PBC version 2.x is not compatible with older versions, because you must inject DatabaseFactory and QueryGeneratorFactory classes or instantiate them with using new keyword.

First of all, in startup.js file or in a dependency injection container, injection must be defined:

services.AddSingleton<IDatabaseFactory, DatabaseFactory>();
services.AddSingleton<IQueryGeneratorFactory, QueryGeneratorFactory>();

In startup file, we write these codes in "ConfigureServices" function. After these declarations, we can use these services in controllers or middleware classes.

public class HomeController : Controller
{
     private readonly IDatabaseFactory _databaseFactory;
     private readonly IQueryGeneratorFactory _queryGeneratorFactory;

     public HomeController(IDatabaseFactory databaseFactory, IQueryGeneratorFactory queryGeneratorFactory)
     {
         _databaseFactory = databaseFactory;
         _queryGeneratorFactory = queryGeneratorFactory;
     }

     public IActionResult Index()
     {
         var db = _databaseFactory.GetDbObject();
         var qg = _queryGeneratorFactory.GetDbObject();
         qg.SelectText = "select * from product";

         var dt = db.ExecuteQueryDataTable(qg.GetSelectCommandBasic());
         return View();
     }
}