How i create a COVID-19 Data Visualization with Nivo and React
Tags: javascript, react
Published: 2020-04-04 06:27:51

Hi everyone,

I recently made a Data Visualization about  Sri Lanka COVID-19 statistics.
by the time I am writing, there was no public API  to get past statistics of the COVID-19 pandemic but there was an API to get the most recent statistics. So i created one 😉.

![website screenshot](https://dev-to-uploads.s3.amazonaws.com/i/drzzvks8hg34vu6g3ss9.PNG)


## Automate updates to database

I created a database filled out past data that was missing and created a script that updates my database with the most recent data, by that data is automatically updated without any manual tasks. for database i used MongoDB since i am very comfortable with MongoDB and also MongoDB atlas give a great free plan.

i wrote a simple JavaScript script to make a request for every 30 seconds and then if there are any latest updates update my database with those changes.pretty simple right.even though it can run locally to push changes to database , i used a aws ec2 instance to run it because it is more convenient that running it in my local PC forever.i know ec2 instance is a overkill for this purpose but this was the only option i had at the time. and if you know a better option please let me know in the comments section  ,  like pretty please 🙄 .

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n4d1xbl2hfojislckn9k.gif)

## Creating frontend

Frontend is build with [React](https://reactjs.org/) and styled with [bootstrap](https://getbootstrap.com/) , nothing fancy their. I tried out a few different data visualization libraries, but for me [nivo](https://nivo.rocks/line/) worked out the best. it was very clear to understand and packed with tons of features.
[nivo](https://nivo.rocks/line/) also supports responsive layouts, it looks fluid in mobile displays.it is very important to consider building responsive web apps since nowadays most of the users visit with their mobile devices. so a reasonable amount of your website's traffic will come from mobiles.

## Creating API

for my API, I chose to go with [AWS lambda](https://aws.amazon.com/lambda/) because it is easy to spin up, and this implementation only needed one API endpoint. so I configured lambda function to fetch data and send them to frontend. 

## Deployment

After wiring up everything, I used [zeit](https://zeit.co/home) to deploy the frontend, because it is really easy to deploy and it supports git integrations.used MongoDB atlas for the production database, and aws lambda for API and aws ec2 to run automate script.

## Telegram bot

As a part of this project i made a telegram channel with a telegram bot , to sent notifications about the pandemic.this was embedded to the automated script to sent a post request to telegram API in new update. more details on how to send telegram messages with bots is in this tutorial.

{% link https://dev.to/rizkyrajitha/get-notifications-with-telegram-bot-537l %}

![telegram screenshot](https://dev-to-uploads.s3.amazonaws.com/i/5e9r7vx19aqe7x785k0b.jpeg)

{% github RizkyRajitha/covidgraph %}

## Thanks for reading till the end  🙌
<br>
## I'd love to hear your feedback 💬 
<br>
## Have a nice day 😎