A lightweight web app for uploading, parsing, and visualizing racecar telemetry data. Built with Next.js, shadcn/ui + TailwindCSS, PapaParse, and Chart.js. Enhanced with Gemini API for LLM-driven insights into useful visualizations, anomalies, and key data patterns.
- Upload CSV files directly in the browser
- Parse and process telemetry data with PapaParse
- Interactive graphs with Chart.js (line, scatter, time-series, etc.)
- Clean, modern UI with shadcn/ui and TailwindCSS
- Gemini API integration for:
- Recommended graphs based on data columns
- Anomaly detection (spikes, drops, flatlines)
- Insights into key ranges and trends
- Fully client-side (no backend or database required)
- Next.js – modern React framework, easy deployment, fast UI
- shadcn/ui + TailwindCSS – clean, professional styling
- PapaParse – reliable CSV parsing in-browser
- Chart.js – versatile graphing library for interactive charts
- Gemini API – LLM-driven insights for graphs, anomalies, and key trends
- No backend / no storage – keeps project simple, avoids overengineering
-
Clone the repo
git clone https://github.com/RadonUmar/DataVisualization.git cd racecar-data-website -
Install dependencies
npm install
-
Add your Gemini API key Create a .env.local file in the project root:
NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here
-
Run the development server
npm run dev
Open http://localhost:3000 in your browser.
This app can be deployed easily on Vercel (recommended for Next.js apps).
Push this repo to GitHub
Import into Vercel
Add your environment variable (NEXT_PUBLIC_GEMINI_API_KEY)
(https://youtu.be/E4XFDfcdBL0)
PRs and issues welcome! Feel free to fork and build on this project.