https://github.com/carreraprogrammer/us-gdp
My chart, is a project that displays Federal Reserve Economic Data, by using a bar chart graphic. In this project, I'm practicing data visualization using D3.js, javascript y AJAX. The graphic is interactive and when you hover one of the vars, yo can see a detailed description
https://github.com/carreraprogrammer/us-gdp
css3 d3js html javascript
Last synced: about 2 months ago
JSON representation
My chart, is a project that displays Federal Reserve Economic Data, by using a bar chart graphic. In this project, I'm practicing data visualization using D3.js, javascript y AJAX. The graphic is interactive and when you hover one of the vars, yo can see a detailed description
- Host: GitHub
- URL: https://github.com/carreraprogrammer/us-gdp
- Owner: carreraprogrammer
- Created: 2023-06-25T13:00:33.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-27T20:53:42.000Z (almost 2 years ago)
- Last Synced: 2025-01-22T20:51:51.336Z (4 months ago)
- Topics: css3, d3js, html, javascript
- Language: JavaScript
- Homepage:
- Size: 804 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ (OPTIONAL)](#faq)
- [📝 License](#license)
**[UNITED STATES GDP]** This GitHub project is a data visualization tool that displays the Gross Domestic Product (GDP) data of various countries over a specific time period. The project fetches the GDP data from a JSON file hosted on freeCodeCamp's GitHub repository.
The visualization is implemented using D3.js, a powerful JavaScript library for creating interactive data visualizations in web browsers. The chart is rendered as an SVG (Scalable Vector Graphics) element within the HTML page.
> Describe the tech stack and include only the relevant sections that apply to your project.
Library
Server
- Data Fetching: The project uses the fetch API to asynchronously retrieve the GDP data from the provided JSON file.
- Data Transformation: The fetched data is processed and transformed to extract the necessary information, such as the GDP values and corresponding dates. The toYear function converts the date strings to year values.
- Scaling: The d3.scaleLinear function is used to create linear scales for both the x and y axes. These scales map the input domain (minimum and maximum values from the data) to the output range (dimensions of the chart).
- [Live Demo Link](https://carreraprogrammer.github.io/Us-GDP/)
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need:
### Setup
Clone this repository to your desired folder:
### Install
Install this project with:
### Usage
To run the project, execute the following command:
### Run tests
To run tests, run the following command:
### Deployment
You can deploy this project using:
> Mention all of the collaborators of this project.
👤 **Daniel Carrera**
- GitHub: [@carreraprogrammer](https://github.com/carreraprogrammer )
- Twitter: [@carreraprog](https://twitter.com/carreraprog)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/daniel-carrera-85a917244/)
- Data Fetching: The project uses the fetch API to asynchronously retrieve the GDP data from the provided JSON file.
- Data Transformation: The fetched data is processed and transformed to extract the necessary information, such as the GDP values and corresponding dates. The toYear function converts the date strings to year values.
- Scaling: The d3.scaleLinear function is used to create linear scales for both the x and y axes. These scales map the input domain (minimum and maximum values from the data) to the output range (dimensions of the chart).
- Chart Rendering: The SVG element is created and appended to the designated container in the HTML. Rectangular bars representing each data point are drawn using the rect elements. The height of each bar corresponds to the GDP value, and the x-coordinate is calculated based on the year using the xScale.
- Data Labels: Additional information is displayed for each bar using the foreignObject elements. These elements contain HTML content, including the GDP value in billions and the corresponding date. Styling is applied to achieve a consistent appearance.
- Interactive Features: The project enables interactivity by associating each bar with a corresponding data label. When hovering over a bar, the associated data label is displayed, providing more detailed information. This feature is implemented using event listeners and CSS classes.
- Axis Creation: The x and y axes are created using the axisBottom and axisLeft functions from D3.js. The axes are appended to the SVG element, and appropriate transformations are applied to position them correctly.
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
> Write a message to encourage readers to support your project
If you like this project...
I would like to thank...
This project is [MIT](./LICENSE) licensed.
_NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._