K近傍法

K近傍法

by s_yoshiki

HTML

<!-- <button id="button">
    start
</button> -->
<div id="msg">

</div>
<br>
<div id="content">
    <canvas id="canvas" width="512" height="512"></canvas>
</div>
<hr>

<table>
    <tr>
        <td>x:</td>
        <td><input type="text" value="150" id="x"></td>
        <td><button id="+:x">&nbsp;+&nbsp;</button></td>
        <td><button id="-:x">&nbsp;-&nbsp;</button></td>
    </tr>
    <tr>
        <td>y:</td>
        <td><input type="text" value="200" id="y"></td>
        <td><button id="+:y">&nbsp;+&nbsp;</button></td>
        <td><button id="-:y">&nbsp;-&nbsp;</button></td>
    </tr>
    <tr>
        <td>k:</td>
        <td><input type="text" value="70" id="k"></td>
        <td><button id="+:k">&nbsp;+&nbsp;</button></td>
        <td><button id="-:k">&nbsp;-&nbsp;</button></td>
    </tr>
</table>
<button id="run">&nbsp;run&nbsp;</button>
<hr>
<table>
    <tr>
        <td>クラスタ数 </td>
        <td><input type="text" value="3" id="claster"></td>
    </tr>
    <!-- <tr>
        <td>ノード数 </td>
        <td><input type="text" value="1000" id="node"></td>
    </tr> -->
    <!-- <tr>
        <td>アニメーションフレーム </td>
        <td><input type="text" value="50" id="frame"></td>
    </tr> -->
</table>

CSS

* {
    padding: 0;
}

/* #canvas {
    transform: rotate(-90deg);
}
 */

JavaScript

(function() {

    //クラスタ数
    var class_n = 3;
    //次元数
    var dim = 2;
    var animationFrame = 50;
    var textArrayMax = 500;
    var range = 256;
    var map = randMat(dim, 30, 0, 112)

    randMat(dim, 140, 110, 312).forEach(function(v) {
        map.push(v)
    })

    randMat(dim, 50, 310, 512).forEach(function(v) {
        map.push(v)
    })


    //init();
    showPoints(map, 3, "rgb(0,0,0)")

    var arg = {
        "map": map, //乱数データ
        "n": class_n, // クラスタ数
        "transaction_max": 100 //試行回数上限
    };

    //
    // k-menas
    //
    var km = KMeans(arg);
    var grvArrColor = randMat(3, arg.n, 0, 256);
    //showPoints(arg.map,3,"rgb(0,0,0)");
    clearCanvas();

    for (var i = 0; i < km.result.length; i++) {
        drawPoint(km.result[i], 4, vec2rgb(grvArrColor[i], true));
    }

    for (var j = 0; j < map.length; j++) {
        drawPoint(map[j], 2, vec2rgb(grvArrColor[km.node[j]], true));
    }

    //
    // knn
    //

    document.addEventListener("click", function(e) {
        initDom(e.target.id)
        var knn_x = document.getElementById("x").value
        var knn_y = document.getElementById("y").value
        var knn_k = document.getElementById("k").value
        var knn_result = new Array(class_n)

        knn_result.fill(0)
        map.forEach(function(v, i) {
            var d = (knn_x - v[0]) * (knn_x - v[0]) + (knn_y - v[1]) * (knn_y - v[1])
            d = Math.sqrt(d)

            if (d > knn_k) {
                return
            }
            knn_result[km.node[i]]++
        })
        var knn_max_index = knn_result.indexOf(Math.max.apply(null, knn_result))

        clearCanvas();
        drawPoint([knn_x, knn_y], knn_k, "rgb(200,200,200)")
        for (var i = 0; i < km.result.length; i++) {
            drawPoint(km.result[i], 4, vec2rgb(grvArrColor[i], true));
        }
        for (var j = 0; j < map.length; j++) {
            drawPoint(map[j], 2, vec2rgb(grvArrColor[km.node[j]], true));
        }
       ...