Data Visualization
Relevant source files
The following files were used as context for generating this wiki page:
The Data Visualization system in the PCStyle portfolio provides a real-time, high-fidelity representation of developer activity, system metrics, and project statistics. It leverages data from GitHub and WakaTime to create interactive, cyberpunk-themed visual interfaces, ranging from 2D heatmaps to 3D voxel grids and neural flow maps. Sources: pages/Stats.tsx:114-119, components/ui/WakaTimeDashboard.tsx:75-79
This system is primarily hosted within the Stats page and is supported by a backend API layer that aggregates and caches external metrics. Sources: api/index.ts:101-115, pages/Stats.tsx:135-140
Architecture and Data Flow
The visualization architecture follows a decoupled pattern where an Edge Runtime API fetches raw data from third-party providers, processes it into standardized internal schemas, and serves it to React-based UI components.
The diagram above illustrates the request-response cycle from external providers through the caching layer to the specialized visualization components. Sources: api/index.ts:25-50, hooks/useWakaTime.ts:10-25
Data Models
The system uses strict TypeScript interfaces to ensure consistency across different visualization types.
| Interface | Description | Key Fields |
|---|---|---|
GitHubContributions | Aggregated GitHub activity | totalContributions, weeks (2D array of days) |
WakaTimeSummary | Processed coding time stats | totalSeconds, languages, editors, projects |
GitHubStats | General repository metrics | publicRepos, totalStars, totalCommits |
Sources: lib/types.ts:40-100
Visual Components
GitHub Activity Visualization
The project implements two distinct views for GitHub contribution data: a standard 2D heatmap and a 3D "Voxel Grid".
- ContributionHeatmap: Displays a 120-day activity map. It uses a 5-level color scale (
LEVEL_COLORS) to represent contribution density. Sources: components/ui/ContributionHeatmap.tsx:8-14, components/ui/ContributionHeatmap.tsx:96-103 - VisualContributionHeatmap: A 3D isometric representation of the last 14 weeks of activity. It uses
framer-motionto handle mouse parallax rotations and 3D transforms (rotateX,rotateZ) to create a "Data Voxel Grid". Sources: components/ui/VisualContributionHeatmap.tsx:21-35, components/ui/VisualContributionHeatmap.tsx:95-105
WakaTime Metrics
The WakaTimeDashboard serves as the primary container for coding-related visualizations, including specialized sub-components.
Neural Language Map
This component visualizes programming language frequency as a "Neural Flow". It includes:
- Dynamic Signals: Progress bars that animate width based on the percentage of time spent in a language. Sources: components/ui/NeuralLanguageMap.tsx:75-85
- Pulse Glow: A continuous linear animation that simulates a "signal" traveling through the bar. Sources: components/ui/NeuralLanguageMap.tsx:87-98
- Digital Fragments: Randomly flickering 1px bars that appear on high-usage languages (>20%) to add visual complexity. Sources: components/ui/NeuralLanguageMap.tsx:103-110
Project Bit Matrix
The ProjectMatrix visualizes the distribution of time across different projects using a binary-style grid. Each project row contains a series of 12 "bits" (rectangles) that light up according to the project's percentage of total work. Sources: components/ui/ProjectMatrix.tsx:45-60
API Implementation & Caching
To prevent rate-limiting from external providers (GitHub/WakaTime) and ensure high performance, the system implements a custom caching strategy in the Edge API.
| Endpoint | Cache TTL | Data Source |
|---|---|---|
/api/wakatime/summary | 60 seconds | WakaTime Summaries (7 days) |
/api/github/contributions | 300 seconds | GitHub GraphQL (Contribution Calendar) |
/api/github/stats | 300 seconds | GitHub REST (User/Repos/Events) |
Sources: api/index.ts:50-55, api/index.ts:130-135
WakaTime Processing Logic
The API does not just proxy WakaTime data; it aggregates it. It iterates through daily summaries to calculate totalSeconds, identify the bestDay, and build maps for languages, editors, and projects, which are then converted to sorted arrays for the frontend. Sources: api/index.ts:114-145
Conclusion
The Data Visualization system transforms abstract development metrics into a cohesive cyberpunk aesthetic. By utilizing advanced 3D transforms, spring-based animations, and a robust Edge-caching backend, the project provides an interactive and technically accurate representation of the developer's real-time productivity and history.