An interactive web application for visualizing cycling data from .fit files. This project was built for a university final project in Information Visualization.
- Modern, responsive design with mouse and keyboard interactions
- Drag & drop file upload for .fit files
- Real-time data processing and visualization
- Upload Page - Drag & drop .fit file upload with progress indication
- Dashboard - Overview of ride statistics and summary metrics
- Analysis - Detailed charts for speed, heart rate, power, cadence, and altitude
- Comparison - Side-by-side comparison of multiple rides
- Timeline - Temporal analysis of cycling progress over time, including custom date range selection
- Ride creation dates and timestamps
- Time-based filtering (week, month, year, custom range)
- Progress tracking over time
- Historical performance analysis
- Display ride statistics - Show number of rides, total distance, duration
- Interactive route visualization - Map-based route display with hover details
- Time-based filtering - Filter rides by different time periods or custom date range
- Performance comparison - Compare multiple rides side-by-side
- Metric analysis - Detailed charts for various cycling metrics
- Progress tracking - Visual progress bars and cumulative statistics
- Frontend: React 18 + TypeScript
- Styling: Tailwind CSS
- Charts: Recharts (D3.js based)
- Icons: Lucide React
- Build Tool: Vite
- Routing: React Router DOM
- Backend: Python (official Garmin FIT SDK, no framework)
- Node.js (v16 or higher)
- npm or yarn
- Python 3.9+
- Clone the repository:
git clone <repository-url>
cd cycling-data-viz- Install frontend dependencies:
npm install- (Optional) Create and activate a Python virtual environment:
python3 -m venv venv
source venv/bin/activate- Install backend dependencies:
pip install -r requirements.txtYou can start both the backend and frontend with a single shell script:
#!/bin/bash
# Start backend
source venv/bin/activate
python3 fit_parser_service_no_flask.py &
BACKEND_PID=$!
# Wait a bit for backend to start
sleep 2
# Start frontend
yarn install || npm install
npm run dev
# Kill backend on exit
kill $BACKEND_PIDchmod +x dev.sh./dev.sh- The backend will run on http://localhost:5000
- The frontend will run on http://localhost:3000
- In one terminal:
source venv/bin/activate python3 fit_parser_service_no_flask.py - In another terminal:
npm run dev
npm run buildNote: For production, you should use a production-ready Python web server (e.g., Gunicorn, uWSGI) and a proper process manager. The current backend is suitable for development and prototyping.
- Upload .fit Files: Drag and drop your .fit files onto the upload area or click to browse
- View Dashboard: See an overview of your latest ride with key metrics
- Analyze Data: Explore detailed charts for speed, heart rate, power, and more
- Compare Rides: Select multiple rides to compare performance metrics
- Track Progress: View your cycling timeline and progress over time, including custom date range selection
- Line Charts: Time-series data for speed, heart rate, power, cadence, altitude
- Bar Charts: Comparison charts for multiple rides
- Progress Bars: Cumulative distance and performance tracking
- Timeline Visualization: Chronological ride history with custom range
- Hover Tooltips: Detailed information on data points
- Zoom and Pan: Interactive chart navigation
- Filter Controls: Time-based and metric-based filtering, custom date range
- Responsive Design: Works on desktop, tablet, and mobile
The application can visualize the following data from .fit files:
- GPS coordinates and route tracking
- Speed (average and maximum, with 2 decimal precision)
- Heart rate data
- Power output (if available)
- Cadence information
- Elevation and altitude data
- Ride duration and distance
- Calories burned
src/
├── components/ # Reusable UI components
│ └── Navbar.tsx # Navigation component
├── pages/ # Main application pages
│ ├── UploadPage.tsx # File upload interface
│ ├── Dashboard.tsx # Overview dashboard
│ ├── Analysis.tsx # Detailed analysis charts
│ ├── Comparison.tsx # Ride comparison tools
│ └── Timeline.tsx # Temporal analysis (with custom range)
├── types/ # TypeScript type definitions
│ └── RideData.ts # Ride data interfaces
├── utils/ # Utility functions
│ └── fitParser.ts # .fit file parsing logic
├── App.tsx # Main application component
├── main.tsx # Application entry point
└── index.css # Global styles
- ✅ Frontend: Production build with
npm run build(Vite/React/TypeScript, fully typed) - ✅ Backend: Official Garmin FIT SDK, robust error handling, CORS, JSON sanitization
- ✅ Data: Real .fit file parsing, no mock data, all metrics validated
- ✅ UI/UX: Responsive, accessible, modern design
- ✅ Testing: Manual testing with real .fit files
⚠️ Note: For true production, use a WSGI server (e.g., Gunicorn) for the backend and serve the frontend with a static file server or CDN. The current backend is suitable for development and prototyping.
✅ Interactive Website: Full mouse/keyboard interaction support ✅ Multiple Views: 5 distinct pages with different visualizations ✅ Temporal Attributes: Date-based analysis and timeline features (including custom range) ✅ 5+ Interactive Tasks: Various complexity levels from basic stats to advanced comparisons ✅ Modern UI/UX: Professional design with responsive layout
- Map integration with Leaflet for route visualization
- Export functionality for charts and data
- Social sharing features
- Advanced analytics and insights
- Mobile app version
This project is created for educational purposes as part of a university final project.
This is a final project submission. For educational purposes only.