{"id":16505368,"url":"https://github.com/jubinjacob03/dvttviz_eqdataset-reactjs","last_synced_at":"2026-05-19T19:05:07.023Z","repository":{"id":177515050,"uuid":"660503050","full_name":"jubinjacob03/DvttViz_EQdataset-ReactJS","owner":"jubinjacob03","description":"Data Visualization Tools \u0026 Techniques - ReactJS project with Tableau Public APIv3 on Earthquake Dataset for analysis of seismic waves and activity","archived":false,"fork":false,"pushed_at":"2023-07-01T10:04:30.000Z","size":13243,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T23:09:43.368Z","etag":null,"topics":["api","data-visualization","javascript","kaggle-dataset","reactjs","tableau"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jubinjacob03.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-30T06:47:09.000Z","updated_at":"2024-07-12T20:58:52.000Z","dependencies_parsed_at":"2023-12-09T16:31:16.893Z","dependency_job_id":null,"html_url":"https://github.com/jubinjacob03/DvttViz_EQdataset-ReactJS","commit_stats":null,"previous_names":["jubinjacob03/dvttviz_eqdataset-reactjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jubinjacob03/DvttViz_EQdataset-ReactJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jubinjacob03%2FDvttViz_EQdataset-ReactJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jubinjacob03%2FDvttViz_EQdataset-ReactJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jubinjacob03%2FDvttViz_EQdataset-ReactJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jubinjacob03%2FDvttViz_EQdataset-ReactJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jubinjacob03","download_url":"https://codeload.github.com/jubinjacob03/DvttViz_EQdataset-ReactJS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jubinjacob03%2FDvttViz_EQdataset-ReactJS/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265096705,"owners_count":23710778,"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":["api","data-visualization","javascript","kaggle-dataset","reactjs","tableau"],"created_at":"2024-10-11T15:10:52.575Z","updated_at":"2026-05-19T19:05:06.985Z","avatar_url":"https://github.com/jubinjacob03.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DvttViz_EQdataset-ReactJS\nA project based on Data Visualization Tools \u0026amp; Techniques - Tableau. This is a simple React JS page using [Tableau Public APIv3](https://help.tableau.com/current/api/embedding_api/en-us/index.html) which embed sheets into a webpage. We have taken Earthquake Dataset for analysis of seismic waves and activity, displaying patterns and trends over a time period. This Analysis helps reduce destruction of future Earthquakes.\n\n# Pre-Requisites\n- [Node JS](https://nodejs.org/en/about) must be pre-installed.\n- [NPM](https://docs.npmjs.com/about-npm) should be pre-installed \u0026 configured.\n- Any IDE should be pre-installed, preferably [VS Code](https://code.visualstudio.com/docs).\n- Internet connection is required for loading the Tableau webpage container using [Tableau API](https://help.tableau.com/current/api/embedding_api/en-us/index.html).\n\n# Installation\n- The Dataset used for analysis is attached along with all the files in the repository.\n- Use \u003ccode\u003egit clone\u003c/code\u003e command\n- Clone the repository\n- You cannot directly run this project after cloning the repo as node_modules is not attached because of \u003ccode\u003e.gitignore\u003c/code\u003e ( it contains the line that excludes the node_modules from being pushed to repository.)\n- If users want to run this project locally, they will have to run \u003ccode\u003enpm i\u003c/code\u003e before \u003ccode\u003enpm start\u003c/code\u003e.\n- Or the best way to avoid errors is to create a new react project and then replace the files with my files.\n- For creating a new react app use the command \u003ccode\u003enpx create-react-app /*project_name*/\u003c/code\u003e .\n- After creating the new react project copy all files from the repository to that directory.\n\n# Running the project\n- The Tableau public link for this [project](https://public.tableau.com/views/Ca-4FINAL/Dashboard1). \n- After successfully copying all the files, open any IDE\n- Open a seperate terminal and use the \u003ccode\u003ecd\u003c/code\u003e command to navigate to the project directory or If you are using VS Code use the built-in terminal.\n- [React-Router-Dom](https://reactrouter.com/en/main) package is used in this project, to install that package use command \u003ccode\u003enpm install react-router-dom\u003c/code\u003e.\n- Wait for react-router-dom package to finish installing.\n- Type command \u003ccode\u003enpm start\u003c/code\u003e\n- After executing the scripts it should automatically open the localhost url in default browser.\n- If automatic opening is not executed, open any browser and go to url - http://localhost:3000/\n- The project will be successfully loaded on your webpage.\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n# Outputs\n\n\n![Screenshot 2023-06-30 141733](https://github.com/jubinjacob03/DvttViz_EQdataset-ReactJS/assets/118928433/023eca18-3f80-42fb-952e-1b9ee4d602f6)\n![Screenshot 2023-06-30 141927](https://github.com/jubinjacob03/DvttViz_EQdataset-ReactJS/assets/118928433/2b242ae3-5849-44ae-b380-314dfb0d69fe)\n![Screenshot 2023-06-30 141938](https://github.com/jubinjacob03/DvttViz_EQdataset-ReactJS/assets/118928433/7cd2515d-4892-42cd-b2da-d908748362a0)\n![Screenshot 2023-06-30 151727](https://github.com/jubinjacob03/DvttViz_EQdataset-ReactJS/assets/118928433/39d87902-095c-4fb6-a63e-bd1d6833ea78)\n![Screenshot 2023-06-30 142110](https://github.com/jubinjacob03/DvttViz_EQdataset-ReactJS/assets/118928433/a9d661a3-9c93-49a0-8811-275f4eef310f)\n\n\n# Help and Reference\n\n\u003cmark\u003e\u003ch3\u003eModifying the project -\u003c/h3\u003e\u003c/mark\u003e\n\u003cp\u003e\u003col\u003e\n\u003cli\u003e App.js : This is the main home page component.\u003c/li\u003e\n\u003cli\u003e index.js : File is responsible for routing.\u003c/li\u003e\nEvery component has both inline and seperate css files, so edit those to change the appearance of the webpage.\n\u003cli\u003e DvttDashboard.js \u0026 sheet(no:).js : These are the javascript files that act as the container for each sheet.Change the url and add your custom tableau public. \u003c/li\u003e \n\u003cli\u003e Remaining files : These are basic structural components of a react project, keep them as it is unless you have a proper idea of what you are doing.\u003c/li\u003e\n\u003c/ol\u003e\u003c/p\u003e\n\u003cbr\u003e\n\n- For reading the documentation on how Tableau Public embed APIv3 works [click here](https://help.tableau.com/current/api/embedding_api/en-us/index.html).\n- Page routing and navigation using [Route, Routes, useNavigate and react-router-dom](https://bobbyhadz.com/blog/react-onclick-redirect).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjubinjacob03%2Fdvttviz_eqdataset-reactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjubinjacob03%2Fdvttviz_eqdataset-reactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjubinjacob03%2Fdvttviz_eqdataset-reactjs/lists"}