neuralNetVisTangle

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">
<body>

<div id="weights"> Node 1 y = <span class="TKAdjustableNumber" data-var="w1"> </span> x + <span class="TKAdjustableNumber" data-var="w2"> </span> z  <br>
    Node 2 y = <span class="TKAdjustableNumber" data-var="w3"> </span> x + <span class="TKAdjustableNumber" data-var="w4"> </span> z  <br>
    Node 3 y = <span class="TKAdjustableNumber" data-var="w5"> </span> x + <span class="TKAdjustableNumber" data-var="w6"> </span> z 
</div>


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

JavaScript

//
//google.setOnLoadCallback(plotResponse);

var tangle = new Tangle(document.getElementById("weights"), {
    initialize: function () {
    this.w1 = 9;
    this.w2 = 5;
    this.w3 = 2;
    this.w4 = 7;
    this.w5 = 10;
    this.w6 = 3;
        
        
    console.log(this.w1);
    google.load("visualization", "1");
    google.setOnLoadCallback(plotResponse);
     document.getElementById("surfacePlotDiv").innerHTML="";
    
    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,
       ...