Data Visualizer

Data Visualizer is a full stack web application that consists of a MySQL database, a REST API server and a React Web App client. Developed during the Advanced Topics of Database Technology and Applications course @cse.uoi.gr.

Summary

The final goal of the project was to implement a data visualization application which utilizes data integrated into a database. The application should be able to be used in order to visually draw conclusions regarding the depicted data. The data which populates the database was extracted from The World Bank and it contains various measurements per year for different indicators for the countries of the European Union. A large portion of the project revolved around designing the database schema and setting up and configuring the database. On top of that strong emphasis was given on the ETL (Extract-Transform-Load) procedure so that the extracted data can integrate in proper structure into the database. A detailed report can be found in the respective pdf under the doc directory. In general, the project can be abstracted into 3 sub-projects:

• The database
• REST API server
• React Web App client

Technologies

This section contains a brief overview of the technologies used:

• MySQL & MySQL Workbench as a DBMS and database visual tool respectively.
• Python as a programming language to develop the scripts that transform extracted data to the desired format for loading into the database.
• GitHub for version control. Project repo here.
• Trello for project management and organization. Project board here. The project board contains cards with all the tasks regarding the implementation of the project as well as various useful information in the form of links that was studied during development.
• Node.js with Typescript as a programming language for both the server and the client.
• React as a general library to develop the client UI. Some notable react libraries that were used are axios to implement the API calls and recharts to draw the visualization charts.
• VSCode as an IDE.

Features

Users can:

• Search among numerous indicators for visualization.
• Visualize data as bar charts.
• Visualize data as line charts.
• Visualize data as scatter plots.
• Filter the measurements years' for visualization.
• Aggregate measurements into 5 or 10 year periods.

Usage

• run server for development:

  • cd data-visualizer/server
  • nodemon src/server.ts

• run client for development:
  • cd data-visualizer/client
  • npm start

Demo Images

• Home Page - User is greeted with a welcome message
  

• Select Page - The desired chart type and data for visualization are selected

  
  

• Visualization Page - Data gets visualized