{"id":18537191,"url":"https://github.com/shuddha2021/interactive-data-visualization-app","last_synced_at":"2025-11-01T03:30:23.005Z","repository":{"id":237302437,"uuid":"794244186","full_name":"shuddha2021/Interactive-Data-Visualization-App","owner":"shuddha2021","description":"An interactive web application for visualizing data using Chart.js. Users can explore and analyze data through dynamic charts and customize their view","archived":false,"fork":false,"pushed_at":"2024-04-30T18:35:41.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-26T03:42:00.629Z","etag":null,"topics":["chart","data-visualization","event-handling","interactive-ui","javascript","real-time-updates","responsive-design","web-development"],"latest_commit_sha":null,"homepage":"https://interactive-data-visualization-app.vercel.app","language":"HTML","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/shuddha2021.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":"2024-04-30T18:26:47.000Z","updated_at":"2024-04-30T18:35:44.000Z","dependencies_parsed_at":"2024-04-30T19:44:17.855Z","dependency_job_id":"de7f617a-b203-465a-85a2-4b57d2f31dbf","html_url":"https://github.com/shuddha2021/Interactive-Data-Visualization-App","commit_stats":null,"previous_names":["shuddha2021/interactive-data-visualization-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuddha2021%2FInteractive-Data-Visualization-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuddha2021%2FInteractive-Data-Visualization-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuddha2021%2FInteractive-Data-Visualization-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuddha2021%2FInteractive-Data-Visualization-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shuddha2021","download_url":"https://codeload.github.com/shuddha2021/Interactive-Data-Visualization-App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239255291,"owners_count":19608253,"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":["chart","data-visualization","event-handling","interactive-ui","javascript","real-time-updates","responsive-design","web-development"],"created_at":"2024-11-06T19:37:21.368Z","updated_at":"2025-11-01T03:30:22.965Z","avatar_url":"https://github.com/shuddha2021.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive Data Visualization App\n\nThe Interactive Data Visualization App is a web application that allows users to explore and analyze data through dynamic charts. Built using Chart.js, this app provides an intuitive interface for visualizing data trends, comparing values, and making informed decisions.\n\n## Features\n\n- **Drag-and-Drop Interface**: Easily rearrange and customize charts by dragging and dropping data points.\n- **Responsive Design**: The app adapts to different screen sizes, ensuring a seamless experience on both desktop and mobile devices.\n- **Real-Time Updates**: Charts update dynamically as data changes, providing real-time insights.\n- **Customization Options**: Users can customize chart types, colors, and labels to suit their preferences.\n\n\u003cimg width=\"1379\" alt=\"Screenshot 2024-04-30 at 1 28 35 PM\" src=\"https://github.com/shuddha2021/Interactive-Data-Visualization-App/assets/81951239/49dadfdc-32c3-43b0-bf16-17d17ecc3787\"\u003e\n\n\u003cimg width=\"1149\" alt=\"Screenshot 2024-04-30 at 1 31 35 PM\" src=\"https://github.com/shuddha2021/Interactive-Data-Visualization-App/assets/81951239/f2e993ea-977d-43e9-b387-cf730beb9c51\"\u003e\n\n## Core Logic\n\nThe core logic of the application revolves around the Chart.js library. Key components include:\n\n- **Data Initialization**: Sample data is provided to simulate an API response. You can replace this with actual data from APIs or databases.\n- **Chart Configuration**: The `myChart` instance is created with options for chart type (bar chart in this case), responsive layout, and tooltips.\n- **Event Handling**: Click events on the chart trigger the `displayInfo` function, which updates the information box with details about the selected data point.\n\n## Getting Started\n\n1. Clone the repository: `git clone https://github.com/your-username/Interactive-Data-Visualization-App.git`\n2. Navigate to the project directory: `cd Interactive-Data-Visualization-App`\n3. Install dependencies: `npm install`\n4. Start the development server: `npm start`\n5. Open your browser and visit http://localhost:3000 to explore the app.\n\n## Contributing\n\nContributions are welcome! If you encounter issues or have ideas for improvements, feel free to open an issue or submit a pull request.\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file for details.\n\n## Acknowledgments\n\n- Chart.js Documentation\n- Material-UI for UI components\n- The open-source community for fostering collaboration and innovation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshuddha2021%2Finteractive-data-visualization-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshuddha2021%2Finteractive-data-visualization-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshuddha2021%2Finteractive-data-visualization-app/lists"}