RAID Visualizer

Things to Play With

• Pick a RAID level. Switch between RAID 0, 1, 4, 5, and 10 to see how each layout stripes, mirrors, or computes parity across the drive bay.
• Write data. Type a string (spaces become underscores) or hit Random, then Write Data to lay characters across the array. Parity blocks appear in yellow as two-digit hex bytes.
• Corrupt storage. Click any occupied block to fail it, or hit Fail on a drive to wipe the whole disk. Random Failure is a quick way to demo recovery.
• Rebuild the array. Press Rebuild Array and watch source blocks light up blue before the recovered block turns red — parity levels XOR surviving blocks; mirrored levels copy from the paired drive.
• Scale the array. Add or remove drives within the limits of each RAID level and watch usable capacity and fault tolerance update live. Changing the geometry clears the array — write again to see the new layout.

About

In October 2022 I built RAIDviz as an educational tool for professors teaching storage in my university operating systems course. The idea was simple: let students see striping, mirroring, and parity instead of only reading about them on a slide. The original version was a standalone vanilla JavaScript page with Bootstrap styling.

The demo above is a from-scratch React and TypeScript rewrite for this portfolio. It fixes bugs from the original (broken rebuild after adding drives, incorrect sum-based "parity"), adds RAID 5, uses real XOR parity, and matches the interactive demos elsewhere on this site.

How RAID maps data to drives

Each drive in the visualizer is a 4×4 grid — sixteen blocks. When you write a string, the simulator distributes characters according to the RAID level you selected.

RAID 0 stripes characters round-robin across every drive. Capacity is 100%, but there is no redundancy: lose any block and it is gone forever.

RAID 1 mirrors every character onto every drive. Capacity drops to 1/n, but you can lose n−1 drives and still read the data.

RAID 4 stripes across all but one drive and stores XOR parity on a dedicated parity disk. RAID 5 does the same math but rotates which drive holds parity on each stripe row, which is why the yellow parity blocks move around as you add data.

RAID 10 stripes across the first half of the drives and mirrors each stripe onto a partner in the second half — striped mirrors.

The XOR trick

RAID 4 and RAID 5 recover missing data with exclusive-or parity. For two data blocks A and B, the parity block P stores:

P = A ⊕ B

If A is lost, you recover it from the survivors:

P ⊕ B = A

The visualizer computes parity over character byte values and displays the result as a two-digit hex value on parity blocks. During rebuild, it XORs every non-failed block in the same stripe row to reconstruct the missing one.

Worked example

Suppose stripe row 0 holds "A" on drive 1 and "B" on drive 2. Their ASCII codes are 65 and 66, so:

65 ⊕ 66 = 3   → parity block shows "03"

If drive 1 fails, rebuild XORs 66 ⊕ 3 = 65, recovering "A".

RAID comparison

Level	Min drives	Usable capacity	Fault tolerance	Best for
RAID 0	2	100%	None	Speed, scratch data
RAID 1	2	1/n	n−1 drive losses	Critical small data sets
RAID 4	3	(n−1)/n	1 drive	Teaching dedicated parity
RAID 5	3	(n−1)/n	1 drive	Production parity with better write scaling
RAID 10	4 (even)	50%	1 failure per mirror pair	Fast redundant workloads

Why RAID 0 cannot rebuild

RAID 0 spreads each character across exactly one drive with no copies and no parity. When a block fails, there is literally no other place the byte was stored. The rebuild step reports that immediately — that is the point of the demo. Redundancy is not free: RAID 1 gives you copies, RAID 4/5 give you parity math, and RAID 10 gives you both striping and mirroring, but each trades capacity or complexity for survivability.