Skip to main content

CSViewer - Lightweight CSV Data Visualizer

CSViewer is a clean, minimal web application designed to visualize CSV data quickly and clearly, featuring both demo and upload modes for maximum flexibility.

Overview​

CSViewer provides an intuitive interface for converting CSV data into interactive visualizations. Whether you're analyzing experimental data, business metrics, or any two-column dataset, CSViewer makes it easy to see patterns and trends in your data with just a few clicks.

Key Features​

Visualization Capabilities​

  • Dynamic Graph Rendering: Interactive charts created from your uploaded data
  • Two-Column Support: Optimized for X-axis and Y-axis data pairs
  • Interactive Graphs: Zoom, hover, and tooltip functionality for detailed exploration
  • Real-time Updates: Instant visualization as soon as data is uploaded
  • Responsive Charts: Automatically adjusts to different screen sizes

Data Handling​

  • Drag and Drop Upload: Simple file picker and intuitive drag-and-drop CSV upload
  • Demo Mode: Preloaded example datasets for quick testing and exploration
  • Strict Format Validation: Ensures clean, properly formatted data for accurate visualization
  • Header Recognition: Automatically uses CSV headers as axis labels
  • Error Handling: Clear feedback for formatting issues or upload problems

User Experience​

  • Clean Interface: Minimal, distraction-free design focused on your data
  • Dark Mode Support: Built-in dark theme for comfortable viewing
  • Fast Rendering: Quick visualization of datasets with optimized performance
  • Mobile Friendly: Works seamlessly on desktop, tablet, and mobile devices
  • No Registration: Start visualizing immediately without creating accounts

Demo Features​

  • Built-in Examples: Multiple sample datasets to explore CSViewer's capabilities
  • Quick Testing: Test the interface without needing your own data
  • Educational: Learn proper CSV formatting through working examples

Technology Stack​

  • Framework: React with Vite for fast development and optimal performance
  • Charting Library: Recharts for creating beautiful, interactive visualizations
  • Styling: TailwindCSS for clean, responsive design
  • Build Tool: Vite for lightning-fast development and optimized production builds
  • Deployment: Optimized for modern web hosting platforms

CSV Format Requirements​

CSV files must follow this strict format for optimal results:

Time (s)Velocity (m/s)
00
13
27
312

Format Rules​

  • Only 2 columns allowed: First column = X-Axis, Second column = Y-Axis
  • Header row required: First row will be used as axis labels
  • Clean CSV format: Comma-separated values with no extra columns or rows
  • Numeric data: Both columns should contain numeric values for proper charting
  • No empty cells: Ensure all data cells contain valid values

Supported Data Types​

  • Time series data: Timestamps, dates, or sequential time values
  • Scientific measurements: Experimental data with independent and dependent variables
  • Business metrics: Sales over time, performance indicators, growth data
  • Statistical data: Any paired numeric dataset suitable for line charts

Getting Started​

Online Version​

Visit csviewer.lunarbit.dev to start using CSViewer immediately in your browser.

Local Development​

  1. Clone the repository:

    git clone https://github.com/LunarBit-dev/CSViewer.git
    cd CSViewer

  2. Install dependencies:

    npm install

  3. Start development server:

    npm run dev

  4. Build for production:

    npm run build

  5. Preview production build:

    npm run preview

Usage Guide​

Quick Start​

  1. Visit CSViewer: Open the application in your browser
  2. Choose Mode: Select between Demo Mode or Upload Mode
  3. Upload Data: Drag and drop your CSV file or use the file picker
  4. View Results: Your data will be instantly visualized as an interactive chart

Demo Mode​

  • Explore Examples: Browse through built-in sample datasets
  • Learn Format: Understand proper CSV structure through working examples
  • Test Features: Try all interactive features without needing your own data
  • Get Inspired: See different types of data visualizations possible

Upload Mode​

  • Prepare Data: Ensure your CSV follows the required format
  • Upload File: Use drag-and-drop or the file picker
  • Validate Format: CSViewer will check your data format
  • Interact: Zoom, hover, and explore your visualized data

Chart Interactions​

  • Zoom: Click and drag to zoom into specific data ranges
  • Hover: Mouse over data points to see exact values
  • Tooltips: Get detailed information about specific data points
  • Reset: Easily reset zoom and view the complete dataset

Use Cases​

Research & Academia​

  • Lab Data: Visualize experimental results and measurements
  • Student Projects: Quick visualization for academic assignments
  • Data Analysis: Preliminary exploration of research datasets
  • Presentations: Create visual aids for academic presentations

