https://github.com/jubinjacob03/dvttviz_eqdataset-reactjs
Data Visualization Tools & Techniques - ReactJS project with Tableau Public APIv3 on Earthquake Dataset for analysis of seismic waves and activity
https://github.com/jubinjacob03/dvttviz_eqdataset-reactjs
api data-visualization javascript kaggle-dataset reactjs tableau
Last synced: 15 days ago
JSON representation
Data Visualization Tools & Techniques - ReactJS project with Tableau Public APIv3 on Earthquake Dataset for analysis of seismic waves and activity
- Host: GitHub
- URL: https://github.com/jubinjacob03/dvttviz_eqdataset-reactjs
- Owner: jubinjacob03
- License: mit
- Created: 2023-06-30T06:47:09.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-01T10:04:30.000Z (almost 3 years ago)
- Last Synced: 2025-03-01T23:09:43.368Z (over 1 year ago)
- Topics: api, data-visualization, javascript, kaggle-dataset, reactjs, tableau
- Language: JavaScript
- Homepage:
- Size: 12.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DvttViz_EQdataset-ReactJS
A project based on Data Visualization Tools & 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.
# Pre-Requisites
- [Node JS](https://nodejs.org/en/about) must be pre-installed.
- [NPM](https://docs.npmjs.com/about-npm) should be pre-installed & configured.
- Any IDE should be pre-installed, preferably [VS Code](https://code.visualstudio.com/docs).
- 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).
# Installation
- The Dataset used for analysis is attached along with all the files in the repository.
- Use git clone command
- Clone the repository
- You cannot directly run this project after cloning the repo as node_modules is not attached because of .gitignore ( it contains the line that excludes the node_modules from being pushed to repository.)
- If users want to run this project locally, they will have to run npm i before npm start.
- Or the best way to avoid errors is to create a new react project and then replace the files with my files.
- For creating a new react app use the command npx create-react-app /*project_name*/ .
- After creating the new react project copy all files from the repository to that directory.
# Running the project
- The Tableau public link for this [project](https://public.tableau.com/views/Ca-4FINAL/Dashboard1).
- After successfully copying all the files, open any IDE
- Open a seperate terminal and use the cd command to navigate to the project directory or If you are using VS Code use the built-in terminal.
- [React-Router-Dom](https://reactrouter.com/en/main) package is used in this project, to install that package use command npm install react-router-dom.
- Wait for react-router-dom package to finish installing.
- Type command npm start
- After executing the scripts it should automatically open the localhost url in default browser.
- If automatic opening is not executed, open any browser and go to url - http://localhost:3000/
- The project will be successfully loaded on your webpage.
# Outputs
# Help and Reference
Modifying the project -
- App.js : This is the main home page component.
- index.js : File is responsible for routing.
Every component has both inline and seperate css files, so edit those to change the appearance of the webpage.
- DvttDashboard.js & 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.
- 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.
- 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).
- Page routing and navigation using [Route, Routes, useNavigate and react-router-dom](https://bobbyhadz.com/blog/react-onclick-redirect).