bmajeed/data-visualization

A dynamic and interactive web data dashboard to display key car powertrain metrics projection data

• Details from this project have been redacted due to confidential information regarding internal tools and data with respect to Aramco Research & Development Center

• below is technical details I wrote about the project and instructions for future maintainers of the project

Data Visualization Web Dashboard

Goal:

• Create a responsive and interactive web data dashboard using Typescript with ReactJS to display key powertrain metric projection data

Usage:

You will need Node.JS to run and build this project.

From the root directory, you can run the following commands in the terminal:

• pnpm install one-time installation of dependancies (listed in package.json)
• pnpm dev to start a local deployment (Ctrl + C to stop local dev server)
• pnpm build to create a build of the app for deployment

Development:

• ReactJS, Typescript, HTML, CSS

Graphing Tools:

• ChartJS & React-chartjs-2 (currently using)
• Other alternatives:
  • Recharts, Victory, Nivo, React Charts

Libraries:

• React Router: route pages in React
• Material UI, Mantine UI: libraries of React components
• TailwindCSS: CSS styling library
• danfoJS: Pandas-like library to process raw data and create Dataframes in JS
• EmailJS: build contact forms and send emails

Hosting:

• Vercel
• Google Cloud has BigQuery with ML built-in AI, ML, and Deep Learning tools