Overview
StrokesLab is a data-rich analytics platform for PGA Tour strokes gained statistics. Built entirely with Claude Code, it demonstrates how AI-assisted development can produce production-quality applications with complex data visualization requirements.
The platform transforms dense statistical data into intuitive, interactive visualizations — making strokes gained analysis accessible to both casual golf fans and serious analysts.
The Challenge
Golf analytics data is notoriously dense. The PGA Tour tracks hundreds of statistics per player per tournament. The challenge was distilling this into an intuitive interface that serves both casual fans wanting quick insights and serious analysts needing deep dives.
Existing tools present data almost exclusively in tables — missing the opportunity for visual pattern recognition that could unlock real understanding of player performance.
Research & Discovery
I started by mapping the PGA Tour's GraphQL API, understanding the data relationships between tournaments, players, rounds, and statistics. Key insights emerged:
- Strokes Gained is the gold standard — the most meaningful modern golf metric, but poorly understood by most fans
- Tables dominate the space — existing tools miss the opportunity for visual pattern recognition
- Mobile usage spikes during live events — demanding responsive-first design with touch-optimized interactions
Design System
The design system embraces a dark theme optimized for data visualization. High-contrast accent colors ensure chart elements remain readable against dark backgrounds, while the information hierarchy guides users naturally from overview to detail.
Typography uses a clear hierarchy: serif headings for editorial warmth, mono labels for data precision, and sans-serif body text for readability across screen sizes.
Key Features
Interactive Radar Charts
D3.js-powered radar charts compare players across six strokes gained categories simultaneously, revealing strengths and weaknesses at a glance. Hover states show exact values with contextual tooltips.
Tournament Leaderboards
Real-time leaderboard integration with expandable player rows showing round-by-round SG breakdowns. Scroll-triggered animations create a polished data browsing experience.
Historical Trends
Line and bump charts tracking player performance trajectories across seasons. Hover tooltips surface contextual statistics, and the bump chart makes rank changes immediately visible.
Course Profiles
Heatmap visualizations showing how course characteristics correlate with specific strokes gained categories — helping predict which player profiles suit which venues.
Technical Implementation
The application is built with Next.js App Router and server components, fetching data from the PGA Tour's GraphQL API. D3.js handles all chart rendering with careful attention to responsive scaling and touch interactions.
Key technical decisions:
- Server components for initial data fetching, keeping the client bundle lean
- D3.js over charting libraries for full control over visual output
- Spatial efficiency with responsive breakpoints that reflow charts rather than just scaling them
Results & Impact
StrokesLab demonstrates the viability of AI-assisted full-stack development for complex, data-driven applications. The entire application — from API integration to responsive charts — was built through collaboration with Claude Code.