Neural Network Visualization Inputs on the left and the outputs on the right in between are all the hidden nodes connections For fully connected neural networks Write a function that does all the work A single function just pass the neural network configuration data and it ll create it or update it if one already exists function drawNeuralNetwork canvasName config let canvas document getElementById canvasName if canvas undefined canvas document createElement canvas document body appendChild canvas canvas width canvas height 600 const context canvas getContext 2d const canvasWidth context canvas width const canvasHeight context canvas height const layers weights biases config const layerCount layers length const neuronRadius 20 const layerSpacing canvasWidth layerCount 1 const maxNeurons Math max layers Function to get position of a neuron function getNeuronPosition layerIndex neuronIndex const x layerSpacing layerIndex 1 const ySpacing canvasHeight layers layerIndex 1 const y ySpacing neuronIndex 1 return x y Draw connections weights and biases for let i 0 i layerCount 1 i for let j 0 j layers i j for let k 0 k layers i 1 k const from getNeuronPosition i j const to getNeuronPosition i 1 k context beginPath context moveTo from x from y context lineTo to x to y context strokeStyle gray context stroke Draw weight value const weight weights i j k const midX from x to x 2 const midY from y to y 2 context fillStyle black context font 12px Arial context fillText weight toFixed 2 midX midY Draw neurons and biases for let i 0 i layerCount i for let j 0 j layers i j const x y getNeuronPosition i j Draw neuron context beginPath context arc x y neuronRadius 0 2 Math PI context fillStyle white context fill context strokeStyle black context stroke Draw bias const bias biases i j context fillStyle black context font 12px Arial context fillText bias toFixed 2 x neuronRadius 2 y neuronRadius 2 drawNeuralNetwork Example configuration const config layers 3 4 2 Number of neurons per layer input layer hidden layers output layer weights Weights between layer 0 and layer 1 0 5 0 2 0 1 0 7 Weights from neuron 0 in layer 0 to neurons in layer 1 0 3 0 8 0 5 0 6 0 2 0 9 0 4 0 3 Weights between layer 1 and layer 2 0 1 0 4 Weights from neuron 0 in layer 1 to neurons in layer 2 0 7 0 3 0 6 0 2 0 5 0 8 biases Biases for layer 0 0 2 0 3 0 4 Biases for layer 1 0 1 0 2 0 3 0 4 Biases for layer 2 0 5 0 1 drawNeuralNetwork neuralNetworkCanvas config
ay context stroke Draw weight value const weight weights i j k const midX from x to x 2 const midY from y to y 2 context fillStyle black context font 12px Arial context fillText weight toFixed 2 midX midY Draw neurons and biases for let i 0 i layerCount i for let j 0 j layers i j const x y getNeuronPosition i j Draw neuron context beginPath context arc x y neuronRadius 0 2 Math PI context fillStyle white context fill context strokeStyle black context stroke Draw bias const bias biases i j context fillStyle black context font 12px Arial context fillText bias toFixed 2 x neuronRadius 2 y neuronRadius 2 drawNeuralNetwork Example configuration const config layers 3 4 2 Number of neurons per layer input layer hidden layers output layer weights Weights between layer 0 and layer 1 0 5 0 2 0 1 0 7 Weights from neuron 0 in layer 0 to neurons in layer 1 0 3 0 8 0 5 0 6 0 2 0 9 0 4 0 3 Weights between layer 1 and layer 2 0 1 0 4 Weights from neuron 0 in layer 1 to neurons in layer 2 0 7 0 3 0 6 0 2 0 5 0 8 biases Biases for layer 0 0 2 0 3 0 4 Biases for layer 1 0 1 0 2 0 3 0 4 Biases for layer 2 0 5 0 1 drawNeuralNetwork neuralNetworkCanvas config