An open API service indexing awesome lists of open source software.

https://github.com/affancoder/stock-data-visualization-web-app

Stock Data Visualization Web App
https://github.com/affancoder/stock-data-visualization-web-app

hosting-deployment html-css-javascript javascript linkedin project stock-market

Last synced: 7 months ago
JSON representation

Stock Data Visualization Web App

Awesome Lists containing this project

README

          

# 📊 Stock Data Visualization Web App

## 🚀 Overview
This is a web application that displays a **list of companies** on the left side. When a company is clicked, a **dynamic chart** of its stock data (from `dump.csv`) is displayed using **Chart.js**.

## 🛠️ Tech Stack

- **HTML, CSS, Bootstrap** → Responsive UI
- **JavaScript** → Handles data parsing & chart rendering
- **Chart.js** → Interactive data visualization

---

## 📂 Project Structure

```
📂 stock-data-visualization
┣ 📜 index.html # Main UI
┣ 📜 style.css # Custom styles
┣ 📜 script.js # Loads & visualizes CSV data
┣ 📜 dump.csv # Stock data file
┣ 📜 README.md # Project documentation
┗ 📜 .gitignore
```

---

## ⚙️ Installation & Setup

### 🖥️ Prerequisites
- A **modern browser** (Chrome, Edge, Firefox)

### 🔧 Steps

1. **Clone the repository**
```sh
git clone https://github.com/your-username/stock-data-visualization.git
cd stock-data-visualization
```

2. **Open `index.html` in a browser**

---

## 📊 Features

✅ **Company List** – Clickable list of companies
✅ **Interactive Charts** – Stock data visualization
✅ **CSV Parsing** – Loads data in-browser
✅ **Modern UI** – Styled with Bootstrap

---

## 📸 Screenshots

| Company List | Stock Chart |
|-------------|------------|
| ![List](assets/list.png) | ![Chart](assets/chart.png) |

---

## 🚀 Live Demo
🔗 **[View Online](https://affancoder.github.io/stock-data-visualization/)**

---

## 📌 To-Do

- [ ] Add **filters** for time range
- [ ] Improve **UI/UX**
- [ ] Support **D3.js** for enhanced visuals

---

## 💡 Credits

- **[Chart.js](https://www.chartjs.org/)**
- **[Bootstrap](https://getbootstrap.com/)**
- Data Source: *dump.csv*

---

### 🔥 Developed by **[MD Affan Asghar](https://github.com/affancoder)**