Data Visualizer By Amaan Shaikh

Data visualization brings numbers to life, and that’s precisely our goal in this project. Data Visualizer by Amaan Shaikh was developed with modern UI/UX, animations and performance in mind. It’s suitable for students, educators, and professionals.

🎯 Project Overview

This Data Visualizer isn’t just functional it’s interactive, clean, and smart. It supports:

CSV input via file or paste
Chart types – Bar, Line, Pie, Doughnut, Radar, Polar Area
Auto-aggregation for repeated categories
Live table summary of the dataset
Chart export as PNG
Dark Mode toggle

It’s a perfect frontend showcase of JavaScript DOM manipulation, Chart.js integration, file handling, and responsive CSS.

✨ Key Features

📊 Multiple Chart Types
Visualize data with Bar, Line, Pie, Doughnut, Radar או Polar Area charts.

🎨 Dynamic Color Picker
Customize chart colors instantly with a color input.

📁 Drag & Drop CSV Upload
You can upload a .csv or paste data directly to the text area.

🧠 Smart Data Merging
Duplicate categories are automatically combined with summed values.

🌗 Dark Mode Toggle
Switch between light and dark themes. Preference is saved with localStorage.

📤 Export as PNG
Easily download your chart as an image for reports or presentations.

📄 Live Data Table
All charts are included with a summary data table for further easy understanding and access.

🧰 Development Stack

HTML5 and Vanilla JavaScript
Chart.js with DataLabels Plugin
Responsive CSS and custom design system
ARIA labels for accessibility
localStorage for dark mode persistence

🛠 How It Works

Open the tool in any modern browser — no installation needed.
Paste or upload your CSV data.
Choose a chart type and color.
Click “Visualize Data” to see your chart.
Download the chart or reset to start again.

📌 Why You Should Build or Use This

This project is great for learning and practicing:

JavaScript file input/output
Data parsing, validation, and transformation
Dynamic UI rendering with Chart.js
CSS animations and styling
DOM interaction and accessibility best practices

It’s also part of the hands-on learning experience for students at InfoDesk Computer Education.

🧠 Final Thoughts

Whether you’re a student preparing for your future or a developer building your portfolio, this Data Visualizer by Amaan Shaikh is a rewarding project that combines real-world utility with clean design. Try it, enhance it, and use it to showcase your frontend skills!

📊 How To Create A Data Visualizer