neuralNetVis

by Simon Raper

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="http://javascript-surface-plot.googlecode.com/svn/trunk/javascript/SurfacePlot.js"></script>
<script src="http://javascript-surface-plot.googlecode.com/svn/trunk/javascript/ColourGradient.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/mootools.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/sprintf.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/BVTouchable.js"></script>
<script src="http://worrydream.com/Tangle/Tangle.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/TangleKit.js"></script>
<link rel="stylesheet" href="http://worrydream.com/Tangle/TangleKit/TangleKit.css">
<input type="range" id="w1Slider" value="9" name="points" min="1" max="10" onchange="updatePlot()"> w1 </input> <br>

<input type="range" id="w2Slider" value="5" name="points" min="1" max="10" onchange="updatePlot()"> w2 </input> <br>

<input type="range" id="w3Slider" value="2" name="points" min="1" max="10" onchange="updatePlot()"> w3 </input> <br>

<input type="range" id="w4Slider" value="7" name="points" min="1" max="10" onchange="updatePlot()"> w4 </input> <br>

<input type="range" id="w5Slider" value="10" name="points" min="1" max="10" onchange="updatePlot()"> w5 </input> <br>

<input type="range" id="w6Slider" value="3" name="points" min="1" max="10" onchange="updatePlot()"> w6 </input>


<div id='surfacePlotDiv'>
    <!-- SurfacePlot goes here... -->
</div>

JavaScript

google.load("visualization", "1");
google.setOnLoadCallback(setUp);

function setUp() {
    
    w1 = document.getElementById('w1Slider').value/10;
    w2 = document.getElementById('w2Slider').value/10;
    w3 = document.getElementById('w3Slider').value/10;
    w4 = document.getElementById('w4Slider').value/10;
    w5 = document.getElementById('w5Slider').value/10;
    w6 = document.getElementById('w6Slider').value/10;
    
    var numRows = 100;
    var numCols = 100;

    var tooltipStrings = new Array();
    var data = new google.visualization.DataTable();

    for (var i = 0; i < numCols; i++) {
        data.addColumn('number', 'col' + i);
    }

    data.addRows(numRows);
    var d = 0.25;
    var idx = 0;

    for (var i = 0; i < numRows; i++) {
        for (var j = 0; j < numCols; j++) {
            
            var x = d*(i-50);
            
            var y = d*(j-50);

            var value = 1/(1+Math.exp(-(w1/(1+Math.exp(-(w3*x+w4*y)))+w2/(1+Math.exp(-(w5*x+w6*y))))));

            data.setValue(i, j, value-0.3);

            tooltipStrings[idx] = "x:" + x + ", y:" + y + " = " + value;
            idx++;
        }
    }

    surfacePlot = new greg.ross.visualisation.SurfacePlot(document.getElementById("surfacePlotDiv"));

    // Don't fill polygons in IE. It's too slow.
    var fillPly = true;

    // Define a colour gradient.
    var colour1 = {
        red: 0,
        green: 0,
        blue: 255
    };
    var colour2 = {
        red: 0,
        green: 0,
        blue: 200
    };
    var colour3 = {
        red: 100,
        green: 0,
        blue: 100
    };
    var colour4 = {
        red: 200,
        green: 0,
        blue: 50
    };
    var colour5 = {
        red: 255,
        green: 0,
        blue: 0
    };
    var colours = [colour1, colour2, colour3, colour4, colour5];

    // Axis labels.
    var xAxisHeader = "X";
    var yAxisHeader = "Y";
    var zAxisHeader = "Z";

    var options = {
        xPos: 0,
        yPos: 0,
        width:...