ChartFlow Studio is a browser-based CSV to animated chart video tool. It lets users upload a CSV file, map time/category/value columns, preview an animated bar chart race, and export the result as a WebM video.
Tools like Alien Art Charts turn spreadsheet data into animated chart videos for creators and analysts. This project is a lightweight open-source MVP inspired by that workflow, built as a portfolio-friendly React project.
- CSV upload
- Automatic column detection
- Column mapping for time, label, and numeric value
- Animated bar chart race preview
- Top-N filtering
- Adjustable animation speed
- Browser-based WebM export using Canvas and MediaRecorder
- Built-in demo dataset
- Responsive dashboard UI
- React
- TypeScript
- Vite
- PapaParse
- HTML Canvas
- MediaRecorder API
Your CSV should include:
year,company,revenue
2020,Apple,274
2020,Microsoft,143
2021,Apple,365
2021,Microsoft,168You can use different column names. Just map them in the UI.
npm install
npm run devThen open the local Vite URL in your browser.
npm run build
npm run preview- MP4 export support
- Line chart animation
- Area chart animation
- Theme presets
- Logo/watermark upload
- TikTok/Reels vertical export
- AI-generated chart captions
- User accounts and saved projects
This is a strong GitHub project because it combines data parsing, visualization, animation, browser APIs, and product thinking in one project.