{"id":21371516,"url":"https://github.com/carreraprogrammer/us-gdp","last_synced_at":"2025-10-25T05:44:37.792Z","repository":{"id":176718428,"uuid":"658335445","full_name":"carreraprogrammer/Us-GDP","owner":"carreraprogrammer","description":"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","archived":false,"fork":false,"pushed_at":"2023-06-27T20:53:42.000Z","size":823,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-22T20:51:51.336Z","etag":null,"topics":["css3","d3js","html","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carreraprogrammer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-25T13:00:33.000Z","updated_at":"2023-07-18T09:32:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"e6963a8d-49ee-459b-a837-142f2362d430","html_url":"https://github.com/carreraprogrammer/Us-GDP","commit_stats":null,"previous_names":["carreraprogrammer/us-gdp"],"tags_count":0,"template":false,"template_full_name":"microverseinc/readme-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2FUs-GDP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2FUs-GDP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2FUs-GDP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2FUs-GDP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carreraprogrammer","download_url":"https://codeload.github.com/carreraprogrammer/Us-GDP/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243846982,"owners_count":20357297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","d3js","html","javascript"],"created_at":"2024-11-22T08:13:46.287Z","updated_at":"2025-10-25T05:44:32.754Z","avatar_url":"https://github.com/carreraprogrammer.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003cimg src=\"https://github.com/carreraprogrammer/To-do-List/blob/master/carrera_logo.png?raw=true\" alt=\"logo\" width=\"140\"  height=\"auto\" /\u003e\n  \u003cbr/\u003e\n\n\u003c/div\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n# 📗 Table of Contents\n\n- [📖 About the Project](#about-project)\n  - [🛠 Built With](#built-with)\n    - [Tech Stack](#tech-stack)\n    - [Key Features](#key-features)\n  - [🚀 Live Demo](#live-demo)\n- [💻 Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Setup](#setup)\n  - [Install](#install)\n  - [Usage](#usage)\n  - [Run tests](#run-tests)\n  - [Deployment](#deployment)\n- [👥 Authors](#authors)\n- [🔭 Future Features](#future-features)\n- [🤝 Contributing](#contributing)\n- [⭐️ Show your support](#support)\n- [🙏 Acknowledgements](#acknowledgements)\n- [❓ FAQ (OPTIONAL)](#faq)\n- [📝 License](#license)\n\n\n# 📖 [UNITED STATES GDP] \u003ca name=\"about-project\"\u003e\u003c/a\u003e\n\n**[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.\n\nThe 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.\n\n\u003cdiv align=\"center\"\u003e\n\n  \u003cimg src=\"./preview.png\" alt=\"logo\" width=\"auto\"  height=\"auto\" /\u003e\n  \u003cbr/\u003e\n\n\u003c/div\u003e\n\n## 🛠 Built With \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n\n### Tech Stack \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n\n\u003e Describe the tech stack and include only the relevant sections that apply to your project.\n\n\u003cdetails\u003e\n  \u003csummary\u003eLibrary\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://reactjs.org/\"\u003eD3.js\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eServer\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://expressjs.com/\"\u003ejavascript\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\n\u003c!-- Features --\u003e\n\n### Key Features \u003ca name=\"key-features\"\u003e\u003c/a\u003e\n\n- Data Fetching: The project uses the fetch API to asynchronously retrieve the GDP data from the provided JSON file.\n\n- 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.\n\n- 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).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LIVE DEMO --\u003e\n\n## 🚀 Live Demo \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\n\n- [Live Demo Link](https://carreraprogrammer.github.io/Us-GDP/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n## 💻 Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\nTo get a local copy up and running, follow these steps.\n\n### Prerequisites\n\nIn order to run this project you need:\n\n\u003c!--\nExample command:\n\n```sh\n gem install rails\n```\n --\u003e\n\n### Setup\n\nClone this repository to your desired folder:\n\n\u003c!--\nExample commands:\n\n```sh\n  cd my-folder\n  git clone git@github.com:myaccount/my-project.git\n```\n---\u003e\n\n### Install\n\nInstall this project with:\n\n\u003c!--\nExample command:\n\n```sh\n  cd my-project\n  gem install\n```\n---\u003e\n\n### Usage\n\nTo run the project, execute the following command:\n\n\u003c!--\nExample command:\n\n```sh\n  rails server\n```\n---\u003e\n\n### Run tests\n\nTo run tests, run the following command:\n\n\u003c!--\nExample command:\n\n```sh\n  bin/rails test test/models/article_test.rb\n```\n---\u003e\n\n### Deployment\n\nYou can deploy this project using:\n\n\u003c!--\nExample:\n\n```sh\n\n```\n --\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- AUTHORS --\u003e\n\n## 👥 Authors \u003ca name=\"authors\"\u003e\u003c/a\u003e\n\n\u003e Mention all of the collaborators of this project.\n\n👤 **Daniel Carrera**\n\n- GitHub: [@carreraprogrammer](https://github.com/carreraprogrammer )\n- Twitter: [@carreraprog](https://twitter.com/carreraprog)\n- LinkedIn: [LinkedIn](https://www.linkedin.com/in/daniel-carrera-85a917244/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- FUTURE FEATURES --\u003e\n\n## 🔭 Future Features \u003ca name=\"future-features\"\u003e\u003c/a\u003e\n\n- Data Fetching: The project uses the fetch API to asynchronously retrieve the GDP data from the provided JSON file.\n\n- 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.\n\n- 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).\n\n- 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.\n\n- 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.\n\n- 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.\n\n- 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.\n\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## 🤝 Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\nContributions, issues, and feature requests are welcome!\n\nFeel free to check the [issues page](../../issues/).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- SUPPORT --\u003e\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\n\u003e Write a message to encourage readers to support your project\n\nIf you like this project...\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\n## 🙏 Acknowledgments \u003ca name=\"acknowledgements\"\u003e\u003c/a\u003e\n\nI would like to thank...\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003c!-- LICENSE --\u003e\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](./LICENSE) licensed.\n\n_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._\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarreraprogrammer%2Fus-gdp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarreraprogrammer%2Fus-gdp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarreraprogrammer%2Fus-gdp/lists"}