Interactive Visualizer

ChaosPlane

Status: ActivePlatform: WebStack: Next.js, TypeScript, Framer Motion, Zustand
ChaosPlane hero image

Problem

Every commercial flight in the United States boards passengers into an overhead bin system that has no allocation logic. Passengers declare their bag count at check-in — airlines have this data hours before boarding begins — but the information is never used to manage bin capacity. The result is predictable: bins fill unevenly, passengers search multiple rows for space, gate-checking becomes reactive instead of preventive, and boarding times inflate.

This is a data structures problem hiding in plain sight. The airline industry treats overhead bin capacity as an unmanaged physical constraint. But it is actually an online bin-packing problem with a known input stream (check-in data), a fixed container set (the bins), and well-studied algorithmic solutions. The data exists. It is collected. It is simply not processed with the right structures.


Approach

ChaosPlane is a single-page interactive visualizer that demonstrates the full pipeline from check-in through boarding, proving that a priority queue and segment tree system eliminates bin chaos entirely.

The visualizer runs four competing algorithms against the same 180-passenger dataset on a 30-row aircraft: 1. Next Fit (current airline behavior): each passenger tries only their nearest bin. If full, gate-check immediately. 2. First Fit (current passenger behavior): passengers scan outward from their seat until finding space. 3. First Fit Decreasing (pre-sorted by bag size): passengers reordered so largest bags board first, filling big gaps before small ones. 4. Check-In Pre-Allocation (the proposed solution): at check-in, a segment tree allocates each passenger specific bin slots using O(log n) range queries near their seat. During boarding, passengers go directly to their assigned bin. No searching. No conflicts.

The core data structure is a composite of four elements modeled on production job queue patterns: a segment tree over 60 bins for O(log n) capacity queries, a priority queue (min-heap) ordering passengers by boarding group with FIFO within groups, an allocation map linking each passenger to their assigned bin slots, and a capacity ledger that projects overflow before boarding begins.


Implementation

ChaosPlane — Implementation — figure 1

The airplane renders as a top-down SVG: 30 rows, 6 seats per row (3-3 configuration), overhead bins as rectangular containers above each row (left and right per row, 60 total), each bin holding 4 standard carry-on bags. Passengers are generated with realistic distributions: 15% zero bags, 55% one bag, 30% two bags.

The segment tree visualization is the centerpiece. It renders as an animated binary tree where leaf nodes represent individual bins and internal nodes show aggregate remaining capacity for their range. When a passenger checks in, the allocation query visually traverses the tree — nodes highlight as the algorithm descends, the optimal bin is selected, the leaf updates, and the change propagates upward. This makes the O(log n) behavior visually tangible.

The capacity ledger includes a projection gauge that calculates when overflow will occur based on remaining unchecked passengers and historical bag rates. The moment projected overflow first exceeds zero is treated as a dramatic visual event — the gauge shifts color, a notification fires, and the system demonstrates that the airline could have alerted passengers hours before boarding.

The four-algorithm comparison runs side by side with synchronized playback, culminating in a grouped bar chart comparing gate-checked bags, boarding time, bin utilization, and passenger conflicts across all four strategies.

Playback controls allow 1x through 20x speed, step-forward, and phase jumping between check-in and boarding.

Next.jsTypeScriptFramer MotionZustandSVGAlgorithmsData Structures