NN SVG API

NN-SVG can draw three kinds of Neural Networks:

• Fully Connected Neural Networks (FCNN.js)
• Convolutional Neural Networks in the "LeNet" style (LeNet.js)
• Deep Convolutional Neural Networks in the "AlexNet" style (AlexNet.js)

I. Initialize the Object

In order to draw a Neural Network, include the script in your project HTML:

    <script type="text/javascript" src="FCNN.js"></script>

And then create a neural network:

    <script type="text/javascript">

        fcnn = FCNN();  // or lenet = LeNet(); or alexnet = AlexNet();

Note: FCNN.js and LeNet.js depend on D3v5:

    <script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>

And AlexNet depends on Three.js and some extra libraries from Three.js not included by default:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="SVGRenderer.js"></script>
    <script src="Projector.js"></script>

II. Draw the Network:

1. FCNN:

    // only mandatory parameter(s): 'architecture_'
    fcnn.redraw({'architecture_': array<int>, 'showBias_':bool, 'showLabels_':bool}); 
    // only mandatory parameter(s): 'betweenNodesInLayer_'
    fcnn.redistribute({'betweenNodesInLayer_': array<int>, 
                       'betweenLayers_': int, 
                       'nnDirection_': 'right' or 'up'});

The most meaningful parameters to NN-SVG are those that describe the NN's architecture. In this case, that parameter is architecture, and it can simply be an array of integers, which represent the dimensions of each fully connected layer.

2. LeNet:

    // only mandatory parameter(s): 'architecture_', 'architecture2_'
    lenet.redraw({'architecture_': architecture, 'architecture2_': array<int>});
    // no mandatory parameters
    lenet.redistribute({'betweenLayers_': array<int>, 'betweenSquares_': int});

In this case, architecture must be an array of Objects describing each convolutional layer, e.g.:

[{'numberOfSquares': 24, 'squareWidth': 16, 'stride': 8}, ...]

and architecture2 must be an array of integers representing the fully connected layers in the CNN.

Note: stride is a misnomer -- 'stride' actually represents the size of the convolutional filter.

3. AlexNet:

     // only mandatory parameter(s): 'architecture_', 'architecture2_'
     alexnet.redraw({'architecture_': architecture,
                     'architecture2_': array<int>,
                     'betweenLayers_': int,
                     'logDepth_': bool,
                     'depthScale_': int,
                     'logWidth_': bool,
                     'widthScale_': int,
                     'logConvSize_': bool,
                     'convScale_': int,
                     'showDims_': bool});

Since AlexNet uses Three.js, drawing and distributing is taken in one step, and we cannot redistribute independently of redrawing. In this case, architecture is an array of objects like:

[{widthAndHeight: 224, depth: 3, stride: 11}, ...]

and architecture2 is still an array of integers.

Note: stride is a misnomer -- 'stride' actually represents the size of the convolutional filter.

III. Style the network:

All parameters are always optional.

1. FCNN:

    fcnn.style({'edgeWidthProportional_': bool,
                'edgeWidth_': int,
                'edgeOpacityProportional_': bool,
                'edgeOpacity_': float in [0,1],
                'negativeEdgeColor_': color,
                'positiveEdgeColor_': color,
                'edgeColorProportional_': bool,
                'defaultEdgeColor_': color,
                'nodeDiameter_': int,
                'nodeColor_': color,
                'nodeBorderColor_': color});

2. LeNet:

    lenet.style({'color1_': color,
                 'color2_': color,
                 'borderWidth_': int,
                 'rectOpacity_': float in [0,1],
                 'showLabels_': bool});

3. AlexNet:

    alexnet.style({'color1_': color,
                   'color2_': color,
                   'color3_': color,
                   'rectOpacity_': float in [0,1],
                   'strideOpacity_': float in [0,1]});