An interactive data visualization page built with Chart.js that presents the current impact of AI on the job market and emerging career trends.

AI Employment Trends Visualization Dashboard Website

This is an interactive data visualization page about the decline of traditional industry roles and emerging opportunities driven by AI. Upon opening the page, you are first greeted by a real-time trend-tracking clock and a scrolling news ticker at the top, followed by the core statistics — 350 million jobs impacted, a $2.1 trillion AI market size, and a 72% enterprise AI adoption rate — all continuously updating as you stay on the page.

Scrolling down reveals six sections in sequence: Career Impact showcases six disappearing professions with real-world cases (telephone customer service, junior designers, programmers, copywriters, translators, data entry clerks), each annotated with obsolescence rates and data sources; Real-Time Updates automatically fetches global AI industry news, refreshing every five minutes, with graceful fallback to cached content when the API fails; Risk Index categorizes over twenty industries into high/medium/safe tiers, complete with dynamic progress bars and a cost comparison table that vividly illustrates the AI-to-human cost gap (up to 99.97%); Trend Visualization presents seven interactive charts from different dimensions — industry radar, job transition forecasts, investment distribution, high-growth sector CAGR, input-output ratio bubble charts, and cross-country replacement progress comparison; Timeline traces eight key milestones from GPT-3 in 2020 to a new equilibrium in 2030; and finally the Opportunities section, listing twelve still-viable entry points, each with startup costs, expected returns, and category tags, plus a survival guide contrasting the “5 Most Dangerous Directions” with the “5 Most Worthwhile Directions.”

The entire page is a dark-themed single-page application featuring a particle network background, glassmorphism cards, scroll-triggered fade-in animations, and real-time data ticker effects — everything works out of the box with no installation or deployment required.

Technical Implementation:

• Built 7 chart types using Chart.js (radar, line, doughnut, bubble, bar, etc.) to present data relationships from multiple dimensions
• Particle background implemented with Canvas + requestAnimationFrame; motion trajectories and connection logic self-authored
• Scroll-triggered animations via IntersectionObserver — elements only activate upon entering the viewport to avoid unnecessary rendering overhead
• News module fetches Google News RSS via Fetch API (converted through rss2json), with custom caching strategy and degradation logic for smooth fallback to preset data on API failure
• Theme colors managed centrally through CSS custom properties; responsive layout adapts to desktop and mobile via multi-breakpoint Media Queries
• Overall data-driven view architecture with decoupled data and rendering logic for easier maintenance and extensibility