ChartFlow Studio

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.

Why this project exists

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.

Features

• 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

Tech stack

• React
• TypeScript
• Vite
• PapaParse
• HTML Canvas
• MediaRecorder API

CSV format

Your CSV should include:

year,company,revenue
2020,Apple,274
2020,Microsoft,143
2021,Apple,365
2021,Microsoft,168

You can use different column names. Just map them in the UI.

Getting started

npm install
npm run dev

Then open the local Vite URL in your browser.

Build

npm run build
npm run preview

Roadmap

• 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

Portfolio note

This is a strong GitHub project because it combines data parsing, visualization, animation, browser APIs, and product thinking in one project.