Trade Analytics Platform
Built the full data visualization frontend for a global trade analytics system — interactive TreeMaps, GeoMaps, and hierarchical drill-downs across international trade datasets.
Overview
The client needed a tool to help trade analysts explore global trade patterns — who's buying what, from where, at what scale. The platform ingested massive datasets from international trade APIs and needed to present them in a way that was both visually clear and analytically deep.
The Challenge
The data was inherently hierarchical (HS2 → HS4 → HS6 product codes) and multi-dimensional (by country, exporter, year, and category). Traditional table-based tools couldn't capture the geographic and hierarchical nature of trade flows. Analysts needed to drill deep without losing context.
My Role
I owned the full frontend visualization layer — chart components, filter systems, and the API integration layer. No design system was provided; I made all component and layout decisions from scratch.
Architecture Decisions
ECharts for TreeMap, amCharts for GeoMap
Chose different libraries for different needs — ECharts handled hierarchical drill-down performance better; amCharts had superior geographic projection support for trade flow arrows.
Centralized filter state
Built a shared filter store (market, exporter, product, year range) that all charts subscribed to — a filter change on one chart instantly updated all others without prop drilling.
API normalization layer
Wrote transformation utilities that reshaped nested API responses into flat, chart-ready structures — keeping visualization components completely decoupled from API shape.
Debounced rendering pipeline
Filter changes triggered debounced re-renders to prevent excessive API calls and chart flickering on rapid input — critical for the multi-criteria filter panel.
Hard Problems Solved
- 01
Drill-down state management — each TreeMap level (HS2 → HS4 → HS6) required different API calls and data shapes. Built a stack-based drill state manager for forward/backward navigation without data inconsistency.
- 02
GeoMap performance — rendering hundreds of trade flow arrows simultaneously caused frame drops. Solved with canvas-based rendering for flows and SVG only for interactive elements.
- 03
Responsive charts — chart libraries don't handle responsive layouts natively. Built a ResizeObserver wrapper that recalculated chart dimensions on container resize without destroying/re-mounting.
Impact
- check_circle
Analysts could drill from global aggregates to HS6 product codes in seconds — a workflow that previously required manual spreadsheet work
- check_circle
The GeoMap replaced a static, manually maintained Excel chart the client team had used for years
- check_circle
Zero external BI tools (Tableau, Power BI) required — the full analytics interface lived natively in the product
Tech Stack