A real-time 3D visualization dashboard that displays Real-Time activities (commits, pull requests, and issues) on an interactive globe with comprehensive analytics. This is all sample data, nothing is live. Feel free to download and add your own data.
-
Interactive 3D Globe
- Real-time activity visualization
- Animated arcs and pulses for activity representation
- Particle system for enhanced visual effects
- Textured Earth with clouds and atmosphere
- Orbital controls for navigation
-
Comprehensive Analytics
- Activity distribution charts
- Regional heatmap
- Real-time metrics grid
- Activity timeline
- Type-based filtering
- Time range selection (1h, 24h, 7d)
-
Real-time Updates
- Simulated activity generation
- Live updating metrics
- Smooth animations and transitions
- React 18
- TypeScript
- Three.js with React Three Fiber
- Recharts for analytics
- Zustand for state management
- Tailwind CSS for styling
- Lucide React for icons
- Vite for build tooling
- Node.js (v18 or higher recommended)
- npm or yarn
- Clone the repository
-
git clone https://github.com/lalomorales22/global-analytics-dashboard.git
-
cd global-analytics-dashboard
-
npm install
- Start the development server
- npm run dev
- Open your browser and navigate to
http://localhost:5173
The application can be configured through various parameters:
- Activity generation rate: Modify the interval in
App.tsx - Visual settings: Adjust parameters in Globe, Arc, and Pulse components
- Time ranges: Configure in
types.tsandTimeRangeSelector.tsx
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Three.js for 3D rendering capabilities
- React Three Fiber for React integration
- Earth textures from Three.js examples