https://github.com/burnycoder/neural-network-xor-visualized
Interactive visualization of a simple neural network training on the XOR dataset
https://github.com/burnycoder/neural-network-xor-visualized
Last synced: 5 months ago
JSON representation
Interactive visualization of a simple neural network training on the XOR dataset
- Host: GitHub
- URL: https://github.com/burnycoder/neural-network-xor-visualized
- Owner: BurnyCoder
- Created: 2025-05-07T03:13:09.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-07T03:15:40.000Z (about 1 year ago)
- Last Synced: 2025-06-27T16:48:27.216Z (12 months ago)
- Language: HTML
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# neural-network-xor-visualized
Interactive visualization of a simple neural network training on the XOR dataset

Open network.html
Network Structure:
Overall Layout: The network is organized into three vertical sections:
Input Layer (Left): Shows the neurons that receive the initial data (e.g., [0,0], [0,1]).
Hidden Layer (Middle): An intermediate layer of neurons that processes information from the input layer. The complexity of patterns the network can learn often depends on this layer.
Output Layer (Right): Shows the neuron(s) that produce the network's final prediction (e.g., trying to match 0 or 1 for XOR).
Neurons (Circles): Each circle represents a single neuron or processing unit.
Neuron Color: The color of a neuron indicates its activation level.
Darker/Cooler Color (e.g., dark blue/grayish): Represents a low activation (close to 0). The neuron is not firing strongly.
Brighter/Warmer Color (e.g., light blue evolving to yellowish): Represents a high activation (close to 1). The neuron is firing strongly.
Neuron Labels (e.g., I0, H1, O0): These are simple identifiers for each neuron (I for Input, H for Hidden, O for Output, followed by an index).
Connections (Weights):
Lines between Neurons: These lines represent the connections between neurons. Each connection has an associated weight.
Weight's Role: A weight determines the strength and influence of one neuron's output on another neuron in the next layer. During training, the network learns by adjusting these weights.
Connection Line Thickness:
Thicker Line: Indicates a stronger influence (higher absolute value of the weight). The signal passing through this connection will have a more significant impact on the receiving neuron.
Thinner Line: Indicates a weaker influence (lower absolute value of the weight).
Connection Line Color:
Green Line: Represents a positive weight. A positive weight means that if the sending neuron is highly activated, it will excite (try to increase the activation of) the receiving neuron.
Red Line: Represents a negative weight. A negative weight means that if the sending neuron is highly activated, it will inhibit (try to decrease the activation of) the receiving neuron.
Opacity/Intensity of Color: The more saturated or opaque the color (green or red), the larger the magnitude of the positive or negative weight, complementing the thickness cue.