Hello folks! In this article, we'll learn about Arrow Functions in JavaScript – what are they, how to use them, and their gotchas. If you're a beginner, I hope this helps you understand the concept well. And if you're already familiar with the concept, you might want to go through its gotchas and when not to use them.

# What are Arrow Functions?

Arrow functions were introduced with ES6 as a new way to write functions in JavaScript. The newer syntax made the code less verbose and more readable, as we don't need to write `function` and `return` keywords.

They are different from traditional functions in 2 aspects – syntax and scoping. The difference in syntax is clear and easy to pick, but the difference in scoping is rather subtle and it's important to understand the difference as it can break or alter the behaviour of the code.

# Syntax

Arrow functions can be written in different ways depending upon the number of parameters it accepts and the operation it performs.

```javascript
// 1. One parameter, and a single return statement
const square = x => x*x;

// 2. Multiple parameter, and a single return expression
const sum = (x, y) => x + y;

// 3. Multiple statements in function expression
const sum = (x, y) =>{
    console.log(`Adding ${x} and ${y}`);
    return x + y;
}

// 4. Returning an object
const sumAndDifference = (x, y) => ({ sum: x + y, difference: x - y });
```

### Quick Cheatsheet

1. Optional parentheses in case of a single parameter
    
2. Must use parentheses in case of multiple parameters
    
3. `return` keyword is not required for a single return expression in the function body
    
4. `return` keyword required in case of multiple statements in the function
    
5. To return an object notation, wrap it with parentheses
    
6. Rest operator, default parameters, and destructuring of parameters work normally
    

# When to use Arrow Functions?

### For passing anonymous callback functions to array methods

The array methods like `.map()`, `.filter()`, `.reduce()`, etc. can look really concise and clean when arrow functions are used to pass the callback functions.

```javascript
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((a, b) => a + b, 0);
```

### Promise Chaining

The promise chaining can look very confusing with repetitive `function` and `return` keywords. By using arrow functions, we can write promise chains with minimal code and a more readable manner.

```javascript
fetch(URL)
.then(res => res.json())
.then(json => json.data)
.then(data => data.map(dataItem => console.log(dataItem)))
```

### Callback Functions

In JavaScript, we write a lot of callback functions, and using arrow functions to do that can make it really clean

```javascript
setTimeout(() => {
    console.log("I'll get logged first");
    setTimeout(() => {
        console.log("I'll get logged later");
    })
});
```

# Gotchas

## `this` keyword is arrow function is inherited from the scope in which it is defined

### This restricts the use of arrow functions as object methods.

An object method defined using traditional function creates its own scope and `this` refers to the object which has the method stored as its property.

Since arrow functions use lexical scoping for `this`, if an object method is defined using arrow functions, `this` would not refer to the object which has this method stored as a property, instead, it would refer to its parent scope.

Example:

```javascript
const obj = {
    name: "Hetav Desai",
    printWithTraditionalFunction: function () {
        console.log(this.name);
    }
    printWithArrowFunction: () => console.log(this.name)
}

obj.printWithTraditionalFunction();
// Hetav Desai

obj.printWithArrowFunction();
// undefined
```

### Callback functions and `this`

You should also be careful while using arrow functions for defining callbacks that require `this`. Example:

```javascript
// Callback using arrow function
function counter1() {
  this.count = 0;
  setInterval(() => {
    this.count++
    console.log(this.count);
  }, 1000)
}
counter1();

// Callback using traditional function
function counter2() {
  this.count = 0;
  setInterval(function() {
    this.count++
    console.log(this.count);
  }, 1000)
}
counter2();
```

In the above example, `this` keyword in the first function refers to the function `counter1` and hence variable `count` can be accessed inside callback function using `this.count`, and the function increments a number every second and prints it.

While in the case of function `counter2`, `this` keyword inside callback function refers to its own scope and not that of `counter2`. Hence, it cannot access `count` variable and prints `NaN` every second,

## Unlike traditional functions, arrow functions are not hoisted

Because of this, you cannot call them before they are declared.

```javascript
// Using Normal Function
printWithTraditionalFunction("Hetav") // prints Hetav
function printWithTraditionalFunction(name) {
    console.log(name)
}

// Using Arrow Function
printWithTraditionalFunction("Hetav") // throws ReferenceError
const printWithArrowFunction = name => console.log(name);
```

### Binding `arguments` object not available for arrow functions

`arguments` is an Array-like object accessible inside functions that contain the values of the arguments passed to that function. But it is not available for arrow functions.

