{"id":15760508,"url":"https://github.com/mohit138928/react-d3-visualization-scatterplot-graph","last_synced_at":"2025-11-06T08:03:28.448Z","repository":{"id":247589007,"uuid":"824813471","full_name":"Mohit138928/React-D3-Visualization-ScatterPlot-Graph","owner":"Mohit138928","description":"In this project, I created a Scatter Plot Graph using D3 with a dataset provided by FreeCodeCamp. ","archived":false,"fork":false,"pushed_at":"2024-07-09T12:16:41.000Z","size":207,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-05T06:32:02.198Z","etag":null,"topics":["d3","d3-js","d3-visualization","d3js","fcc","fcc-exercise","freecodecamp","freecodecamp-data-visualization","freecodecamp-project","npm","react","reactjs","scatter-plot","scatter-plots","scatterplot"],"latest_commit_sha":null,"homepage":"https://codepen.io/mohitmaurya809/pen/abgoXBx?editors=0100","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/Mohit138928.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-07-06T02:55:24.000Z","updated_at":"2024-12-08T12:15:12.000Z","dependencies_parsed_at":"2024-07-09T15:53:02.055Z","dependency_job_id":null,"html_url":"https://github.com/Mohit138928/React-D3-Visualization-ScatterPlot-Graph","commit_stats":null,"previous_names":["mohit138928/react-d3-visualization-scatterplot-graph"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mohit138928/React-D3-Visualization-ScatterPlot-Graph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohit138928%2FReact-D3-Visualization-ScatterPlot-Graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohit138928%2FReact-D3-Visualization-ScatterPlot-Graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohit138928%2FReact-D3-Visualization-ScatterPlot-Graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohit138928%2FReact-D3-Visualization-ScatterPlot-Graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mohit138928","download_url":"https://codeload.github.com/Mohit138928/React-D3-Visualization-ScatterPlot-Graph/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohit138928%2FReact-D3-Visualization-ScatterPlot-Graph/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265224172,"owners_count":23730348,"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":["d3","d3-js","d3-visualization","d3js","fcc","fcc-exercise","freecodecamp","freecodecamp-data-visualization","freecodecamp-project","npm","react","reactjs","scatter-plot","scatter-plots","scatterplot"],"created_at":"2024-10-04T10:58:28.483Z","updated_at":"2025-11-06T08:03:28.407Z","avatar_url":"https://github.com/Mohit138928.png","language":"JavaScript","readme":"# React D3 Scatter Plot Graph Visualization\n\nPeople often wonder how to visualize data in React similar to how it's done in Python to create a full dashboard. For this purpose, JavaScript provides a library called D3 or D3.js, which stands for Data Driven Documents. It is used for creating dynamic and interactive data visualizations in the browser. D3 is built to work with common web standards – namely HTML, CSS, and Scalable Vector Graphics (SVG). D3 supports many different kinds of input data formats. Then, using its powerful built-in methods, you can transform those data into different charts, graphs, and maps.\n\nIn this project, I created a Scatter Plot Graph using D3 with a dataset provided by FreeCodeCamp. \n\nYou can learn more about this topic by visiting the FreeCodeCamp website: [FreeCodeCamp Data Visualization](https://www.freecodecamp.org/learn/data-visualization/)\n\n## Installation\n\nFollow these steps to install and run the project:\n\n1. **Clone the repository:**\n   ```sh\n   git clone https://github.com/Mohit138928/React-D3-Visualization-ScatterPlot-Graph.git\n   ```\n2. **Navigate to the project directory:**\n   ```sh\n   cd react-d3-scatter-plot-graph-visualization\n   ```\n3. **Install the dependencies:**\n   ```sh\n   npm install\n   ```\n4. **Install D3:**\n   ```sh\n   npm install d3\n   ```\n5. **Run the project:**\n   ```sh\n   npm run start\n   ```\n\n## Usage\n\n1. **View Data Visualization:**\n   - Open the app to see the scatter plot graph visualizing the dataset.\n\n## Preview of the Project\n\n![Preview-1](/src/Preview/Preview-1.png)\n\n## Contributing\n\nFeel free to contribute to this project. Any improvements or suggestions are welcome!\n\n## License\n\nThis project is open-source and available under the [MIT License](LICENSE).\n\n## Contact Information\n\nIf you have any questions or need further information, feel free to contact me at [Mohit Maurya](mauryamohit138@gmail.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohit138928%2Freact-d3-visualization-scatterplot-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohit138928%2Freact-d3-visualization-scatterplot-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohit138928%2Freact-d3-visualization-scatterplot-graph/lists"}