# Visualization

Edit on Github

This is a step-by-step tutorial aimed to teach you how to create and visualise neural networks using Neataptic.

Step 1 Create a javascript file. Name it anything you want. But make sure to start it off with the following:

    var Node = neataptic.Node;
    var Neat = neataptic.Neat;
    var Network = neataptic.Network;
    var Methods = neataptic.Methods;
    var Architect = neataptic.Architect;

This makes the whole developing a whole lot easier

Step 2 Create a html file. Copy and paste this template if you want:

    <html>
      <head>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>

        <script src="https://rawgit.com/wagenaartje/neataptic/master/dist/neataptic.js"></script>
        <script src="https://rawgit.com/wagenaartje/neataptic/master/graph/graph.js"></script>
        <link rel="stylesheet" type="text/css" href="https://rawgit.com/wagenaartje/neataptic/master/graph/graph.css">
      </head>
      <body>
        <div class="container">
          <div class="row">
            <svg class="draw" width="1000px" height="1000px"/>
          </div>
        </div>
        <script src="yourscript.js"></script>
      </body>
    </html>

Step 3 Create a network. You can do that in any of the following ways:

    var network = architect.Random(2, 20, 2, 2);

    var network = architect.Perceptron(2, 10, 10, 2);

Or if you want to be more advanced, construct your own:

    var A = new Node();
    var B = new Node();
    var C = new Node();
    var D = new Node();
    var E = new Node();
    var F = new Node();

    var nodes = [A, B, C, D, E, F];

    for(var i = 0; i < nodes.length-1; i++){
      node = nodes[i];
      for(var j = 0; j < 2; j++){
        var connectTo = nodes[Math.floor(Math.random() * (nodes.length - i) + i)];
        node.connect(connectTo);
      }
    }

    var network = architect.Construct(nodes);

Step 4 Retrieve data and draw a graph

    drawGraph(network.graph(1000, 1000), '.draw');

See a working example here! See more info on graphs here!