https://github.com/carreraprogrammer/doping-data
This project aims to create an app that replicates the functionality of a scatterplot graph. The app is built using HTML, JavaScript, CSS, and the D3 SVG-based visualization library.
https://github.com/carreraprogrammer/doping-data
Last synced: 9 months ago
JSON representation
This project aims to create an app that replicates the functionality of a scatterplot graph. The app is built using HTML, JavaScript, CSS, and the D3 SVG-based visualization library.
- Host: GitHub
- URL: https://github.com/carreraprogrammer/doping-data
- Owner: carreraprogrammer
- Created: 2023-06-26T23:22:35.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-27T14:20:42.000Z (almost 3 years ago)
- Last Synced: 2025-03-16T08:42:24.284Z (about 1 year ago)
- Language: JavaScript
- Size: 644 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)
**[DOPING CYCLING DATA]** aims to create an app that replicates the functionality of a scatterplot graph. The app is built using HTML, JavaScript, CSS, and the D3 SVG-based visualization library. It fulfills a set of user stories that include displaying a title, x-axis, and y-axis with corresponding IDs, rendering dots to represent data points, associating data values with the dots using data-xvalue and data-yvalue properties, aligning the dots with the corresponding points on the axes, displaying tick labels on the y-axis in the format of %M:%S time, displaying tick labels on the x-axis representing years, ensuring the range of x-axis and y-axis labels matches the actual data range, including a legend with descriptive text, showing tooltips with additional information when hovering over areas, and ensuring the tooltip includes a data-year property corresponding to the data-xvalue of the active area. By fulfilling these user stories, the app will pass the provided tests.
> Describe the tech stack and include only the relevant sections that apply to your project.
Client
Client
> Describe between 1-3 key features of the application.
- **[Interactive Data Visualization:]** The app allows users to explore and analyze data through an interactive scatterplot graph. Users can hover over data points to view tooltips with additional information, providing a more detailed understanding of the plotted data.
- **[Axis and Label Customization:]** The app generates and displays axes (x-axis and y-axis) with corresponding tick labels. The x-axis represents years, while the y-axis displays time values in the format of %M:%S. This feature provides a clear visual representation of the data and helps users interpret the plotted values accurately.
- **[Data Accuracy and Validation:]]** The app ensures that the data values associated with each dot (data-xvalue and data-yvalue) are within the range of the actual data and in the correct format. This validation ensures the accuracy of the visualization and prevents any potential data discrepancies. Additionally, the x-axis and y-axis labels are dynamically generated based on the actual data range, further enhancing the reliability of the displayed information.
> Add a link to your deployed project.
- [Live Demo Link](https://carreraprogrammer.github.io/Doping-data/)
> Describe how a new developer could make use of your project.
To get a local copy up and running, follow these steps.
### Setup
Clone this repository to your desired folder:
👤 **Daniel Carrera**
- GitHub: [@carreraprogrammer](https://github.com/carreraprogrammer)
- Twitter: [@carreraprogrammer](https://twitter.com/carreraprog)
- LinkedIn: [Daniel Carrera] (https://www.linkedin.com/in/daniel-carrera-paz-85a917244/)
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...
> Give credit to everyone who inspired your codebase.
I would like to thank my academy, my family and Freecodecamp to help me to be my best version
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._