```javascript
function something() {
    console.log(arguments.length); // prints the number of arguments passed
}
something(1, 2, 3) // prints 3

const something = () => {
    console.log(arguments.length); // prints the number of arguments passed
}
something(1, 2, 3) // throws Reference Error: arguments not found
```

Now that we cannot access `arguments` in arrow functions, does it mean that we are forced to use traditional functions? Nope, not at all.

**Rest parameters of ES6 to the rescue**

```javascript
const something = (..args) => {
    console.log(args.length); // prints the number of arguments passed
}
something(1, 2, 3) // prints 3
```

# Conclusion

In this article, we saw that JavaScript arrow functions are really awesome and have minimal and readable syntax which makes it very easy for developers to write clean code. However, there are certain scenarios where using traditional functions is recommended. Except that, I'd strongly suggest using arrow functions everywhere.

Thank you for reading the blog. Do drop your feedback in the comments below and if you liked it, share it with your developer friends who might find it useful too. If you want to have any discussion around this topic, feel free to reach out to me on [Twitter](https://twitter.com/desaihetav)

JavaScript Arrow Functions

Hello folks, in this article I'll be showing you how you can use GraphQL with Axios and Redux, along with error handling. This is not a beginner tutorial. Hence a basic understanding of how GraphQL, Axios, and Redux work will be helpful. And if you are familiar with these technologies, let me tell you that this combination isn't as difficult as you might be wondering.

## A not-so-little context as to why such a different combination

Recently I started working on a project with a primary motive to understand and practice redux-toolkit well. I've been using REST APIs for a while, and now I wanted to try my hands on GraphQL too. So I kicked off this project by setting up CRA with redux-toolkit for the frontend and Hasura for the backend.

Now that these two things were in place, I started exploring different GraphQL client libraries that I could use and from most resources, I found the following options – `apollo client`, `react-query` and `urql`. I soon realized that these libraries won't work for me for the following reasons:

1. These libraries provide hooks like `useQuery` and `useMutation` for accessing GraphQL APIs
    
2. I was using `createAsyncThunk` from `redux-toolkit` for state management
    
3. The hooks provided by libraries won't work with `createAsyncThunk` as it is not a React component
    

After further digging, I found a client library called `graphql-request` which would let me access GraphQL APIs without using hooks. But the issue with this one was that I could not set default global headers and I would need to create multiple instances of `GraphQLClient`, which seemed rather wasteful.

All of this got me wondering, can't I just use `axios` for GraphQL? And the answer is YES.

## Using Axios for accessing GraphQL API

Axios is an HTTP client library, and hence it can be used to access GraphQL APIs as they're served over HTTP. We'll see how we can do that with a small example.

Let's suppose that we have a huge database of Users and we want to fetch details of a single user based on **userId**. The GraphQL query for this operation will be:

```graphql
query ($userId: uuid!) {
  users(where: {id: {_eq: $userId}}) {
    name
    email
  }
}
```

The above query will take `userId` as a **required** variable of **type** `uuid` and return the name and email of the user whose `userId` matches the passed `userId`.

Let's assume the API endpoint to be `https://api.somelink.com/graphql`. We can execute our query using axios as mentioned below.

```javascript
const response = await axios.post("https://api.somelink.com/graphql", {
  query: `
    query ($userId: uuid!) {
      users(where: {id: {_eq: $userId}}) {
        name
        email
      }
    }
  `,
  variables: {
    userId: "user-12345",
  },
});
```

**One thing to pay attention to is that no matter if we're doing a query or a mutation, we'll always make a POST call as we need to pass query and variables as request body.**

Yes, that's it.

## Let's combine this with Redux

Let's consider a scenario where we have a Profile component to display the name, and email of a user. When this component loads, we want to fetch the details of a user from the API and render it on the screen and maintain the state using redux-toolkit. To do this, we'll follow the below steps:

### 1\. Write state management logic in reducer

```javascript
// userSlice.js

import axios from "axios";
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const loadUser = createAsyncThunk(
  "post/loadUser",
  async ({ userId }) => {
    const response = await axios.post("https://api.somelink.com/graphql", {
      query: `
        query ($userId: uuid!) {
          users(where: {id: {_eq: $userId}}) {
            name
            email
          }
        }
      `,
      variables: {
        userId: "user-12345",
      },
    });
    return response;
  }
);

export const userSlice = createSlice({
  name: "user",
  initialState: {
    status: "idle",
    user: {},
    errorMessage: "",
  },
  reducers: {},
  extraReducers: {
    [loadUser.pending]: (state, action) => {
      state.status = "loading";
    },
    [loadUser.fulfilled]: (state, { payload }) => {
      state.user = payload.data.data.user;
      state.status = "fulfilled";
    },
    [loadUser.rejected]: (state, action) => {
      state.status = "error";
      state.errorMessage = "Could not fetch data. Please refresh to try again."
    },
  },
});
```

The `loadUser` function will be called when dispatched from React component. It'll make a network call to fetch required user from the database.

Based on the state of Promise of network call, the corresponding functions in the `extraReducers` will be executed.

### 2\. Create a Profile Component

```javascript
// ProfileComponent.jsx

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { loadUsers } from './postSlice.js';

export default function ProfileComponent() {
  const dispatch = useDispatch();
  const { user, status, errorMessage } = useSelector((state) => state.user);

  useEffect(() => {
    status === "idle" && dispatch(loadUser());
  }, [])

  return status === "loading" && <p>Loading...</p>

  return status === "error" && <p>{errorMessage}</p>

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.email}</p>
      <p>{user.contact_number}</p>
    </div>
  )
}
```

The `ProfileComponent` consumes the redux state via `useSelector` and fires a dispatch action `loadUser()` when it is loaded.

It'll show `Loading...` while the user data is being fetched. Once the data is received, it'll render it on the screen.

## Error Handling

In case of error, we would expect that, the `[loadUser.rejected]` part of `extraReducer` will be executed and the error will be handled.

But the catch here is that GraphQL doesn't respond with error status codes like REST and hence all the responses end up with status 200.

Here's is the format in which GraphQL API would send response in case of success and error.

```javascript
/*
GraphQL API Response (Success)
It responds with data object and
it is enclosed in data field of axios response
*/
{
  config: {...},
  data: {
    data: {
      users: [{
        name: "John Doe",
        email: "johndoe@mail.com"
      }],
    },
  },
  headers: {...},
  request: {...},
  status: 200,
  statusText: "OK"
}

/*
GraphQL API Response (Error)
It responds with array of error objects and
it is enclosed in data field of axios response
*/
{
  config: {...},
  data: {
    errors: [{
      "extensions": {
        "path": "$.selectionSet.users.selectionSet.contact",
        "code": "validation-failed"
      },
      "message": "field \"contact\" not found in type: 'users'"
    }]
  },
  headers: {...},
  request: {...},
  status: 200,
  statusText: "OK"
}
```

Now because of this format of response, even in case of error, `[loadUser.rejected]` in `extraReducers` doesn't get executed, instead `[loadUser.fulfilled]` gets executed. So we need to do some error handling manually.

To handle this, at the end of `createAsyncThunk` we'll check the contents of the response to see if we're getting data object or array of error objects. If we get array of error objects, we'll explicitly throw an `Error` or else we'll return the response as it is.

```javascript
export const loadUser = createAsyncThunk(
  "post/loadUser",
  async ({ userId }) => {
    const response = await axios.post("https://api.somelink.com/graphql", {
      query: `
        query ($userId: uuid!) {
          users(where: {id: {_eq: $userId}}) {
            name
            email
          }
        }
      `,
      variables: {
        userId: "user-12345",
      },
    });
    if(response.data.errors) {
      throw new Error("Could not fetch data. Please refresh to try again.")
    }
    return response.data.data;
  }
);
```

We can catch this in the `extraReducers` as below

```javascript
[loadUser.rejected]: (state, action) => {
  state.status = "error";
  state.errorMessage = action.error.message;
},
```

That's how we use GraphQL with Axios and Redux

## Conclusion

In this blog, we learned how to use GraphQL with Axios and Redux and how to handle errors in this process.

Now the question is – Is it recommended to use this combination in apps? Probably not. I did it as I was creating a project for learning purposes.

For a production app, using one of the well-known libraries like Apollo Client, urql, etc. would be a better choice. But in case you're using REST API across the project, and need to use GraphQL API in one or two places, then this method can come in very handy.

Thank you for reading the blog. Do drop your feedback in the comments below and if you liked it, share it with your developer friends who might find it useful too. If you want to have any discussion around this topic, feel free to reach out to me on [Twitter](https://twitter.com/desaihetav)

Using GraphQL with Axios and Redux

If you are new to Web Development or React in particular, you might have heard this buzz word "React Hooks" a lot and might be finding it overwhelming too. You may be having questions like – "Should I learn it? Is it important? Is it even required for a beginner like me?".

I cannot straight away answer your questions, but I can help you understand why do React Hooks exist and what motivated their introduction to React by the React Team. This understanding will help you decide whether to learn React Hooks or not.

## Let's get started

Just so that we don't get overwhelmed with all the things that hooks have to offer, let's first define our goal for this article and we'll stick to it.

> To answer why are React Hooks required, we will need to understand one thing: **What problems do React Hooks solve?**

## Background

To get a little context, let's see how React has evolved over the years. Initially, when React was released, there was no concept of class in JavaScript and hence it had to be handled by React. Back then, the React Components were created using `React.createClass` API as shown in the code snippet below.

```javascript
const ExampleComponent = React.createClass({
  getInitialState () {
    return {
        // ...
    }
  },
  componentDidMount () {
    // setup
    // add listener for feature 1
    // add listener for feature 2
    // and so on...
  },
  componentDidUpdate () {
    // logic to update state
  },
  componentWillUnmount () {
    // clean up
    // remove listener for feature 1
    // remove listener for feature 2
    // and so on...
  },

  render() {
    return (
      // ...
    )
  }
})
```

### Post ES6 release

With the release of ES6, the `class` keyword was introduced in JavaScript and it was a new way to create classes in JavaScript. Later, React deprecated the `createClass` API and moved to `React.Component` API. Now we could create React Components using JavaScript native way of creating classes, as shown in the snippet below.

```js
class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      // ...
    };

    this.exampleFunction = this.exampleFunction.bind(this);
  }
  componentDidMount() {
    // setup
    // add listener for feature 1
    // add listener for feature 2
    // and so on...
  }

  componentDidUpdate() {
    // logic to update state
  }

  componentWillUnmount () {
    // clean up
    // remove listener for feature 1
    // remove listener for feature 2
    // and so on...
  },

  exampleFunction() {
    //...

    this.setState({
      // ...
    });
  }

  render() {
    // ...
  }
}
```

With this change, React got better, but it still had some tradeoffs. Every time while creating a component, it was compulsory to use the constructor and call `super(props)` and also `.bind` every function using `.this` keyword in the constructor.

Now, these weren't too big of an issue, and also these weren't React issues because this is how classes worked in JavaScript. But still, there had to be some efficient way to overcome this problem.

Later, something called `Class` Fields were released, which allowed us to directly add properties to the class, without having to use constructor and we no longer needed to `.bind` any methods in the constructor as we could use arrow functions to create methods in a class.

```js
class Example Component extends React.Component {
    state = {
        // ...
    }

    exampleFunction = () => {
        // ...
    }
}
```

### React Functional Components

Then with Functional Components, there was a simpler way to create components that did not require any state management or lifecycle methods. Initially, Functional Components were stateless components. They would take in props and simply render a UI, no other complexity was involved.

```js
function ExampleComponent({ props }) {
  // ...
  return(
      // ...
  );
}
```

Now, this was the stage, just before hooks were introduced. At this point, there was a considerable scope of improvement in the following areas:

- State Management

  - Even the simplest state management requirements made it compulsory for us to use Class Components instead of Functional Components and it just got messy with complex state management.

- Lifecycle Methods

  - With the use of lifecycle methods, the logic that is related to the component was spread across the component. For instance, in the code snippets above, the actual logic lied in the `exampleFunction`, while the logic of when to call `exampleFunction` was contained in `componentDidMount` and `componentDidUpdate` methods.
  - In addition to this, the lifecycle methods could also contain several other unrelated logic that needs to be executed at a particular lifecycle stage.

- Non Visual Logic was not Reusable

  - Due to the logic of the component being spread across the component and React Components, being a combination of logic and UI, it made the reusability of non-visual logic (i.e. logic without UI) very complex.

These were the exact problems that motivated the introduction of React Hooks.

## React Hooks

The React team introduced React Hooks to the world at React Conf in late October 2018. In early February 2019, they finally came in React v16.8.0.

React Hooks enables you to use state and other React features, without writing a class, in functional components. It gives combined advantage of Functional Components clean code and Class Components powerful features. And all this is possible because React Hooks are just regular JavaScript functions.

### State Management

React Hooks provide a new way to add and manage state in functional components using the `useState` hook. The useState method takes in the initial value of a state variable as the only argument and it returns an array of two items, the first being the state variable and the second being a function to update that state variable.

```jsx
import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  // count is state variable
  // setCount is method to update state variable count
  // initial value of count will be 0, as passed in useState

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
```

### Lifecycle Methods

With Hooks, React introduces a new way to connect logic and its trigger conditions. Instead of writing all the unrelated logic in a block of a lifecycle method that needs to be executed at a particular stage in the lifecycle, we can now write any logic independently and pass in the trigger conditions with the help of the `useEffect` hook.

`useEffect` lets us perform side effects inside functional components. It takes two arguments, the first being a function and the second being an optional array. The function defines which side effect is to be run and the optional array defines when should the effect be triggered or re-run. The effect is triggered whenever the value of the variables passed in the array changes.

```js
import React, { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
```

### Reusable Non Visual Logic

When it comes to sharing non-visual logic across components, there is no inbuilt hook like useState or useEffect which can directly take care of it. But there is a flexibility of creating **our custom hooks**, using the different inbuilt hooks as required. This lets us extract the logic out of the component and make it reusable across components.

An example of such logic is handling Authentication State. In apps with authentication, there may be several functionalities where you need to check for authentication and only allow logged-in users to access that functionality. In this scenario, you should not be required to write logic to handle the authentication state in multiple components. You can write the logic once inside a custom hook and access it across components.

```js
import { useState, useEffect, useContext } from "react";

export default function useAuthListener() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // setup – add auth state listener
    // logic to handle auth state change
    // clean up – remove auth state listener
  }, []);

  return { user };
}
```

# Conclusion

I think, by now, you would have got a fair idea of how Hooks has enabled us to have better **state management**, **concentrated effect logic**, and **reusable non-visual logic**.

Since the scope of this article is to understand why are React Hooks required, I've taken the simplest examples of hooks and not gone into a detailed explanation of how each of them works. While there is a lot more about hooks that make them powerful and there are many different ways in which we can use hooks, the content covered in this article is enough to answer our primary question: What problems do hooks solve, and why are they required?

In upcoming posts, I'll be writing in detail about different hooks, how they work and how can they be used in our projects.

---

Thank you very much for reading this article. I hope you found it useful and if you did, please do share it with your friends or anyone who may find this interesting.

Connect with me on [Twitter](https://twitter.com/desaihetav) and [LinkedIn](https://linkedin.com/in/desaihetav) to get updates on my new blog posts.

Why Are React Hooks Required?

### What does FAANG/M stand for?

**F**acebook, **A**pple, **A**mazon, **N**etflix, **G**oogle and **M**icrosoft are the technology giants that comprise the popular acronym **FAANG** or **FAAMG** or **FAANGM**.

### The General Perception

Most people in the tech community have a perception that these are *"the best employers with good pay and great perks"* and hence every fresher coming out of college dreams of joining one of these FAANGM companies. If you're one of those people who think this is true, then let me break it to you that this acronym has nothing to do with tech, nothing at all.

### So what does it really mean?

The term comes from stock market point of view and was coined by Jim Cramer, the television host of CNBC's Mad Money, in 2013, who thought these companies were totally dominant in their markets and had grown exponentially in the stock markets during that time.

Originally, the term FANG was used, without Apple being included in it. Later, in 2017, when Apple's stock had made larger gains, it was added and the term became FAANG.

### Why Microsoft is/isn't included?

Microsoft wasn't performing anywhere near to these companies and hence it hadn't made it to this acronym. However, after the appointment of Satya Nadella as the CEO of Microsoft in 2014, the company showed massive growth and its stock almost quadrupled from 2014 to 2019. This compelled the stock market experts to squeeze in Microsoft in the acronym. Later in 2019, Goldman Sachs came up with FAAMG, replacing Netflix with Microsoft. It chose to do so because of Netflix's relatively small market capitalisation compared to the others. Also, FAAMG is somewhat more focused on tech companies as Netflix is considered to be a consumer services and media company.

### Conclusion

FAANG or FAAMG might be thought of as best employers to work for but that wasn’t the case when it was coined, and it isn’t the case today either.

Thank you very much for reading this article and if you found it useful, please do share it with your friends or anyone who may find this interesting.

FAANG/M is not what you think it is!

The Coronavirus outbreak has brought the whole world to a standstill. This presents to us an opportunity to do things that we have always wanted to but couldn’t just because of lack of time. With my interests in computers, I have always wanted to create something which is actually useful in real life and which can create an impact. So, during this lockdown period, as I am learning Data Analysis and Machine Learning, I thought of putting my skills to practice and develop a dashboard which can help create awareness among the people, help them understand the intensity of this pandemic and inspire them to stay at home and help the world come out of this miserable times.

In this blog, I’ll take you through the complete process that I have followed while creating the dashboard.

> To have a look at the end result before jumping in the process, checkout the link here: [COVID-19 Dashboard by Hetav Desai](https://desaihetav-streamlit-covid-19-dashboard-app-4jgtjw.streamlit.app/)

## Steps

1. Collect data. Use the data source that is reliable and frequently updated with latest numbers.
    
2. Process the data. Structure the data as required for the analysis.
    
3. Clean the data. Remove unnecessary, duplicate and outlier data. Basically any kind of data that has the potential to generate errors in analysis.
    
4. Analyse the data. Create meaningful visualisations out of the data.
    
5. Present interpretations of analysis in an easily readable and understandable manner.
    

## Packages Used

1. Pandas — to analyse and manipulate data
    
2. NumPy — to work with arrays and perform basic mathematical operations
    
3. Plotly — to create visualisations
    
4. Streamlit — to add interactivity and present visualisations in dashboard format
    

```python
import pandas as pd
import numpy as np
import plotly.graph_objects as go
import streamlit as st
```

## Data Collection

I have used the dataset published by CSSE, John Hopkins University on their GIT repository which is regularly updated. Here’s the [link](https://github.com/CSSEGISandData/COVID-19).

The `read_csv()` function from pandas library is used to read `.csv` data into a data frame.

```python
death_df = pd.read_csv('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv')
confirmed_df = pd.read_csv('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv')
recovered_df = pd.read_csv('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_recovered_global.csv')
country_df = pd.read_csv('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/web-data/data/cases_country.csv')
delta_df = pd.read_csv('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/web-data/data/cases_time.csv', parse_dates=['Last_Update'])
```

Let’s have a look at the structure of these data frames. confirmed\_df.head() gives the following output.

![Dataframe1](https://cdn.hashnode.com/res/hashnode/image/upload/v1601065760304/jgKJsB2e3.png align="left")

The data frame consists columns from 22nd Jan to current date. The structure of other three data frames is similar to this.

## Data Processing and Cleaning

Let’s convert all the column names to lowercase as it makes it easy to access them. Also, we will convert `Province/State` to `state` and `Country/Region` to `country` for better accessibility.

```python
country_df.columns = map(str.lower, country_df.columns)
confirmed_df.columns = map(str.lower, confirmed_df.columns)
death_df.columns = map(str.lower, death_df.columns)
recovered_df.columns = map(str.lower, recovered_df.columns)
delta_df.columns = map(str.lower, delta_df.columns)
confirmed_df = confirmed_df.rename(columns={'province/state': 'state', 'country/region': 'country', 'lat': 'lat', 'long': 'lon'})
recovered_df = recovered_df.rename(columns={'province/state': 'state', 'country/region': 'country'})
death_df = death_df.rename(columns={'province/state': 'state', 'country/region': 'country'})
country_df = country_df.rename(columns={'country_region': 'country'})
delta_df = delta_df.rename(columns={'last_update': 'date', 'country_region': 'country_name'})
```

## Data Analysis

Now that we have a frequently updated data from a reliable source, converted to a format that easily accessible, let’s get into the analysis of this data.

### Calculating total Confirmed, Death and Recovered Cases across the World

The `country_df` has columns for confirmed, death and recovered cases for each country. Taking the sum of respective cases for each country(i.e. sum of values in respective columns), gives us the total number of respective cases across the world.

```python
confirmed_total = int(country_df['confirmed'].sum())
deaths_total = int(country_df['deaths'].sum())
recovered_total = int(country_df['recovered'].sum())
```

### Calculating Current Day Increase/Decrease in Respective Cases

The sum of values in last column of `confirmed_df`, `death_df` and `recovered_df` gives us the total number of respective cases for current day.

```python
confirmed_df[confirmed_df.columns[-1]].sum()
death_df[death_df.columns[-1]].sum()
recovered_df[recovered_df.columns[-1]].sum()
```

And, sum of values in second last column of `confirmed_df`, `death_df` and `recovered_df` gives us the total number of respective cases for previous day.

```python
confirmed_df[confirmed_df.columns[-2]].sum()
death_df[death_df.columns[-2]].sum()
recovered_df[recovered_df.columns[-2]].sum()
```

Subtracting these two values for respective cases yields us current day increase or decrease in respective cases.

```python
confirmed_today = int(confirmed_df[confirmed_df.columns[-1]].sum() - confirmed_df[confirmed_df.columns[-2]].sum())
death_today = int(death_df[death_df.columns[-1]].sum() - death_df[death_df.columns[-2]].sum())
recovered_today = int(recovered_df[recovered_df.columns[-1]].sum() - recovered_df[recovered_df.columns[-2]].sum())
```

### Displaying a table of 20 Countries with Most Number of Cases

We will display Country Name, Last Updated Time, Confirmed Cases, Death Cases and Required Cases in the table. The `country_df` has the required data that is to be displayed in the table. Let’s extract the required data from it.

```python
country_stats_df =
country_df[[‘country’, ‘last_update’,’confirmed’, ‘deaths’, ‘recovered’]].sort_values('confirmed', ascending=False)
             .reset_index(drop=True)
             .head(20)
```

This extracts the required columns from `country_df`, sorts the table in descending order of Confirmed Cases and returns top 20 rows into a new data frame called `country_stats_df`

Now that we have the exact data we need to display in the table, we will add some styling to it to make it more readable and easier to interpret. We will change the font colour for Death Cases column to Red and Recovered Cases column to Green.

```python
def highlight_col(x):
  red = 'color: #e73631'
  black = 'color: #000'
  green = 'color: #70a82c'
  df1 = pd.DataFrame('', index=x.index, columns=x.columns)
  df1.iloc[:, 2] = black
  df1.iloc[:, 3] = red
  df1.iloc[:, 4] = green
  return df1
```

We pass a data frame `x` to the function and copy it to `df1`. The three colours are defined in the function. `iloc` function is used to select rows and columns in the dataframe. The first argument is for selection of rows and second for that of column. Using `:` as an argument suggests that all the rows/columns are to be selected.

In Above function assigns respective colours to all rows of columns with index 2, 3 and 4.

Let’s apply this styling to our data frame and pass it to `st.table()` function of Streamlit library, to display the table.

```python
st.table(country_stats_df.style.apply(highlight_col, axis=None).set_properties(**{‘text-align’: ‘left’, ‘font-size’: ‘15px’}))
```

### Creating Bar Chart Race for 10 Countries with Most Number of Cases

An online tool called Flourish Studio makes it really easy to create an Bar Chart Race. All we need to need to do is load a `.csv` file into the tool and select which column is to be used as Labels on Y-axis and which columns are to be used for values on X-axis. The piece of code below can be used to export the data into `.csv` file called `latest_confirmed.csv` as required by Flourish Studio.

```python
latest_confirmed = confirmed_df.groupby(['Country/Region']).sum()
latest_confirmed.to_csv('latest_confirmed.csv')
```

[Link to Flourish Studio](https://app.flourish.studio/)

## Stats for a Specific Country

### Creating a dropdown for Country selection

`list_all_countries = list(confirmed_df[‘country’].unique())` creates a list of all the countries we have data for.

`country_name = st.selectbox(‘’, list_all_countries, 71)` is used to create dropdown. Any value selected from the dropdown is assigned to `country_name`.

`st.selectbox()` takes 3 arguments. A label for dropdown, list of values for dropdown and index of default value. I have passed 71 as default value index as it is index value for India.

### Calculating total Confirmed, Death and Recovered Cases for Selected Country

First we create three new data frames from `confirmed_df`, `death_df` and `recovered_df` with only the data for specific country.

Then we calculate current day total, previous day total and their difference for current day change (exactly as done previously for World Data) for all three cases.

```python
def show_country_stats(country):
    country_confirmed_df = confirmed_df[confirmed_df['country'] == country]
    country_death_df = death_df[death_df['country'] == country]
    country_recovered_df = recovered_df[recovered_df['country'] == country]

    country_confirmed = country_confirmed_df[country_confirmed_df.columns[-1]].sum()
    country_death = country_death_df[country_death_df.columns[-1]].sum()
    country_recovered = country_recovered_df[country_recovered_df.columns[-1]].sum()

    country_confirmed_today = int(country_confirmed_df[country_confirmed_df.columns[-1]].sum()) - int(country_confirmed_df[country_confirmed_df.columns[-2]].sum())
    country_death_today = int(country_death_df[country_death_df.columns[-1]].sum()) - int(country_death_df[country_death_df.columns[-2]].sum())
    country_recovered_today = int(country_recovered_df[country_recovered_df.columns[-1]].sum()) - int(country_recovered_df[country_recovered_df.columns[-2]].sum())
```

### Plotting the trend for Confirmed, Death and Recovered Cases for selected Country

```python
def plot_cases_of_a_country(country):
    labels = ['Confirmed', 'Deaths', 'Recovered']
    colors = ['black', 'red', 'green']
    mode_size = [8, 8, 8]
    line_size = [5, 5, 5]

    df_list = [confirmed_df, death_df, recovered_df]

    fig = go.Figure();

    for i, df in enumerate(df_list):
        x_data = np.array(list(df.iloc[:, 4:].columns))
        y_data = np.sum(np.asarray(df[df['country'] == country].iloc[:,4:]),axis = 0)

        fig.add_trace(go.Scatter(x=x_data, y=y_data, mode='lines+markers',
        name=labels[i],
        line=dict(color=colors[i], width=line_size[i]),
        connectgaps=True,
        text = "Total " + str(labels[i]) +": "+ str(y_data[-1])
        ));

    fig.update_layout(
        title="COVID 19 cases of " + country,
        xaxis_title='Date',
        yaxis_title='No. of Confirmed Cases',
        margin=dict(l=20, r=20, t=40, b=20),
        paper_bgcolor='#f5f5f5',
        plot_bgcolor='rgba(0,0,0,0)'
    );

    fig.update_yaxes(type="linear")
    return fig
```

We pass selected country as parameter in the function. Labels, colours, marker size and line size are defined for each case.

Labels for X-axis are Dates i.e the columns starting from index=4 and values for plotting on Y-axis are the sum of values in these columns for selected country.

As we have 3 data frames in `df_list`, the for loop runs for all 3 data frames, plotting graphs for respective case at the end of each iteration.

### Plotting Daily Increase in number of Confirmed Cases for selected Country

We will use `delta_df` to plot the daily increase in number of Confirmed Cases.

We first extract the required columns from `delta_df`:

```python
delta_df = delta_df[['Country_Region', 'Delta_Confirmed', 'Last_Update']]
```

The current structure of `delta_df` is as shown below:

![dataframe2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601065797586/k9JhCnmBA.png align="left")

This structure is not at all useful to create any plot. We either need Date as columns and Date as index or vice versa. So, we will pivot the table as per our need. We will set Date as index and Country Names as columns.

```python
delta_pivoted_df = delta_df.pivot_table(index='date', columns='country_name', values='delta_confirmed', aggfunc=np.sum)
delta_pivoted_df.reset_index(level=0, inplace=True)
```

After this restructuring of `delta_df`, it is changed as shown below:

![dataframe3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601065810283/DCSo5SmDP.png align="left")

We add a new column named ‘World’ which contains the sum of number of confirmed cases of all countries.

```python
delta_world_df['World'] = delta_pivoted_df[delta_pivoted_df.columns].sum(axis=1)
```

Now we can use this data frame to plot a bar graph where the values in date column form X-axis and those in column of selected country form Y-axis.

```python
def plot_new_cases_of_country(country):
    if(country == 'World' or country == 'world'):
        y_data = np.array(list(delta_world_df[country]))
    elif(country == 'US'):
        y_list = list(delta_pivoted_df[country])
        y_list = [x / 2 for x in y_list]
        y_data = np.array(y_list)
    else:
        y_data = np.array(list(delta_pivoted_df[country]))
    x_data = np.array(list(delta_df['date']))
    fig = go.Figure()
    fig.add_trace(go.Bar(
        x=x_data,
        y=y_data,
        name='Daily Increase',
        marker_color='crimson',
        hovertemplate='Date: %{x}; \n  New Cases: %{y}',
    ))
    fig.update_layout(
            title="Daily increase in cases of " + country,
            xaxis_title='Date',
            yaxis_title='No. of New Cases',
            margin=dict(l=20, r=20, t=40, b=20),
            paper_bgcolor='#F6F6F7',
            plot_bgcolor='rgba(0,0,0,0)',
    );
    fig.update_yaxes(type="linear")
    return fig
```

## Conclusion

To keep it simple and easy to understand, I have kept my focus on Data Science aspect of the project. The designing part which uses HTML and CSS (Bootstrap) is not discussed in this blog. You can checkout the source code, [here](https://github.com/desaihetav/Streamlit-COVID-19-Dashboard/blob/master/app.py).

Thank you very much for reading this article and if you found it useful, please do share it with your friends or anyone who may benefit from this.

If you have any questions or want to discuss ideas, please feel free to reach out to me through your preferred medium of communication.

Get in touch with me on [Twitter](https://www.twitter.com/desaihetav), [LinkedIn](https://www.linkedin.com/in/desaihetav/) or [Instagram](https://www.instagram.com/desaihetav/).

Hetav Desai

Software Engineer at

Recent Posts

JavaScript Arrow Functions

Using GraphQL with Axios and Redux

Why Are React Hooks Required?