Pie Chart Maker & CSV Data Visualizer

A high-performance, single-file browser utility designed to transform raw CSV data into elegant, customizable pie charts. This application runs entirely in the browser using the HTML5 Canvas API, ensuring maximum privacy and speed without server-side processing.

Core Features

• CSV Parsing Engine: Robust parsing logic to convert comma-separated values into chart segments.
• Live Preview: Real-time canvas rendering as the user types or updates the data.
• Dynamic Customization: Toggle legend visibility, adjust colors, and modify labels via a sidebar control panel.
• High-Quality Export: Export functionality to save the current canvas state as a clean PNG image.
• Responsive Canvas: The chart auto-scales to fit the viewport while maintaining aspect ratio, ensuring readability on mobile and desktop.
• Error Handling: Graceful UI feedback for malformed CSV inputs (e.g., non-numeric values) using custom overlay components instead of browser alerts.

UI Layout

• Header: Clean branding-free title with a brief description.
• Main Interface: A two-column grid (on desktop) or stacked layout (on mobile).
  • Left Panel (Data Input): Contains a large, monospaced textarea for CSV input with placeholders showing expected formats (e.g., Category,Value).
  • Right Panel (Visualization): The primary canvas area where the chart is rendered. Includes a toolbar for download and legend toggles.

Design & Aesthetics

• Theme: Strict light mode. Use a base of #ffffff for backgrounds, #f8fafc for panel offsets, and #334155 for text.
• Accents: Use professional blue (#2563eb) and subtle gray-slate interactions to maintain a SaaS-like look.
• Typography: Utilize system sans-serif fonts (Inter, Roboto, or standard system fonts) for maximum readability.
• Animations: Subtle transitions for UI panel resizing and smooth fading effects when the chart re-renders.

Technical Directives

• Constraint Compliance: This app MUST run in a sandboxed iframe. Do not use localStorage, sessionStorage, or cookies. Use pure JavaScript variables for in-memory state management.
• Dependencies: Use CDN links for any icons (e.g., Lucide or FontAwesome) or utility CSS (Tailwind). No build-step frameworks (React, Vue, etc.).
• Performance: Debounce the CSV parsing function to ensure smooth typing performance in the textarea.
• Security: Ensure all user inputs are sanitized before being processed by the chart rendering logic to prevent any script injection within the context of the canvas.