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.

// 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.

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.

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

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:

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:

// 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.

// 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.

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

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

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:

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.

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

// 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

// 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.

/*
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.

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

[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

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.

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.

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.

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.

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.

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.

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.

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 and LinkedIn to get updates on my new blog posts.

Facebook, Apple, Amazon, Netflix, Google and Microsoft 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.

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

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

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Link to 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.

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

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:

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

The current structure of delta_df is as shown below:

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.

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:

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

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.

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.

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, LinkedIn or Instagram.