NerdyJS demo

by wybiral

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://www.numericjs.com/lib/numeric-1.2.3.min.js"></script>
<script src="http://www.usegloo.com/js/nerdy.js"></script>
    <body>
        <div id="toolbar">
            Lambda:
            <input id="lambda" type="text" value="0.0" size="10"/>
            Group:
            <select id="group">
                <option value="0">Blue</option>
                <option value="1">Orange</option>
            </select>
        </div>
            <div id="content">
            <canvas id="canvas"></canvas>
        </div>
    </body>

CSS

#toolbar, #content {
    width: 400px;
    margin: 0;
    padding: 0;
    text-align: center;
}

body, input, select {
    font: bold 11px arial,sans-serif;
}

JavaScript

function render(gfx, data, fn) {
    /*
        Render graph and theta boundaries
    */
    gfx.scale(10);
    // Render background
    for (var i = 0; i < 40; i++) {
        for (var j = 0; j < 40; j++) {
            var value = fn({x: j * 10, y: i * 10});
            gfx.stroke(255 * value, 100, 255 * (1 - value));
            gfx.point(j, i);
        }
    }
    gfx.scale(0.1);
    gfx.stroke(0);
    // Render points
    data.each(function(row) {
        if (row.group == 1) {
            gfx.fill(255, 100, 50);
        } else {
            gfx.fill(50, 100, 255);
        }
        gfx.ellipse(row.x, row.y, 5, 5);
    });
}

window.onload = (function() {   
    // Lambda input
    var lambda = document.getElementById('lambda').value;
    var lambdaInput = document.getElementById('lambda');
    lambdaInput.onchange = function() {
        lambda = parseFloat(lambdaInput.value);
        redraw();
    };

    // Group input
    var group = document.getElementById('group').value;
    var groupInput = document.getElementById('group');
    groupInput.onchange = function() {
        group = parseFloat(groupInput.value);
    };

    var data = new nerdy.Dataset();
    data.load([['x', 'y', 'group']]);    

    // Canvas for rendering
    var canvas = document.getElementById('canvas');
    var gfx = new Processing(canvas);

    function redraw() {
        var fn = nerdy.nbayes({
            samples: data,
            x: ['x', 'y'],
            y: 'group'
        });
        render(gfx, data, function(x) {
            return fn(x);
        });
    }
    
    canvas.onclick = function(evt) {
        if (typeof evt.offsetX == 'undefined'){
             evt.offsetX = evt.layerX - canvas.offsetLeft;
        }
        if (typeof evt.offsetY == 'undefined'){
             evt.offsetY = evt.layerY - canvas.offsetTop;
        }
        data.addRow({x: evt.offsetX, y: evt.offsetY, group: group});
        redraw();
    };

    gfx.size(400, 400);
    
    render(gfx, data,...