Data Visualization
Communicating through visuals rather than text alone — editorial infographics in print, and a live economic dashboard on the web.
This project explores how data can be communicated through visual design rather than text alone. By combining charts, composition, and typography, I aimed to make information easier to read while also creating a strong visual impact.
One piece presents environmental data through a graph-based layout, using contrast and structure to make patterns immediate. Another applies data visualization in a poster format, combining statistics, image-making, and typography into a more expressive way of reading information.
Sony lens comparison
The poster format lets the data carry personality: spec comparisons become composition, and typography does the ranking work a table would normally do.
Liquid Glass — US Economic Dashboard
A glassmorphic data visualization dashboard inspired by Apple's design language. Built with Next.js, React, and Chart.js, it transforms real Federal Reserve (FRED) economic data into an interactive, visually engaging dashboard — running live below.
US Economic Dashboard
Key macroeconomic indicators · Federal Reserve (FRED) · BEA · BLS · 1960–2026
Interest Rate · Unemployment · Inflation
Annual averages · 1960–2026 · Source: FRED FEDFUNDS, UNRATE, CPIAUCSL
Real GDP Growth Rate
Annual % change · Chained 2017 dollars · FRED GDPC1
Federal Debt / GDP
End of fiscal year · FRED GFDEGDQ188S
What the dashboard tracks
The dashboard tracks key US macroeconomic indicators — GDP, unemployment, CPI inflation, the Federal Funds Rate, and the Debt-to-GDP ratio — with historical context from 1960 to 2026, including shaded recession periods on time-series charts.
Key design decisions include a custom glassmorphic surface system with backdrop-filter blur, gradient-filled chart areas, and a fully responsive 12-column grid layout. The project supports both dark and light themes, as well as dual-language switching between English and Chinese.
Data sources include the Federal Reserve Economic Data (FRED), Bureau of Labor Statistics (BLS), and Bureau of Economic Analysis (BEA).
Analysis tool, design system
Through this project, I explored how data visualization can function as both an analytical tool and a design system — helping viewers quickly understand information while maintaining clarity, rhythm, and visual interest.
