GA Step-by-Step Visualizer
Walk a genetic algorithm through its lifecycle one stage at a time, from the first random population to selection, crossover, mutation and the next generation.
Go to the live page Open the GA Step-by-Step VisualizerThe GA Step-by-Step Visualizer is a teaching tool. Most demos run generations faster than you can follow. This one stops after every stage of the genetic algorithm so you can see exactly what changes between one generation and the next.
The Problem¶
The population evolves strings of letters toward a target word you choose. The default target is CAIRO. Each chromosome is a row of letters the same length as the target, and its fitness is simply how many letters match the target in the same position. A fitness equal to the target's length means a perfect match, and the run stops there.
Targets can be up to 16 characters long and use the letters A to Z and spaces. Lowercase letters are turned into capitals. Anything else (digits, punctuation) is refused with a message saying why, so you can fix the target before the run starts.
The Stages¶
Every generation passes through the same stages, shown as a badge at the top of the stage panel:
- Initial Population. A random starting population, not yet scored.
- Fitness. Every chromosome is scored against the target. Letters that already match are tinted so you can see why a row has the score it has.
- Select Parents. The chromosomes chosen to breed are highlighted.
- Crossover. Parents are combined into offspring. Each child shows where its letters came from, coloured by parent.
- Mutation. Random letters in the offspring are changed. Before and after rows sit side by side with the changed positions marked.
- Next Generation. The offspring are installed as the new generation, along with whatever the elitism or keep-parents settings carry over.
How a Run Looks¶
A run with the default target starts as soon as the page opens. To use your own target, type it and click Reset / Initialize. Click Step (Next) to move forward one stage at a time, or Prev to look back at earlier stages. Going back doesn't rewind the algorithm itself; it replays saved snapshots, and Step (Next) walks forward through them before the GA continues.
Click Play to let the run advance on its own, and click it again (now Pause) to stop. The menu next to it picks how far each tick goes: a whole generation (the default) or one stage at a time. Play also stops when the run ends, when you click Step, Prev or Reset, when you switch to another tab, or if a request fails. When you scroll down past the controls, a copy of Prev, Play and Next floats at the bottom of the screen.
The panel shows the best string so far with its fitness and how many generations have finished, and the chart at the top tracks the best fitness across generations. The run ends as soon as a string matches the target exactly, with a message saying which generation got there. If no string gets there within the maximum number of generations, the run ends with the best string it found. Either way the final population stays on screen.
Settings to Try¶
Open Settings to change the run. Your changes are saved in this browser and apply on the next Reset / Initialize. Apply & Reset starts over with them straight away, and Reset to defaults puts every setting back.
- Population size (10 to 200, default 10) and Number of parents (default 4, never more than the population).
- Mutation percent (default 10) and Crossover probability (0 to 1, default 0.8).
- Max generations (1 to 500, default 80). The run can stop earlier on a perfect match.
- Keep elitism (0 to 5, default 1). The best chromosomes copied unchanged into the next generation.
- Keep parents (-1 to 5, default -1). Only used when Keep elitism is 0. A value of -1 keeps every selected parent, 0 keeps none, and a positive number keeps that many of the best parents.
The settings dialog also shows how many offspring each generation needs, given these numbers. During a run, the stage panel works out the same sum for your settings, and See decision-tree flowchart opens a diagram of how the next generation is filled, with your settings' path highlighted.
For more on how the demos catalog works, see What the Demos Do.