An interactive data visualization tool built with p5.js that uses procedural treemapping to analyze global migration profiles. The application presents a side-by-side comparison of world populations, mapping out immigrant and emigrant proportions across major sovereign countries.
You can view and interact with the live sketch directly on the p5.js Web Editor.
This project parses global migration records (including immigrant counts, emigrant counts, and population percentages) to generate dynamic, nested treemaps. By evaluating data distributions recursively, it constructs relative structural square components that scale their area, color density, and typographic layout according to specific country populations.
- Dual-Mode Visualizations: Smooth toggle between structural Immigration Data (rendered in dynamic Red hue channels) and Emigration Data (rendered in Blue hue channels).
- Hybrid Sorting & Search Pipeline: Utilizes optimized high-performance search and sort algorithms to rank every single sovereign entity in real-time.
- Responsive Visual Culling: Squares dynamically scale labels. Large areas present in-canvas textual profiles (Country name & value), while smaller data nodes leverage mouse tracking and semi-transparent overlay cards to render micro-details cleanly on hover.
-
Toggle Perspectives: Click the text labels "Immigration Data" or "Emigration Data" at the top-left of the canvas (
$x \in [50, 230]$ ,$y \in [40, 50]$ ) to rebuild the recursive treemap representation. - Inspect Micro-Nodes: Hover your mouse cursor over smaller ranked square bounds to show full descriptive cards for countries whose labels do not fit within their default boundaries.
The architecture relies heavily on custom mathematical utility frameworks to achieve fluid visual updates without reliance on third-party analytical blocks:
To calculate relative standings without computing bottlenecks, the system switches algorithmic patterns based on subset densities:
-
Subproblems where
$N \ge 10$ : Runs an optimized QuickSort algorithm choosing a middle array pivot value:$$pivot = \left\lfloor \frac{\text{array.length}}{2} \right\rfloor$$ -
Subproblems where
$N < 10$ : Shifts execution automatically into a localized InsertionSort sequence to reduce the overhead tracking depth common in pure recursion.
To fetch actual visual ranks out of organized data matrices instantly, the runtime passes properties into a two-tiered search engine:
-
Search Space
$\ge 10$ items: Performs standard log-time dividing Binary Search. -
Search Space
$< 10$ items: Hands off elements seamlessly to a finite Linear Search to pull precise index keys.
The visualization determines canvas footprints recursively by computing individual population values against global limits:
├── index.html # HTML Canvas container with p5.js CDN configurations
├── style.css # Resets margins and padding for standard edge presentation
├── mySketch.js # Global lifecycle setup(), draw() loops, and coordinate tracking
├── createSquare.js # OOP CreateSquare class handling rendering and localized overflow checks
├── mouseClicked.js # Interaction bounding box tracker for data context shifts
├── handleLoadData.js # String manipulation utilities splitting row segments
├── sortData.js # Source algorithms for QuickSort and InsertionSort
├── searchData.js # Source algorithms for BinarySearch and LinearSearch
├── findCountryPlacement.js # Master execution bridge parsing metrics to generate ranks
├── treemap.js # Geometry engine drawing nested canvas allocations
└── IEData.txt # Tabular dataset tracking raw sovereign population profiles