//Note: it is not image recoginition/classifier //it uses 4 Charac... of flower to guess Specie of flower //start after loading dom window.onload = function(){ //after loading nd processing file, it ll call a function (init) new File("https://dl.dropbox.com/s/w9vh1jan23yx3pg/Iris.txt", init); //kode crasher suggestion document.body.onclick = calc; } /* ***** dataset used ***** https://www.kaggle.com/uciml/iris */ //some crispy variables 😉 const K = 10; //no. of nearest neighbour var nearest_neb; // variable to hold nearset neighbour /* well you don't need this code to learn this algo, It is simplest Machine learning algorithm, you can easily learn it from anywhere */ // to store Dataset values var dataset = null; var train = 100; //splitting dataset for train.. var test = 50; // splitting for testing ... //image url var images = { 'Iris-setosa' : ['0q0l9vchroogx0d/Iris-setosa1.JPG', 'sta7goc5qmeq5lr/Iris-setosa2.JPG', '1ghd8xjocfyq2ri/Iris-setosa3.JPG', 'h8sgjvf983m414r/Iris-setosa4.jpg' ], 'Iris-versicolor' : ['f5c1nepxvftyffg/Iris-versicolor1.JPG', 'n7tn9gy7oiubwjc/Iris-versicolor2.JPG', 'ry77791eg054z3q/Iris-versicolor3.JPG', 'ceo0vtxm02nhxmd/Iris-versicolor4.JPG', 'axz5u4h5dpzyjrn/Iris-versicolor5.JPG', 'bufl6vcoxi8tfj5/Iris-versicolor6.JPG'], 'Iris-virginica' : ['wgb326gt4vvq3dl/Iris-virginica1.JPG', 'txhjnotjqjlnu8e/Iris-virginica2.JPG', '9yo95pbs98anvdt/Iris-virginica3.JPG', 'cbbpourvvu465jv/Iris-virginica4.JPG'] } //i m using canvas to pring images bt you can use Html Img element var cnv, ctx, cnvSize = 150; // to store Html objects var sl,sw,pl,pw,sp,lv, vtx, gtx; //ll b calld after load.. file succesful.. function init(data){ //hide loader let loader = document.querySelectorAll("#loader, #loader-bg"); loader[0].style.display = "none"; loader[1].style.display = "none"; //canvas and div Html Objects to display images and properties cnv = document.querySelector("#cnv"); sl = document.querySelector("#sl>b>span"); sw = document.querySelector("#sw>b>span"); pl = document.querySelector("#pl>b>span"); pw = document.querySelector("#pw>b>span"); sp = document.querySelector("#sp>b>span"); lv = document.querySelector("#line-vis"); vtx = lv.getContext("2d"); lv.height = 50*4; // vtx.height = lv.height*4; lv.width = innerWidth*0.98*4; // vtx.width = lv.width*4; /* %%%%%%%%% graph = document.querySelector("#graph"); gtx = graph.getContext("2d"); graph.height = 300*4; graph.width = innerWidth*0.98*4; */ window.onresize =()=> { lv.width = innerWidth*0.98*4; // graph.width = innerWidth*0.98*4; %%% } //drawing context & size of canvas ctx = cnv.getContext("2d"); cnv.width = cnvSize; cnv.height = cnvSize; //to display dataset in Html table table(data); //from File class dataset = data.csv; print("Click on screen to get random datapoints"); //to randomise dataset for(let i = 0; i<150; i++){ let r1 = randint(0,150); let r2 = i; [dataset.PetalLengthCm[r1],dataset.PetalLengthCm[r2]] = [dataset.PetalLengthCm[r2],dataset.PetalLengthCm[r1]]; [dataset.PetalWidthCm[r1],dataset.PetalWidthCm[r2]] = [dataset.PetalWidthCm[r2],dataset.PetalWidthCm[r1]]; [dataset.SepalLengthCm[r1],dataset.SepalLengthCm[r2]] = [dataset.SepalLengthCm[r2],dataset.SepalLengthCm[r1]]; [dataset.SepalWidthCm[r1],dataset.SepalWidthCm[r2]] = [dataset.SepalWidthCm[r2],dataset.SepalWidthCm[r1]]; [dataset.Species[r1],dataset.Species[r2]] = [dataset.Species[r2],dataset.Species[r1]]; } //now we can calculate nearest neighbours calc(); } function calc(){ let rand = randint(train, train + test -1); let sepalLen = dataset['SepalLengthCm'][rand]; let sepalWid = dataset['SepalWidthCm'][rand]; let petalLen = dataset['PetalLengthCm'][rand]; let petalWid = dataset['PetalWidthCm'][rand]; let specie = dataset['Species'][rand]; let randImg = randint(0, images[specie].length); if(typeof images[specie][randImg] == 'string'){ img = new Image(); img.src = `https://dl.dropbox.com/s/${images[specie][randImg]}`; img.crossOrigin = ""; images[specie][randImg] = img; img.onload =()=>{ drawImg(img)}; }else{ drawImg(images[specie][randImg]); } sl.innerText = `${sepalLen} cm`; sw.innerText = `${sepalWid} cm`; pl.innerText = `${petalLen} cm`; pw.innerText = `${petalWid} cm`; sp.innerText = `${specie}`; let distwP = {}; for(let i = 0; iGuess:

Iris-setosa: ${100*outcomes["Iris-setosa"]/K} %
Iris-versicolor: ${100*outcomes["Iris-versicolor"]/K} %
Iris-virginica: ${100*outcomes["Iris-virginica"]/K} %`; if(outcomes[specie]/K > 0.5){ //light green guess.style.backgroundColor = "#bdf2d8"; }else if(outcomes[specie]/K > 0.4){ //light yellow guess.style.backgroundColor = "#FFFCBB"; }else { //light red guess.style.backgroundColor = "#FFCCCB"; } lineVis(eucdist(sepalWid, sepalLen, petalWid, petalLen), specie); } var lineVis =(datapoint1val, datapointSpecie)=>{ let records = {}; for(let i = 0; i{ vtx = gtx let records = {}; for(let i = 0; i{ ctx.beginPath(); //arc at x&y if radius r and 0 to 2pie@, anti-clockwise ctx.arc(x,y,r,0, Math.PI*2, false); ctx.stroke(); ctx.fill(); } //background color const bg =(ctx, col)=>{ ctx.fillStyle = col; ctx.fillRect(0,0,ctx.canvas.clientWidth*4,ctx.canvas.clientHeight*4); } //for line ftom x1,y1 to x2,y2... const line =(ctx, x1, y1, x2, y2)=>{ ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke() } const random =(min, max)=>{ return Math.random()*(max - min) + min; } const randint =(min, max)=>{ return Math.floor(Math.random()*(max - min) + min); } const eucdist =(...points)=>{ return Math.hypot(...points); } const map = (val, aMin, aMax, bMin, bMax)=>{ return (val - aMin) * (bMax - bMin) / (aMax - aMin) + bMin; } const drawImg =()=>{ ctx.drawImage(img,0, 0, cnv.width, cnv.height); } const table = (data) =>{ tb = document.createElement("table"); tr = document.createElement("tr"); keys = Object.keys(data.csv); // print(keys) for(let i = 0;i{ this.text = data; //print(this.text) this._read_csv__(true,"," ,call); }) } else{ throw Error("response status " + response.status +"\n" + url) } } catch(err){ console.log(err); } } _read_csv__(header = true, delimiter = ",",call){ let rows; let columns = {}; if(header){ rows = this.text; rows = rows.split(/\r?\n|\r/); let headers = rows[0].split(","); for(let i = 0; i

K-nearest Neighbour || ML