Business & Analytics​

  • Performance Metrics: Track KPIs and business indicators over time
  • Sales Data: Visualize sales trends and seasonal patterns
  • Market Research: Analyze survey results and market data
  • Reporting: Create visual reports for stakeholders

Personal Use​

  • Fitness Tracking: Visualize workout progress and health metrics
  • Financial Planning: Track expenses, savings, or investment performance
  • Hobby Projects: Analyze personal data collections
  • Learning: Understand data visualization concepts

Development & Testing​

  • API Testing: Quickly visualize API response data
  • Performance Monitoring: Chart application performance metrics
  • Data Validation: Verify data quality through visual inspection
  • Prototyping: Rapid visualization for proof-of-concept projects

Features in Detail​

File Upload​

  • Multiple Methods: Drag-and-drop, file picker, or paste data
  • Instant Feedback: Immediate validation and error reporting
  • Format Checking: Automatic detection of format issues
  • Large File Support: Handles reasonably large datasets efficiently

Chart Customization​

  • Automatic Scaling: Charts automatically scale to fit your data
  • Responsive Design: Adapts to different screen sizes and orientations
  • Color Scheme: Optimized colors for both light and dark themes
  • Typography: Clear, readable labels and legends

Data Processing​

  • Real-time Parsing: Instant processing of uploaded CSV data
  • Error Recovery: Graceful handling of minor formatting issues
  • Performance Optimization: Efficient rendering of large datasets
  • Memory Management: Optimized for browser performance

Browser Compatibility​

CSViewer works on all modern browsers:

  • Chrome: Latest versions (recommended)
  • Firefox: Latest versions
  • Safari: Latest versions
  • Edge: Latest versions
  • Mobile Browsers: iOS Safari, Chrome Mobile, Samsung Internet

Contributing​

We welcome contributions to make CSViewer even better!

How to Contribute​

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/your-feature-name
  3. Make your changes
  4. Test thoroughly
  5. Commit your changes: git commit -am 'Add some feature'
  6. Push to the branch: git push origin feature/your-feature-name
  7. Submit a pull request

Development Guidelines​

  • Follow React and TypeScript best practices
  • Maintain the clean, minimal design philosophy
  • Ensure responsive design on all devices
  • Write clear, descriptive commit messages
  • Test new features thoroughly

Roadmap​

Planned Features​

  • CSV Validation Feedback: Detailed error messages and formatting suggestions
  • Graph Export: Download charts as images (PNG, SVG, PDF)
  • Multi-Column Support: Support for datasets with more than 2 columns
  • Chart Types: Additional visualization options (scatter plots, bar charts, histograms)
  • Data Export: Export processed or filtered data back to CSV
  • Advanced Interactions: Data point selection, filtering, and highlighting
  • Mobile App: Native mobile application for iOS and Android
  • API Integration: Direct integration with popular data sources
  • Collaboration: Share visualizations with others
  • Templates: Pre-built chart templates for common use cases

Recent Updates​

  • Enhanced Mobile Support: Improved responsive design for mobile devices
  • Performance Optimization: Faster rendering for larger datasets
  • UI Improvements: Cleaner interface and better user feedback
  • Error Handling: More informative error messages and recovery options

Technical Details​

Performance​

  • Optimized Rendering: Efficient chart rendering for smooth interactions
  • Memory Usage: Minimized memory footprint for better browser performance
  • Loading Times: Fast initial load and data processing
  • Responsive Updates: Smooth animations and transitions

Security​

  • Client-Side Processing: All data processing happens in your browser
  • No Data Storage: Uploaded files are not stored on servers
  • Privacy First: Your data never leaves your device
  • Secure Hosting: Served over HTTPS with modern security headers

Support​

Getting Help​

  • GitHub Issues: Report bugs or request features on our GitHub repository
  • Documentation: This comprehensive guide covers most use cases
  • Community: Join discussions with other users

Troubleshooting​

  • File Won't Upload: Check that your CSV has exactly 2 columns with headers
  • Chart Not Displaying: Ensure your data contains numeric values
  • Performance Issues: Try with a smaller dataset or use a modern browser
  • Mobile Issues: Try refreshing the page or switching to desktop

License​

CSViewer is open source software licensed under the MIT License. You're free to use, modify, and distribute it according to the terms of the license.

CSViewer - Making data visualization simple and accessible for everyone.