An immersive 3D visualization of your YouTube watch history, transforming 28,000+ videos into an interactive constellation of content patterns and viewing habits.
YT-WrapUp is a personal data visualization project that takes your YouTube watch history and transforms it into a stunning 3D space where:
- 28,069 videos float as glowing spheres in 3D space
- Time flows left to right (your viewing journey over months)
- Content clusters vertically (music, tech, comedy naturally group together)
- Height shows engagement (playlisted videos float higher)
- AI detects patterns automatically (binge sessions, interest shifts, late-night habits)
Think of it as Spotify Wrapped meets Three.js - but for your YouTube data.
- 28,069 video nodes rendered with GPU instancing (60 FPS performance)
- 6 playlist hubs as large glowing spheres
- 766 search queries with animated particle trails
- 40,193 connections between related videos
- Orbit, zoom, pan with smooth camera controls
- Click any video to see details (title, channel, date, playlists)
- Hover for previews with instant tooltips
- Search visualization toggle (show/hide search connections)
- Time View: Chronological timeline (default)
- Semantic View: Content similarity clustering
- Intent Flow: Spiral from searches to videos
- Smooth 2-second transitions between modes
- Timeline slider to scrub through your history
- Fade-in animations as videos appear
- Date range filtering with visual effects
- Playlist filters: Focus on specific collections
- Channel filters: Highlight favorite creators
- Multi-select with instant visual feedback
- 19 detected patterns from your viewing behavior:
- 🎬 Binge Sessions: 583 videos in 119 minutes detected
- 🔄 Attention Shifts: Interest transitions between categories
- 🌙 Late-Night Patterns: 4,737 videos after 11 PM (16.9%)
- 📊 Monthly Dominance: Which content ruled each month
- Auto-narrated tour through all 19 insights
- 8 seconds per insight with progress bar
- Camera flies automatically to each pattern
- Nodes highlight as story unfolds
- Controls: Previous / Pause / Next
- Bloom post-processing for glowing elements
- Pulsing playlists with triple-layer glow
- Animated particle trails for searches
- Depth fog for atmospheric perspective
In the Preview tab.
- React 18 - UI framework
- Three.js - 3D graphics engine
- React Three Fiber - React renderer for Three.js
- @react-three/drei - Three.js helpers
- @react-spring/three - Smooth animations
- @react-three/postprocessing - Bloom effects
- Vite - Build tool & dev server
- Python 3.13 - Data pipeline
- pandas - Data manipulation
- numpy - Numerical operations
- sentence-transformers - AI embeddings (all-MiniLM-L6-v2)
- scikit-learn - Clustering & dimensionality reduction
- UMAP - 3D layout computation
Raw YouTube Data (JSON/CSV)
↓
1. Merge & Clean (01_merge_data.py)
→ 28,069 videos unified
↓
2. Compute Embeddings (02_compute_embeddings.py)
→ 384-dim semantic vectors
↓
3. Build Graph (03_build_graph.py)
→ 40,193 connections detected
↓
4. Compute 3D Layout (04_compute_layout.py)
→ UMAP dimensionality reduction
↓
5. Detect Patterns (05_detect_patterns.py)
→ 19 insights extracted
↓
3D Interactive Visualization
- Left Mouse Drag: Rotate the view
- Right Mouse Drag: Pan the camera
- Mouse Wheel: Zoom in/out
- Click a sphere: View video details
- Hover over spheres: Quick preview
- Click the 💡 Insights button (bottom-left)
- Browse through 19 detected patterns
- Click any card to fly to that location
- Watch nodes highlight in golden color
- Click 🎬 Story Mode button (top-center)
- Sit back and enjoy the auto-narrated tour
- Use Previous / Pause / Next controls
- Each insight shows for 8 seconds
- View Modes: Switch between Time/Semantic/Intent layouts
- Timeline: Drag slider to filter by date range
- Playlists: Toggle specific playlist visibility
- Searches: Show/hide search connection trails
- Total Videos: 28,069
- Total Connections: 40,193
- Playlists: 6
- Search Queries: 766
- Detected Patterns: 19
- Date Range: August 2024 - December 2025
- Largest Binge: 583 videos in 119 minutes
- Late-Night Videos: 4,737 (16.9%)
X-axis = TIME (past → future, left → right)
Y-axis = CONTENT TYPE (semantic similarity)
Z-axis = ENGAGEMENT (playlisted/searched = higher)
- Red: Binge sessions
- Blue: Attention shifts
- Yellow: Late-night patterns
- Green: Monthly dominance
- Golden: Currently selected insight
- Small spheres: Regular videos
- Large glowing orbs: Playlists (gravity wells)
- Particle trails: Search connections
- Highlighted nodes: Filtered/selected content
-
Build the project
cd frontend npm run build -
Deploy
dist/folder to GitHub Pages# Option A: Use gh-pages package npm install -g gh-pages gh-pages -d dist # Option B: Manual # Push dist/ contents to gh-pages branch
-
Update repository settings
- Go to Settings → Pages
- Source: Deploy from branch
gh-pages - Save and wait for deployment
-
Access your site
This is a personal project, but feel free to:
- Fork it for your own YouTube data
- Report bugs via Issues
- Suggest features or improvements
MIT License - feel free to use this for your own YouTube data visualization!
Created by: [Raj Maurya]
GitHub: @rajm012
Project Link: YT-WrapUp
Built with ❤️ and lots of YouTube data