MLP Neural Network for O.C.R.

100%

MLP Neural Network for O.C.R.

✓ Published0🌍 Public

Last edited Jun 28, 2016

Created on Jun 28, 2016

This interactive visualization demonstrates optical character recognition through a multi-layer perceptron neural network. Users draw a digit (0-9) on an 8x8 grid rendered as SVG rectangles, and the network predicts the number alongside confidence bars for each class. The MLP, implemented in JavaScript with hardcoded weight matrices, performs a forward pass through a single 25-node hidden layer using sigmoid activation. D3.js v3 handles the interactive drawing interface and updates the prediction display. Training data appears unused in this demonstration, focusing instead on testing the pre-initialized network.

AI-generated description

An example of a Multi Layer Perception (MLP) Artificial Neural Network (ANN) for reading handwritten numbers (OCR).

forked from <a href='http://bl.ocks.org/vicapow/'>vicapow</a>'s block: <a href='http://bl.ocks.org/vicapow/d5f5afc1e182ee50c4a2'>MLP Neural Network for O.C.R.</a>

Similar vizzes

Loading thumbnail…

Gist 504719be190c80e2cec9228ea8849c7f

This example shows a handwritten digit recognition system built in Processing. It displays a neural network with 196 input nodes, 49 hidden nodes, and 10 output nodes, trained on the MNIST dataset. The sketch loads a sigmoid activation function and constructs the network via the custom `Network` class. As the user draws on a canvas, the network classifies the input and visualizes the activations propagating through the layers. The code uses Processing’s `setup()` and `loadSigmoid()` methods to initialize the model and rendering.

CCharlesFr

65% match

Loading thumbnail…

Gist 99f0384031106e9fdc7a0d325cd88606

This example demonstrates a neural network classifier for handwritten digits. A Processing sketch displays the network architecture, and mouse clicks either train the network on 500 random samples from the training set or respond to a single test sample. The code uses Processing's `loadPixels()` and `redraw()` functions, alongside custom `Network`, `loadData()`, and `setupSigmoid()` methods, to visualize the network’s layered connections in real time.

CCharlesFr

62% match

Loading thumbnail…

Gist 0b384246f66fe33ea9666f0d1aec3707

This example displays a neural network’s real-time classification of handwritten digit images from a testing set, cycling through a random card number each time the mouse is pressed. The Processing sketch uses the `Network` class to respond to pixel data from a 196-input layer, then renders the network’s nodes and connections with `smooth()` and `stroke(150)`. The current card index and its label are shown as text at the bottom of the canvas, while the background is cleared each frame with `background(255)`.

CCharlesFr

60% match

Loading thumbnail…

Gist 628b2fab1b21dd2fd74ddc2e7469261f

This interactive visualization demonstrates a neural network classifying handwritten digits from the MNIST dataset, showing the network’s ten output activations for each input image. It uses Processing’s `loadBytes()` to read 196-byte image data and 10,000 label bytes, splitting the data set so that four out of five cards train the model while every fifth card tests it. The code defines a `Card` class that stores input arrays and output arrays, highlighting the correct answer within the template outputs during label loading.

CCharlesFr

60% match

Loading thumbnail…

Kohonen SOM

A Kohonen self-organizing map trains a 12×12 hexagonal grid of neurons on 500 random RGB data points, then animates both the neurons and the mapped data points into a clustered arrangement. The visualization uses d3.js for SVG rendering and transitions, with the kohonen library handling the neural network training. Each neuron’s color is derived from its weight vector via a cubehelix color space, while the data points, initially scattered randomly, smoothly transition to their nearest matching neurons over a four-second animation, revealing how the SOM organizes high-dimensional input into a low-dimensional topological layout.

PPhilippe Rivière

60% match

Loading thumbnail…

playground

This visualization presents a convolutional neural network architecture as a sequence of labeled boxes representing layers such as input, conv2d, maxpool, flatten, and fully connected layers, with each box annotated by its output dimensions. The design uses D3.js v7 to draw SVG rectangles and text, with utilities that generate each layer box and connecting lines. Styling for colors and geometry is defined separately, while the main script orchestrates the layout by advancing an x-coordinate between layers.

Aaaron.chu626@gmail.com

59% match

Loading thumbnail…

Gist 36fa85de37aeb50756ec65aa6548b25f

This example implements an artificial neural network where individual neurons are drawn as circles on a canvas. Each neuron connects to a set of previous-layer inputs, multiplying their output values by random weights, then passing the summed result through a sigmoid activation function. The code renders each neuron’s fill color based on its output value, using the Processing API’s `ellipse()` and `fill()` functions to visualize activation levels. The neural activity propagates layer by layer, producing a dynamic, self-contained simulation of a feedforward network without external data inputs.

CCharlesFr

58% match

Loading thumbnail…

A8-adjacency matrix

This visualization displays a dolphin interaction network as an adjacency matrix. Each cell represents the affection level between a pair of dolphins, with color intensity ranging from white to blue via a linear color scale indicating the strength of the connection. The code loads data from a CSV file, builds a symmetric matrix, and renders it using SVG rectangles within an HTML page. D3.js version 7 manages data binding, scales, and tooltips on mouseover, while row and column labels identify individual dolphins by their numeric IDs.

Jjrcuster@dons.usfca.edu

58% match