Data Visualizer

---

The following project is a browser app that lets the user visualize data by plotting it against charts

General Information

---

• This demo uses WineData.json as a reference to plot it on Echarts - An open source javascript visualization library

• The app renders two charts. One plots a Line graph for Flavanoids vs Ash data and the 2nd one plots Bar graph against Alcohol vs minimum Magnesium. To calculate minimum Magnesium from the raw data Math.floor() function is used.

• The project serves as a recruitment assignment for Manufac Analytics Private Limited. This project does not accept contributions.

Technologies Used

---

• HTML

• CSS

• React

• Typescript

• Yarn

• Apache Echarts

• ESLint

Basic Technical Summary

---

• This is a single page application without complex routing and no react routers are there

• The App lazily loads the chunk of heavy graphical calculations so a lazy loader is implemented at the root.

• The user interface has a button that lets him/her to toggle through 1st and 2nd chart. This is implemented because rendering 2 charts at the same time was causing responsiveness issues.

• Basic CSS is used for the app. No tailwind CSS is used. This is mention worthy as the tailwind class naming reference is followed. There's no tailwind css implemented on the app only the class naming signature might look so

• The app supports typescript. So lot of stuff like interfaces and static data are present in the 'src' directory. These files have comments describing their purpose and details. Any file/directory that might look different from the template should have a description in comments.

• Any unused code or file have been removed permanently. However it's mention worthy that the public directory haven't been touched

• ESLint is used for code formatting. It is advised to install ESLint and Prettier in VSCode before installing the packages

Screenshots

---

Setup

---

Basic requirements for the setup:

1. yarn installed on the device
2. node js installed on the device
3. ESLint and Prettier is a must as the project uses linting

Steps

• Clone the repository into a device that meets the basic requirements.

• Before running yarn start, the user must run yarn command first. This will install the packages from package.json

• Beware of running npm. Npm will also work though package-lock.json and yarn-lock.json might conflict.

• Finally run yarn start to start the app on localhost:3000

Deployed Link

The app is deployed at: https://visualizerdata.netlify.app