NerdyJS demo

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://www.numericjs.com/lib/numeric-1.2.6.min.js"></script>
<script src="http://nerdyjs.appspot.com/js/nerdy.js"></script>
<body>
    <div class="toolbar">
        Algorithm
        <select id="algorithm">
            <option value="linreg">Linear Regression</option>
            <option value="logreg">Logistic Regression</option>
            <option value="neural">Neural Network</option>
            <option value="knn">k Nearest Neighbor</option>
            <option value="kmeans">k Means Clustering</option>
            <option value="nbayes">Naive Bayes</option>
            <option value="svm">Support Vector Machine</option>
            <option value="qda">Discriminant Analysis</option>
        </select>
        Group
        <select id="group">
            <option value="0">Blue</option>
            <option value="1">Orange</option>
        </select>
    </div>
    <div id="content">
        <canvas id="canvas"></canvas>
    </div>
    <div class="toolbar">
        Dataset:
        <select id="dataset">
            <option>-- Empty --</option>
            <option value="normal">Two normal groups</option>
            <option value="island">Island</option>
            <option value="curved">Curved</option>
        </select>
    </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) {
    gfx.noStroke();
    for (var i = 0; i < 80; i++) {
        for (var j = 0; j < 80; j++) {
            var value = fn({x: j * 5, y: i * 5});
            gfx.fill(255 * value, 100, 255 * (1 - value));
            gfx.rect(j * 5, i * 5, 5, 5);
        }
    }
    gfx.stroke(0);
    // Render points
    data.each(function(obj) {
        if (obj.group == 1) {
            gfx.fill(255, 100, 50);
        } else {
            gfx.fill(50, 100, 255);
        }
        gfx.ellipse(obj.x, obj.y, 5, 5);
    });
}

window.onload = (function () {
    var groupInput = document.getElementById('group');
    var group = groupInput.value;
    groupInput.onchange = function () {
        group = parseFloat(groupInput.value);
    };

    var algorithmInput = document.getElementById('algorithm');
    var algorithm = algorithmInput.value;
    algorithmInput.onchange = function () {
        algorithm = algorithmInput.value;
        update();
    };

    var datasetInput = document.getElementById('dataset');
    datasetInput.onchange = function () {
        var dataset = datasetInput.value;
        data.load('x,y,group');
        var norm = nerdy.random.normal;
        if (dataset == 'normal') {
            for (var i = 0; i < 50; i++) {
                data.addRow({x: norm() * 40 + 100, y: norm() * 50 + 200, group: 0});
            }
            for (var i = 0; i < 50; i++) {
                data.addRow({x: 400 - (norm() * 40 + 100), y: norm() * 50 + 200, group: 1});
            }
        } else if (dataset == 'island') {
            for (var i = 0; i < 100; i++) {
                var angle = Math.random() * Math.PI * 2;
                var x = 200 + (Math.cos(angle) * (norm() * 30 + 130));
                var y = 200 + (Math.sin(angle) * (norm() * 30 + 130));
                data.addRow({x: x, y: y, group: 0});
            }
            for (var i = 0; i < 25; i++) {
                data.addRow({x: norm() * 20 + 200, y: norm() * 20 + 200, group:...