code-crasher / expense-chart

a component showing expences in week

Expense Chart Project

This project is an expense chart built using D3.js and the Fetch API to retrieve JSON data. The chart displays daily expenses and provides an interactive visualization with tooltips.

Table of Contents

• Overview
• Project Structure
• Features
• Setup
• Usage
• Technologies Used
• Contributing
• License

Overview

The Expense Chart project visualizes daily expenses using a bar chart. It fetches data from a JSON file and displays the data using D3.js. The chart includes interactive tooltips that show the exact amount when hovering over each bar.

Project Structure

expense-chart/
├── data.json
├── index.html
├── app.js
├── style.css
└── README.md

• data.json: Contains the sample expense data in JSON format.
• index.html: The main HTML file that sets up the structure of the web page.
• app.js: Contains the JavaScript code to fetch the data and create the D3.js chart.
• style.css: Contains the CSS styles for the project.
• README.md: The file you are currently reading, which explains the project.

Features

• Fetches expense data from a JSON file using the Fetch API.
• Visualizes the data using a bar chart created with D3.js.
• Includes tooltips that display the exact amount when hovering over each bar.
• Responsive design that adapts to different screen sizes.

Setup

To set up the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/code-crasher/Expense-chart/tree/main

2. Navigate to the project directory:

   cd expense-chart

3. Open index.html in your web browser to view the expense chart.

Usage

To use the project, open the index.html file in a web browser. The bar chart will be displayed, and you can hover over each bar to see the tooltip with the expense amount.

Technologies Used

• D3.js: A JavaScript library for producing dynamic, interactive data visualizations in web browsers.
• Fetch API: A modern interface for making HTTP requests from the browser.
• HTML: The standard markup language for creating web pages.
• CSS: A style sheet language used for describing the presentation of a document written in HTML.
• JavaScript: A programming language that enables interactive web pages and is an essential part of web applications.

Contributing

Contributions are welcome! If you have any ideas or improvements, feel free to open an issue or submit a pull request.

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature-name

3. Make your changes and commit them:

   git commit -m "Add feature"

4. Push to the branch:

   git push origin feature-name

5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.