In early March of 2020 my company asked staff to work from home because of the spread of Coronavirus.

At first, the change from a traditional office setting to remote work was jarring: my very small New York City apartment didn’t enable a comfortable work area in which to write, code, or perform proactive tasks.

Over time I did my best to adjust and, like many of my colleagues, spent time searching for ways to adapt to new routines.

Make the most of the situation, I frequently reminded myself.

Given the prevalence of coronavirus New York, I knew I would be indoors for months on end. This led me to an idea: I challenged myself to learn a new skill. I thought that learning something challenging and different would be enjoyable and a much needed and reliable distraction.

I spent time reflecting on what I wanted to learn. I then conducted research and came up with a short list of skills I thought I could develop during quarantine that met the following criteria:

1. Learning the skill should be fun
2. Once acquired, I should be able to use the skill more broadly in my life
3. The skill should help me build something useful or of value to others
4. And lastly, I should learn the skill through self-learning online.

Given these guideposts, and my circle of competence, I created a list of things I would be interested in diving deeper into.

My initial list included:

• learning to play the guitar,
• becoming a reasonably competent amatuer chef capable of making a diverse array of nutritious meals,
• improving upon my very rusty Mandarin skills acquired while studying abroad in China,
• building a website - more or less from scratch - to help people, like me, working from home.

After consulting with friends and reviewing various online tutorials, I chose to build my first website. Instantly, I was hooked.

I have learned so much along the way and want to now share some of these core lessons with you.

My story is not yet complete as the site that I developed is still growing and I am learning more by the week.

There are many resources online on how to build a website or monetize a blog. This post is not that.

I want to focus on a few higher level topics that I became aware of - and that you should know - before diving deep into a website project of your own.

Insight #1: When building a website, build around a topic you are passionate about

When I started building WFHAdviser.com, I was essentially building an online resource that helped me solve a series of problems that I was acutely aware of.

Even if traffic was minimal, my thinking went, the site would still be useful for me and a few colleagues struggling with basic questions like:

• How to negotiate new benefits and perks while working remotely?
• How to best set up a home office on a budget?
• Ways to mitigate stress or maintain a comfortable posture when working in a bedroom?

I found the process of creating content for the site deeply rewarding.

Not only was it fun to write on these topics, but I got to learn more about what people cared about and what challenges they were facing in home office environments.

I did qualitative research and called friends and spoke with them about how they were handling remote work. I did quantitative research and looked at search query trends to better understand what people were searching for online.

This process was laborious. Nights and weekends became dedicated to learning more about the work from home space. I translated these learnings into content that I would then share with important people (friends, family, peers) in my life. These people, in turn, shared my site with others.

Getting e-mails and messages from friends of friends or former colleagues about how my blogs helped them successfully work from home accelerated my interest in building more resources, guides, and content that could help these readers.

So if you want to build a website, make sure to start a site in a vertical you care about. Take time to understand what you are building, and why, and ensure your digital fingerprints are across it in detail: take ownership of what the site says, how it looks, and whom it helps.

The flywheel starts with passion. The list of possible niches is infinite. For me it is the work from home space.

Insight #2: Speed matters, so move quickly

The first version of the website looked so-so at best. It would be generous to call it a glorified landing page with a few links. The website was missing features and functionality I knew I wanted to include but that I couldn’t complete upon launch.

Some of the content that I wrote needed edits, but I placed these blogs on the site anyway. A few of my links, unfortunately, led to 404 errors.

Why am I candidly sharing the shortcomings of the site at launch?

Because I believe that speed to market matters if you have an obsession with helping users.

Showing a bias towards action and insisting on high standards are not mutually exclusive concepts. You should have a vision for a site and launch it when it's not yet complete knowing that future improvements will yield better results.

From the website's launch in March 2020 until August 2020, I performed roughly 1,000 edits, improvements, and fixes. Had I waited five months to get everything “right” tens of thousands of people would not have gotten their questions answered or learned about strategies to work from home successfully.

The flywheel needs initial momentum to get moving.

Insight #3: Earn the trust of users

My final key learning is that users need to trust a website (and the site’s authors) in order to spend time on its pages and absorb the site’s content.

When users first came to my site, I noticed high bounce rates. Given how empty the site was, this was not surprising.

But after ample work and site improvements, people actually spent more time looking at the guides I wrote and the resources I cultivated. My attention to detail increased as the titles of my pieces became indexed on Google.

I found the experience of earning user trust deeply rewarding. I reviewed three metrics weekly: how much time was spent on each page, website abandonment rates, and bounce rates.

As I made general and specific website improvements, these operational metrics improved. I replaced large image files with smaller ones to reduce latency and load times. I optimized the site for speed.

I became obsessed not with how many people visited the site but the amount of time they spent there. I used time on site as a proxy for how useful and helpful my content was. As my visitors demonstrated to me that their experiences were getting better, I knew I was headed in the right direction.

The flywheel needs trust to turn.

Wrapping up

Spending long periods of time in quarantine gave me time to develop a newfound skill, website development. This skill has unlocked a new passion (helping people working from home) in a newly emerging vertical (remote work).

A world where people are educated about how to work successfully from home is a world I want to live in - and one that I am on an ongoing mission to create.

Whether or not you have worked remotely before, you’ve likely never had to share your “home office” with your partner and two children.

Before quarantine, a study showed that engineers preferred working from home and felt more productive than they were in the office. However, over a month into quarantine, many software developers sharing small spaces are starting to look back at those late nights in the office longingly.

By adopting some realistic tips along with help from supportive employers, developers can regain some focus, return a little bit closer to peak productivity, and achieve a state of mental wellness.

My team at Coderbyte surveyed 150+ software developers to better understand how they were coping with social distancing. The results illustrate how many software developers have more time to code and even work on side projects, but many are also struggling to maintain focus and productivity.

We also interviewed a senior software engineer, Geoff Chin, with a wife and two children under the age of four to understand what it really looks like to shelter in place with two full time working parents.

We captured his reactions to the adrenaline-fueled optimism of tips and tricks from other experts below, and then provide recommendations for employers:

How realistic is it for developers coping with distractions to...

Set a schedule?

Sounds reasonable enough, right? Work is scheduled, school is scheduled, why not quarantine too? Here’s what we learned:

“The first week we were excited to be together. We had every hour blocked off with time for Legos, lunch, outdoors time, arts and crafts just waiting for the department of education to start online classes.

After the first week our schedules quickly broke down. The kids were bored easily, our work schedules didn’t align with the kids’ schedules. And then class started. You think Zoom meetings are bad with adults? They are way worse with kids.”

Since rigid schedules are out of the question, maintain a flexible mindset and split up the day so that one parent is fully available at all times.

Signal to kids when you cannot be interrupted, by using physical separation?

As many articles noted, when space is limited this can be difficult. However, even within a 500 square foot apartment, this family has found “tag-teaming” childcare as the best way to make it work.

“We thought we could work and watch the kids at the same time — not a chance. We invested in proper furniture to set up workspaces at home so my wife and I can tag-team watching the kids.”

Stockpile activities that don’t require adult supervision?

“All activities need a certain amount of adult supervision when your kids are under four.

I talked to my employer and let them know early on that my kids are going to be in meetings. I said, ‘I’ll do my best to mute when I can, but I need to be physically with them during the day.’”

Take time for yourself?

“That’s a hard question,” he said, when asked about carving out time for himself. Geoff said he started trying some “meditation and yoga stuff” in the morning, but that is quickly interrupted by the kids running around.

“Time alone is very difficult right now.”

During Covid-19, supportive leaders can...

Now that you have insight into what it’s like to be a software engineer trying to cope with distractions, how can you show up for your employees knowing the stresses they deal with at home?

Reach out to your people and check up on them.

You might not know if your employee is having a rough time and it can be difficult to reach out, especially right now.

Demonstrate a high level of emotional intelligence. By being proactive you show that you are available to support them. Be the one to ask “How are you, really?”

Allow periods of focused, uninterrupted time for your team to work

Clearly communicate the expectations for the week and encourage time for focused work. Lead by example and block off hours in your schedule for “heads down work,” encouraging your team to do the same.

Paul Graham refers to this working style as the “Maker’s Schedule.” Unlike business stakeholders, developers are far more productive when they limit the amount of context switching throughout the day. Instead of scheduling meetings throughout the day, block off several hours to accomplish work, uninterrupted.

Remote workers are 20% more likely to say they complete all their daily tasks every or most days.

Continue to develop your company culture, remotely

All of the fun happy hours, sports leagues, and clubs you used to offer in person? Find a way to keep them alive online.

This could mean offering a stipend for takeout where everyone can eat lunch together, or a virtual happy hour with a game.

Oftentimes this is the only connection your employees have with their peers beyond meetings. Create opportunities to keep your team’s spirits high.

Give permission to go offline

This might sound obvious, but with increased workloads and high stress working environments, it is difficult for employees to know when to shut off. Give permission for nights and weekends off and encourage time offline.

People who work from home are 17% more likely to leave work “feeling accomplished about what they set out to do”.

As with everything, there are pros and cons to remote working. While adjusting and re-adjusting to a work from home culture, it is important to understand the impact of quarantine and living through a global pandemic.

Unfortunately no amount of guides and resources is going to be able to help your household adjust quite like trial and error. The good news is that you are not alone.

Continue to try different tricks and tips as the situation evolves and keep the lines of communication open with your manager so you can get the support you need. If you suddenly find yourself with more time, consider practicing your coding skills to level up.

If you are an employer, do not be shy to reach out and check in with your team. They need a steady hand and guidance now more than ever.

Make sure to check our guide to remote software development during Covid-19, bookmark our continuously updated article with software development data, and keep testing out different ways to keep building culture and connection to prioritize the mental and physical health of your company.

When you build a bar chart race, you're creating many discrete pages of bar charts and then stringing them together. This is just like how traditional cartoon animation works.

In December 2019, Tableau released version 2020.1 beta with a new Animations feature for dynamic parameters. This means that the bar chart race below is now very easy to build.

Watch it in action: [https://www.youtube.com/watch?v=3iZrMkZ3948](https://www.youtube.com/watch?v=3iZrMkZ3948" rel="noopener nofollow)

Pre-requisites

Download and install Tableau Public (version 2020.1.2 onward). It is totally free and has full functionality. The only snag that all of your work can only be published on the Tableau Public server, and not saved locally to your Desktop. This is alright if the data is not sensitive or private.

Download the latest COVID-19 data (in *.xlsx format) from the European Centre for Disease Prevention and Control website, and rename it using a generic filename like “COVID-19-geographic-distribution-worldwide.xlsx”. You can replace this file with updated data later, using the same filename.

Open the Tableau Public app, and on the "Connect" menu, click on “Microsoft Excel” and select the data file you downloaded. Click on the “Sheet 1” tab at the bottom left.

Connect Tableau Public to dataset

Identify the Quantity to Race

There are 2 useful quantities you can choose to race in this dataset:

• Daily Infected Cases, or
• Daily Deaths Cases.

To choose the race quantity as daily infected cases, drag “Cases” to Columns.

To label the bar chart with country names, drag “Countries And Territories” to Label.

To have the bars in various colors, drag “Countries And Territories” to Color.

Create Rank for Countries

This section requires a simple programming line of code.

Click on Dimensions → drop-down menu → Create Calculated Field.
Create a new field “Rank”, and key in the code below:

RANK_UNIQUE(Sum([Cases]))

To code for Calculated Field “Rank”

Click on “Apply” to ensure that calculation is valid, then click “OK”.

Drag “Rank” to Rows.
Click on (Rows) Rank → drop down menu → Discrete.
Click on (Rows) Rank → drop down menu → Compute Using → “Countries And Territories”.

Configure Animation (New Feature for Version 2020.1)

To create a snapshot of animation frames, drag “Date Rep” to Pages.
Click on (Pages) Date Rep → drop down menu → Exact Date.

Turn on animations, select Format → Animations → On.
To set the transition duration: Duration → “1.00 seconds (Slow)”.
Close the Animations window by clicking “X”.

Look for a little Animations control which appears when the animations feature is turned on, then click the “forward play” icon. Drag the slider bar to a different date or use the left/right button to choose a date.

Animations control

Add Simple Customization

To improve colors:

Click on Label → ensure “Show mark labels” is checked.
Click on Color → Edit Colors -> replace similar colors if any.
(I have replaced the colors for USA, Spain, Italy)

You can hide the Countries legend card – no need for it anymore.

To add additional labels for the number of cases to the bars:

Drag “Cases” to Label.
Click on Label → Text → click on “3 dots”. This opens up the label editor.
Arrange labels to 1 line only.
Underline .
Bold , and use red font.
Click on “OK”.

Label editor

To change the name of the sheet:

Double-click on “Sheet 1” and change it to “COVID-19 Daily Infected Cases”.

To change X-axis limits:

Double-click on the X-axis. This brings up the Axis menu. Choose the Range to be “Fixed”: Fixed start=0, Fixed end=40,000.

To display only the top 15 countries:

Drag “Rank” to Filters → click on “OK”.
Click on (Filters) Rank → drop down menu → Compute Using → “Countries And Territories” .
Replace “206” with “15”, and click on “OK”.
Change the Standard view to “Fit Height”.

View chart using ‘Fit Height’

To increase the font size of the labels:

Click on Label → Font → drop down menu → change the font size to “15”.

To add a date label to the chart:

Right-click on the empty chart area → Annotate → Area.
This brings up the annotation editor.
Key in , and increase font size to “20”.
Click on “OK”.

Now that the date label was created, resize and move it to the bottom.

Annotation editor

Publish Visualization

When you are satisfied with the customization, the visualization is then ready to be published.

Click on File → Save to Tableau Public.

The work is now published on the Tableau Public server. You can then share it using the available link.

Here’s a video tutorial with a step-by-step guide for the entire process:

A bar chart race becomes very simple to build using the new Animations feature in Tableau Version 2020.1 onward. You can now try it on other country data with date/time series: GDP, Population, Life Expectancy, and so on.

Let your creativity flow!

Author's note: Similar to before, this dashboard is meant to be a demo and proof of concept for using real world data to build a dashboard. While this data should be accurate per the NovelCOVID API, I would recommend using tools like the Johns Hopkins University dashboard for complete and accurate analysis. Stay home and be safe! ❤️

• What are we going to build?
• What do we need before we get started?
• Step 1: Update how we fetch our data and fetch the statistics
• Step 2: Adding statistics to our dashboard
• Step 3: Make the data human friendly
• Step 4: Add the Last Updated date
• What can I do next?

What are we going to build?

We're going to be extending our original map demo with some basic statistics that we can retrieve from the NovelCOVID API. To get an idea, here's my demo I'm basing this off of.

Coronavirus (COVID-19) map demo with dashboard statistics

While you're not required to have completed Part 1 to apply these concepts, it definitely helps, and it lets you set up a map for your dashboard. If you'd like to start there, which I recommend, check out How to create a Coronavirus (COVID-19) Dashboard & Map App with Gatsby and Leaflet first.

Woah, a mapping app?

Yup. If you haven't played with maps before, don't be discouraged! It's not as bad as you probably think. If you'd rather start with mapping basics, you can read more about how mapping works first.

What do we need before we get started?

For this walkthrough, you pretty much need a React app in some form. I'll be working with the dashboard we previously built in my last walkthrough that includes a map of the cases of the Coronavirus (COVID-19) per country.

Coronavirus (COVID-19) map dashboard

I recommend starting with the previous tutorial, but if you want to skip the map and start fresh, the easiest way would probably be to use Create React App, Gatsby, or Next.js.

Step 1: Update how we fetch our data and fetch the statistics

To get started with our statistics dashboard, we're going to do a little prep work by changing how we're fetching the data. The goal here, is we're going to wrap our request logic in a reusable way so that we can use it for both our countries data and our new statistics data.

Creating a new React hook to fetch data

Diving in, the first we'll do is create a new React hook that will serve as how we fetch the data. To get started, create a new file in your hooks directory called useTracker.js and add a line inside of hooks/index.js to export it:

// New file src/hooks/useTracker.js
// This will be empty for now

// Inside hooks/index.js
export { default as useTracker } from './useTracker';

Inside of our useTracker.js file, we're going to set up our request logic. This is a long file, so make sure you copy and paste the entire thing before we walk through what it does:

import { useEffect, useState } from 'react';
import axios from 'axios';

const API_HOST = 'https://corona.lmao.ninja/v2';

const ENDPOINTS = [
  {
    id: 'all',
    path: '/all',
    isDefault: true
  },
  {
    id: 'countries',
    path: '/countries'
  }
]

const defaultState = {
  data: null,
  state: 'ready'
}

const useTracker = ({ api = 'all' }) => {

  const [tracker = {}, updateTracker] = useState(defaultState)

  async function fetchTracker() {
    let route = ENDPOINTS.find(({ id } = {}) => id === api);

    if ( !route ) {
      route = ENDPOINTS.find(({ isDefault } = {}) => !!isDefault);
    }

    let response;

    try {
      updateTracker((prev) => {
        return {
          ...prev,
          state: 'loading'
        }
      });
      response = await axios.get(`${API_HOST}${route.path}`);
    } catch(e) {
      updateTracker((prev) => {
        return {
          ...prev,
          state: 'error',
          error: e
        }
      });
      return;
    }

    const { data } = response;

    updateTracker((prev) => {
      return {
        ...prev,
        state: 'ready',
        data
      }
    });

  }

  useEffect(() => {
    fetchTracker()
  }, [api])

  return {
    fetchTracker,
    ...tracker
  }
};

export default useTracker;

Starting from the top:

• We import our dependencies: we're going to use Reacts useEffect and useState hooks to manage our requests
• We define default constants: we have a base API endpoint for our data, a list of the available endpoints we'll use, and a state object that will store our data
• We define our useTracker hook: our hook includes one argument api that will allow us to specify which endpoint we'll use to make our request
• We set up a state instance: we'll want to keep track of our fetched data, so we create a tracker state instance that we'll be able to update
• We created an asynchronous fetchTracker function: we'll use this to make our actual request
• Inside our function: we first find the API route and create our URL, update our state instance to a "loading" state, try to make our request, catch any errors if there are any, and finally if the request is successful, we update our state with that data
• We trigger our function: using a useEffect hook, we trigger our fetchTracker function to make the request. We only have one dependency of api. This means the function will only fire the first time and any time the api value we pass in changes. We won't be changing that value, but it may be helpful in other instances if you're dynamically changing the API used
• We return our tracker: the returned object includes both our tracker data as well as our fetchTracker function that we could use to refetch the data if we'd like

And with all of that, we have a brand new hook that will fetch data from the NovelCOVID API.

Using our new tracker hook

To make use of this hook, let's jump over to src/pages/index.js, remove our axios import if it's there, and instead import our hook:

import { useTracker } from 'hooks';

With our hook, let's replace our original country data request. First, add the following to the top of the IndexPage component:

const { data: countries = [] } = useTracker({
  api: 'countries'
});

const hasCountries = Array.isArray(countries) && countries.length > 0;

This will let us fetch our country data and let us know if we have any results. Next, let's replace our original request.

Inside of our mapEffect function, let's remove the axios request in addition to the response, the destructured data object, and the hasData constant.

Code diff showing update to map effect

Then, replace hasData with hasCountries:

if ( !hasCountries ) return;

And replace data with countries in the geoJson object where we map our features:

features: countries.map((country = {}) => {

At this point, if you hit save and refresh, you shouldn't notice any difference to what you previously had.

Add a request for our stats

Now that we are using our useTracker hook to fetch our country data, let's also use that to fetch our stats.

Right next to where we set up our useTracker hook before, let's add another request:

const { data: stats = {} } = useTracker({
  api: 'all'
});

And if we add a console.log statement under to see what's inside stats:

console.log('stats', stats);

We should see our stats data object logged out!

Using console.log to show Coronavirus (COVID-19) statistics

Follow along with the commit!

Step 2: Adding statistics to our dashboard

Now that we have our data available to use, let's use it!

To get started adding our statistics to the dashboard, let's create a data structure that will allow us to easily configure the data we want to use.

To do this, let's first create a new array called dashboardStats below hasCountries at the top of the page component:

const dashboardStats = [];

Inside this array, let's add some new objects that specify our data that we're pulling from the stats object we requested. To start, let's try to add:

const dashboardStats = [
  {
    primary: {
      label: 'Total Cases',
      value: stats?.cases
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.casesPerOneMillion
    }
  },
  {
    primary: {
      label: 'Total Deaths',
      value: stats?.deaths
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.deathsPerOneMillion
    }
  },
  {
    primary: {
      label: 'Total Tests',
      value: stats?.tests
    },
    secondary: {
      label: 'Per 1 Million',
      value: stats?.testsPerOneMillion
    }
  }
]

The reason we're splitting this up into primary and secondary keys, is we're going to use that to differentiate between logically similar stats that we want to style a little bit differently.

_Note: if you're not familiar with the ?. syntax, it's called Optional Chaining. This allows us to chain our properties without worrying about if the objects exist. If stats is undefined, it will simply return undefined instead of throwing an error._

With our stats data, let's add the tracker to our map. Let's remove our current <Map> component and include it nested inside our tracker div in the following:

<div className="tracker">
  <Map {...mapSettings} />
  <div className="tracker-stats">
    <ul>
      { dashboardStats.map(({ primary = {}, secondary = {} }, i) => {
        return (
          <li key={`Stat-${i}`} className="tracker-stat">
            { primary.value && (
              <p className="tracker-stat-primary">
                { primary.value }
                <strong>{ primary.label }</strong>
              </p>
            )}
            { secondary.value && (
              <p className="tracker-stat-secondary">
                { secondary.value }
                <strong>{ secondary.label }</strong>
              </p>
            )}
          </li>
        );
      })}
    </ul>
  </div>
</div>

This code should be immediately following the <Helmet> component if you're following along.

To explain what we're doing:

• We're creating a "tracker" div that will organize our stats
• We move our <Map component inside of this tracker
• We create a separate section called "tracker-stats"
• Inside of this, we create an unordered list (ul)
• Inside of our list, we loop through all of our stats inside dashboardStats
• For each stat, we create a new list element (li) and include 2 optional paragraphs that includes our primary stat data and our secondary stat data

Once we reload our page, we should now see a few stats:

Adding the first statistics to the page

Now that we have our stats on our page, let's make them look like they're in a dashboard.

Let's create a new file called _tracker.scss inside of our src/assets/stylesheets/components directory. Once that file is created, additionally add it to the src/assets/stylesheets/components/__components.scss file:

@import "tracker";

With our new component style file ready to go, let's add some styles into _tracker.scss:

.tracker-stats {

  color: white;
  background-color: $blue-grey-900;
  border-top: solid 1px darken($blue-grey-900, 5);

  ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
  }

}

.tracker-stat {

  font-size: 2em;
  text-align: center;
  padding: .5em;
  border-right: solid 1px darken($blue-grey-900, 5);
  border-bottom: solid 1px darken($blue-grey-900, 5);

  strong {
    font-weight: normal;
    color: $blue-grey-300;
  }

}

.tracker-stat-primary {

  margin: 0;

  strong {
    display: block;
    font-size: .5em;
  }

}

.tracker-stat-secondary {

  font-size: .5em;
  margin: .8em 0 0;

  strong {
    font-size: .8em;
    margin-left: .4em;
  }

}

Above – we're adding colors and organizational effects, such as using CSS Grid, to allow our data to be organized in an easy to read way and to look good! We're also making use of some pre-existing colors variables that are used within the project to keep the color use consistent.

Once you save those styles and reload the page, it should look much better:

Adding case statistics to the dashboard

From here, feel free to add more stats or adjust them to your liking. In the demo I created, I added the stats for active cases, critical cases, and recovered cases. If you'd like to do the same, you can check out the commit.

Follow along with the commit!

Step 3: Make the data human friendly

Now the rest of this walkthrough could be considered optional, but ultimately we want people to be able to read these statistics, right? So let's make the numbers a little more easy to read.

First, let's open our src/lib/util.js file and add this function:

/**
 * commafy
 * @description Applies appropriate commas to large numbers
 */

export function commafy(value) {
  let numberString = `${value}`;

  numberString = numberString.split('');

  numberString.reverse();

  numberString = numberString.reduce((prev, current, index) => {
    const shouldComma = (index + 1) % 3 === 0 && index + 1 < numberString.length;
    let updatedValue = `${prev}${current}`;
    if ( shouldComma ) {
      updatedValue = `${updatedValue},`;
    }
    return updatedValue;
  }, '');

  numberString = numberString.split('');
  numberString.reverse()
  numberString = numberString.join('');

  return numberString;
}

This function will take a number and turn it into a string with commas. To walk through what it does:

• Takes in a value as an argument. For our use, this value will most likely be a number.
• It converts the value into a string. We'll use this to work with adding commas to our number.
• We split that string into an array and reverse it. We want to reverse it because it makes it easier to add our commas depending on the index.
• We use the javascript reduce function to recreate our number-string. After every 3 numbers, we want to add a comma.
• Once we have our new value with the commas, we want to re-reverse it. So we split it again, reverse the array of characters, and re-join it, which is what we return

And now that we have our commafy function, let's use it. Back inside src/pages/index.js, let's import our function at the top of the page:

import { commafy } from 'lib/util';

Then, in our dashboardStats array, let's replace every number value with a ternary expression and function that will convert our number if it's available:

value: stats ? commafy(stats?.cases) : '-'

This line checks to see if stats exists. If it does, we commafy the cases value. If it doesn't exist, we return a - to show it's unavailable.

Once we repeat that process for all of our numbers, we can save, reload the page, and see our human friendly numbers!

Formatting the statistics to be human readable

Follow along with the commit!

Step 4: Add the Last Updated date

Finally, we want to make sure people are staying informed and understand the last time this data was updated. Luckily, our API provides a Last Updated date for us, so let's use it!

At the bottom of our "tracker" div under tracker-stats, let's add the following:

<div className="tracker-last-updated">
  <p>
    Last Updated: { stats?.updated }
  </p>
</div>

This creates a new section where we simply include the updated property from our stats. And if we save and reload the page, we can see the last updated date!

Adding last updated to the dashboard

But how could we even understand what that number is, unless you're the computer crawling this blog post? So let's change it to a human readable format like we did with our numbers.

Inside of our src/lib/util.js file, let's add another function:

/**
 * friendlyDate
 * @description Takes in a date value and returns a friendly version
 */

export function friendlyDate(value) {
  const date = new Date(value);
  return new Intl.DateTimeFormat('en', {
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    hour: 'numeric',
    minute: 'numeric'
  }).format(date);
}

This function creates a new Date object, then uses the javascript International DateTimeFormat API to convert it into a friendly readable format!

Once that's saved, let's import it next to our commafy function at the top of src/pages/index.js:

import { commafy, friendlyDate } from 'lib/util';

Then we can update our code similar to how we updated our numbers:

Last Updated: { stats ? friendlyDate(stats?.updated) : '-' }

And if we save and reload, we see it in a human readable way!

Formatting the last updated date

Finally for our "last updated" should look like it fits in with the rest of the dashboard, so let's add a few more styles. Inside of our _tracker.scss file we were working with earlier:

.tracker-last-updated {

  color: white;
  background-color: $blue-grey-900;
  padding: .8em 0;

  p {
    color: $blue-grey-300;
    font-size: .8em;
    text-align: center;
    margin: 0;
  }

}

And once we hit save and refresh the browser, we have our dashboard statistics with the last updated time! ?

Final dashboard with formatted lasted updated date

Follow along with the commit!

What can I do next?

Make the marker tooltip data human friendly

Now that we have our handy commafy and friendlyDate functions, we can reuse those functions to clean up the data in our country marker popups!

Use the fetchTracker function to poll for updates

Inside of the useTracker hook we created, we exported a function called fetchTracker. This allows us to force a request to the API to fetch new data. To make sure our map stays current even when somebody doesn't refresh the page, we can create a timer in javascript to regularly invoke that function to update our dashboard data.

Clear the map layers before re-adding the new ones

One thing we're currently not doing is cleaning up old layers before adding a new one. The way the map is set up, it just keeps layering them on top. What we can do is before we add all of our new layers, we can clear out the old ones. Check out this commit to get started!

Want to learn more about maps?

You can check out a few of my other resources to get started:

• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet (Part 1 of this post)
• How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter
• Anyone Can Map! Inspiration and an introduction to the world of mapping
• How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
• How to Create your own Santa Tracker with Gatsby and React Leaflet
• How to build a mapping app in React the easy way with Leaflet

In this article, I'll discuss how a small tech team found itself in the middle of a national emergency in Spain. And what their use of git revert can teach us about dealing with COVID-19 in our personal lives.

Intro

It was late in the afternoon of Wednesday 11th of March 2020. There were a few of us left in the office in the centre of Madrid as we got notified to take our laptops with us home today. Starting the day after we were to work remotely until further notice.

Two days earlier the government had closed all schools and universities because of the Coronavirus emergency. There was a lot of uncertainty, and things were changing at a fast pace. None of us really knew what was going to happen next.

The mood became sombre as we packed our stuff. We started making grim predictions about how long it would be before we came back. Little did we know that we were a few days away from a declaration of a nation-wide state of emergency. And that at the time of writing we are still weeks away from going back to that office in the centre of Madrid.

I want to share with you this article in two sections. The first a quick tour of how my team found itself at the centre of this national emergency. To give you an idea about how we reacted.

But in essence, I'm sharing this with you because I found a valuable lesson in that response for my personal life. And I'm hoping you too might find some value in it as we all deal with this worsening COVID-19 crisis and the changing world around us.

At the heart of all of this is a little checkbox titled "Revert".

_Photo by [Unsplash](https://unsplash.com/@martinsanchez?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Martin Sanchez / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

In the eye of the hurricane

I'm a front-end developer at Lola Market. It's a Spanish startup based in Madrid. Our business is offering a platform for online grocery shopping. Users can do their grocery shopping online from a wide selection of markets and supermarkets. Their orders then get sent to shoppers who can deliver it to their doorstep within an hour.

This has suddenly become an essential service right now. If you are reading this and you are one of the millions that are currently on lockdown because of the coronavirus I don't need to explain to you why. But for posterity, I will. Believe it or not, this will all soon pass, and there will come a moment when it's not as evident as it is now.

Once the Spanish government declared the state of emergency the entire country went into lockdown. People were no longer allowed to leave their homes except for essentials.

Certain groups were in total quarantine which doesn't allow them to leave the house at all. This includes people who have any COVID-19 symptoms. Those who had contact with anyone who tested positive. Or people in high-risk groups.

In light of all this, getting shopping ordered online and delivered to the home stopped being a convenience. It was now a necessity for many people.

Lola Market, on the eve of the declaration of the state of emergency, was still a small startup. I have been there for nearly two years during which time we have seen steady and impressive growth.

We had changed offices a year ago and almost doubled in number. But we were still barely 40 people in total. The tech team is made up of 11 people, 8 of whom are developers. Our customer care team is even smaller.

The CEO only a few weeks earlier was talking about getting ready for the moment of exponential growth that we were working towards. But we had no idea that a worldwide pandemic was going to catapult us there so soon at this vertiginous speed.

The flood

Once the state of emergency was declared, we instantly started breaking all sorts of records. We watched as the number of orders exploded.

At first, all went well. But the numbers kept growing and growing. By the second week of the lockdown, the demand had exceeded everything that could be handled.

Customer care department was overwhelmed with thousands of emails and calls. Operations were struggling as supermarkets suffered serious shortages, long lines, early closures, and a lot of restrictions. As well as not having enough shoppers to cover the demand.

And our tech infrastructure started to suffer under a pressure that wasn't just coming from a huge increase of traffic. But also because the tools we had were being used in an atypical manner that didn't follow what we were used to with our usual user before the emergency. The entire country was stressed and under pressure. Everyone needed to cover their essentials.

One has to count their blessings though. Personally I was grateful to be in this situation. All around me people were losing their jobs in a blink of an eye.

And it wasn't just that we had a job to go to, it was that our job gave us the sensation that we are contributing to relief in a state of emergency. Even if it was in the smallest way possible. It gave us a purpose and made what we are doing worthwhile. And that's more than one could ask for in a dire situation like this.

The shift

Pretty early on, we had a meeting and our CTO told us how we needed to shift our priorities and respond to the sudden change.

We were in the middle of an important sprint finishing off the last projects of the quarter. But most of those projects were no longer a priority. The sprint needed to be suspended as we started dealing with the more urgent matters coming up.

In the first week, we needed to figure out ways to help out the rest of the team in other departments to deal with the great volume they were facing.

Even something as simple as moving a menu in an internal tool to be easily accessible could save hours of work when you are dealing with so much sudden demand. But by the second week, we had even more serious issues to deal with to be able to absorb and control the surge in demand on our infrastructure.

The changes

Over these last few weeks, we've had to implement a lot of changes on the fly to deal with this ever-changing situation. Some of the things entrusted to the tech team to solve included:

• Showing dynamic and clearer information to our users about the situation and about the state of their orders.
• Simplifying and automating parts of the process of on-boarding new shoppers to speed up the process and help meet the demand.
• Trying to show more realistic availability of delivery time slots.
• Big improvements and optimisations of infrastructure, performance, customer care tools, operations tools, and the shopper app.
• Automation of many internal tasks, especially those that have become repetitive.
• Making the API load lighter.

Disclaimer: This is a personal article and not an official statement from the company. At the time of writing we are still in the thick of it. Some changes are already deployed. Others we are still implementing. And the situation is constantly changing.

_Photo by [Unsplash](https://unsplash.com/@glenncarstenspeters?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Glenn Carstens-Peters / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

The emergency list

You can imagine that working in such circumstances is a challenge for any team, let alone a team of such a small size. It has been stressful and exhilarating in equal parts.

But I'm lucky to work with such a positive team. Especially the 4-person back end squad who dealt stoically with moments of complete meltdown and figured out solutions at an astonishing speed.

This brings me to the element that connects the two sections of this article: the emergency list.

To deal with all these tasks, and the constant shifts, we created an emergency list. It's a simple list of tasks in a Notion table. As the situation evolved the list kept on growing and the tasks kept altering in priority.

The most important part of that list for our story here is the column titled "Revert". The column contains a checkbox next to each task. It is this little checkbox that resonated with me and gave me an idea about how I should be dealing with this crisis on a personal level too.

Revert

We use the "Revert" checkbox to indicate clearly if this is a task that should be reverted once this is all over or not.

If the revert checkbox is checked it means it's a task that we are doing now to solve a specific problem that, once the crisis is over and we're back to normal, we'll need to revert.

This is something that only has value in this emergency and its context. It serves a purpose now, but will no longer be needed later. Many of these changes will, in fact, be downright harmful once the emergency passes.

If this checkbox is unchecked, it means that whatever we are changing is staying after the crisis is over. It's something that we knew all along we needed to do but hadn't come around doing it. But because of this situation has become a priority.

Or it's something we didn't see and it's become obvious now. These are things to help us scale better, and improve our service in general. They are things that are settling a technical debt that has become vital to pay. They are improvements to our codebase, our infrastructure, or our processes that are beneficial in the long run and not just for now.

What we are doing is we are thinking of the future, of what happens once all this passes. Because it will. And life will go back to its natural course. We will be changed, and the world around us too. But life will carry on.

A pandemic that most of us weren't prepared to face created havoc in our lives and our businesses. But we cannot permit this crisis to create total chaos in our lives afterwards too. We should be prepared for the time it all passes.

Applying the revert to our personal lives

So how does any of this relate to our lives as we deal with this COVID-19 world we're living in and its aftermath?

Simply put, we all need a revert checkbox. We need it next to the many changes we are applying to our lives. Changes we are applying to deal with the virus, with our jobs, with our families and the world at large as we navigate this unprecedented situation.

For me, I'm keeping a similar kind of list for my personal life. We can all have a list like this one. Document it the way you know best. Whether it's a written list, a mental list or any other type of documenting you usually use. It doesn't matter. What matters is to have that "Revert" checkbox.

As we all grapple with this extraordinary situation and all the fear, hardship, uncertainty, and even tragedy it brings with it. We all have a list of things we are doing born out of this emergency.

We need to keep clear what needs to be reverted later and what needs to stay. We are very quick to form habits. Many of us have already spent a month indoors. Many more will follow suit soon as this thing keeps spreading. We can't even tell how long we are going to be in this situation.

So we need to keep that revert checkbox as prominent as possible.

We need to examine the list of changes that we are applying to our new reality.

If it's something that is improving us and our lives, keep that checkbox clear. Maybe you realised you should call your Mum more often. Or nurture your old friendships. Or spend more time with your kids. Or never take for granted the hugs you can give to your grandparents.

Maybe it's something as simple as being thankful that you can have a beer with your friends. Or listening to a busker on a busy street corner on your way back from work.

Mark those as habits to keep. Things to continue working on and improving after this passes.

But for anything else, all those things that will not be helpful after. We need to check the "Revert" box.

All the things that are helping us survive an ordeal, helping us cope with this, deal with it. All the fears that are important to keeping us on our toes and staying safe. All the extra precautions. The distancing. The little things we are allowing ourselves. The indulgences. The excesses. All those things that will quickly become harmful to us in a life after COVID-19.

For those make sure you check the "Revert" checkbox with a big fat green marker. ✅

Once this is over, it'll be time to revert. Time to undo all that and move forward.

Outro

Thank you for reading. I hope you and your loved ones stay safe and that life returns to normal for all of us very soon.

And good luck with your revert checkboxes.

Update: The original NovelCOVID API v1 endpoint has been deprecated. Please update and use the following instead: https://corona.lmao.ninja/v2/countries

Author’s Note: This is meant to be a demo and proof of concept for putting together an impactful mapping application using real life data. For complete and accurate analysis, please make sure to use tools like Johns Hopkins University dashboard. Stay home and be safe! ❤️

• What are we going to build?
• What do we need before we get started?
• Step 1: Cleaning up some unneeded code
• Step 2: Fetching the Coronavirus data
• Step 3: Transform the Coronavirus data into a geographic data format
• Step 4: Adding the Coronavirus data to the map
• What else can we do?
• Be safe and stay informed
• Want to learn more about maps?

What are we going to build?

We’ll be putting together a mapping application that uses an API containing recent Coronavirus statistics and maps out the locations and impact each country is facing.

Coronavirus map dashboard demo

On the map, we’ll show a marker for each country with the number of confirmed cases. On top of that, we’ll include a little popup tooltip that shows more in depth information.

The map we’ll build will mostly look like the above, but will look a little simpler. We’ll utilize the OpenStreetMap public tileserver instead of using a custom Mapbox

To get started, we’re going to use this Leaflet Gatsby Starter I created to make the initial setup a little smoother. With our app bootstrapped, we’ll fetch our data and add markers to the map with our data.

Woah, a mapping app?

Yup. If you haven’t played with maps before, don’t be discouraged! It's not as bad as you probably think. If you’d rather start with mapping basics, you can read more about how mapping works first.

What do we need before we get started?

If you followed along with my previous tutorials for building a Santa Tracker or creating a Summer Road Trip map, you can follow the same steps to get started. If not, we’ll want to make sure we have the following set up:

• node or yarn - I'll be using yarn, but you can substitute with npm where appropriate
• Gatsby’s CLI - yarn global add gatsby-cli

If you’re not sure about one of the above, you can try checking out the beginning my previous tutorial.

We’ll also want to set up a foundation for our map. We can do this by utilizing the Leaflet Gatsby Starter I put together that provides us a basic setup with Leaflet and React Leaflet.

gatsby new my-coronavirus-map https://github.com/colbyfayock/gatsby-starter-leaflet

Creating a new Leaflet Gatsby app in the terminal

After that’s finished running, you can navigate to the newly created project directory and start your local development server:

cd my-coronavirus-map
yarn develop

Starting your Gatsby app in the terminal

If all goes as planned, your server should start and you should now be able to see your basic mapping app in your browser!

New Leaflet Gatsby app in the browser

Follow along with the commit!

Step 1: Cleaning up some unneeded code

The Gatsby Starter we're using to spin up this app comes with some demo code that we don’t need here. We’ll want to make all of the changes below in the file src/pages/index.js, which is the homepage of our app.

First, let’s remove everything from the mapEffect function. This function is used to run code that fires when the map renders.

// In src/pages/index.js
async function mapEffect({ leafletElement } = {}) {
  // Get rid of everything in here
}

We’ll also change the variable name of our leafletElement simply for being able to more easily understand the code as we write it.

async function mapEffect({ leafletElement: map } = {}) {
}

Next, we don’t want a marker this time, so let’s remove the <Marker component from our <Map component:

<Map {...mapSettings} />

Now that we have those pieces cleared out, we can remove all of the following imports and variables from the top of our file:

• useRef
• Marker
• promiseToFlyTo
• getCurrentLocation
• gatsby_astronaut
• timeToZoom
• timeToOpenPopupAfterZoom
• timeToUpdatePopupAfterZoom
• ZOOM
• popupContentHello
• popupContentGatsby
• markerRef

After, our map should still work, but not do anything.

New mapping app with nothing going on

Follow along with the commit!

Step 2: Fetching the Coronavirus data

For our app, we’re going to use the NovelCOVID API. Particularly, we’re going to use the countries endpoint to fetch the list of our countries and the stats associated with them.

For making requests, I personally like to use axios as it has a nice to use API. If you want to use fetch or your own favorite request library, substitute that in for this step.

We’ll start by installing axios:

yarn add axios

Once that installs, remember to restart your server.

Import the axios package ta the top of our pages/index.js file:

import axios from 'axios';

Next we’ll actually make our request. Inside our mapEffect function, let’s try to make a request to the API endpoint:

async function mapEffect({ leafletElement: map } = {}) {
    let response;

    try {
      response = await axios.get('https://corona.lmao.ninja/v2/countries');
    } catch(e) {
      console.log(`Failed to fetch countries: ${e.message}`, e);
      return;
    }

    const { data = [] } = response;
}

In this snippet, we’re doing the following:

• Setting up a response variable that will allow us to store the response
• Adding a try/catch block that will catch any API errors if the request fails
• If the request is successful, we store the response in the response variable
• If the request fails, we console log out the error and return out of the function so we don’t continue to run the code with a failed request
• Once we have our response, we can destructure data from the response and set the default value to an empty array, as that will be the type of data we need

After that’s set up, we can console log out the data object and we’ll see our data successfully fetched!

Logging the Coronavirus location data to the browser console

Follow along with the commit!

Update: The previous commit includes a link to the original NovelCOVID v1 API endpoint which has now been deprecated. Please use this instead: https://corona.lmao.ninja/v2/countries.

See updated commit.

Step 3: Transform the Coronavirus data into a geographic data format

Now that we have our data, we can transform it into a geographic data format, particularly GeoJSON, that will allow us to interface with Leaflet.

Let’s start by adding this block of code:

const { data = [] } = response;
const hasData = Array.isArray(data) && data.length > 0;

if ( !hasData ) return;

const geoJson = {
  type: 'FeatureCollection',
  features: data.map((country = {}) => {
    const { countryInfo = {} } = country;
    const { lat, long: lng } = countryInfo;
    return {
      type: 'Feature',
      properties: {
       ...country,
      },
      geometry: {
        type: 'Point',
        coordinates: [ lng, lat ]
      }
    }
  })
}

So what are we doing here?

• We create a new constant called hasData that checks if our data variable is an array and has data
• If we don’t have data, we want to return out of the function, as we don’t want to try to add data we don’t have
• We create a geoJson object that will be our GeoJSON document
• Our document is of type FeatureCollection and as our features we loop through our dataset
• For each country in our data, we obtain the lat and lng to create a point for our map
• We additionally add our country data as properties so we can access it within our mapping APIs

If you console.log this object our into your browser and copy the contents, you can paste this into geojson.io and see the location data show up correctly.

Previewing Coronavirus location data on geojson.io

With this GeoJSON document, we'll now be able to add it to our map.

Follow along with the commit!

Step 4: Adding the Coronavirus data to the map

We have our GeoJSON document with our location data, so let’s add it to the map.

Let’s start with this code block. It's a long one, but we’ll break it down piece by piece:

const geoJsonLayers = new L.GeoJSON(geoJson, {
  pointToLayer: (feature = {}, latlng) => {
    const { properties = {} } = feature;
    let updatedFormatted;
    let casesString;

    const {
      country,
      updated,
      cases,
      deaths,
      recovered
    } = properties

    casesString = `${cases}`;

    if ( cases > 1000 ) {
      casesString = `${casesString.slice(0, -3)}k+`
    }

    if ( updated ) {
      updatedFormatted = new Date(updated).toLocaleString();
    }

    const html = `
      <span class="icon-marker">
        <span class="icon-marker-tooltip">
          <h2>${country}</h2>
          <ul>
            <li><strong>Confirmed:</strong> ${cases}</li>
            <li><strong>Deaths:</strong> ${deaths}</li>
            <li><strong>Recovered:</strong> ${recovered}</li>
            <li><strong>Last Update:</strong> ${updatedFormatted}</li>
          </ul>
        </span>
        ${ casesString }
      </span>
    `;

    return L.marker( latlng, {
      icon: L.divIcon({
        className: 'icon',
        html
      }),
      riseOnHover: true
    });
  }
});

So what are we doing here?

• We create a new instance of L.GeoJSON which will transform our GeoJSON document into something Leaflet will understand
• Inside that instance, we define a custom pointToLayer function. This allows us to customize the map layer Leaflet creates for our map
• In our function, we assign and create our datapoints that we want. Most of it is destructuring, but we format the cases count to show 1k+ instead of 1000 and a formatted date instead of the timestamp
• We create an HTML string block which is used to define our map marker that will be added to the map. This also includes the HTML for the tooltip that will pop up when hovering over a marker
• We return L.marker with our custom configuration that includes a class of icon for the container and our custom HTML.
• Additionally, we add the riseOnHover property so when hoving over a marker, it surfaces itself above over the other markers on the map

We also want to add a bit of CSS here so that we can make sure our markers show up in the map and are usable. Let’s add this snippet to our assets/stylesheets/components/_map.scss file:

.icon-marker {

  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  color: white;
  width: 3.6em;
  height: 3.6em;
  font-size: .7em;
  font-weight: bold;
  background-color: $red-800;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(black, .9);

  &:hover {

    .icon-marker-tooltip {
      display: block;
    }

  }

}

.icon-marker-tooltip {

  display: none;
  position: absolute;
  bottom: 100%;
  width: 16em;
  font-size: 1.4em;
  padding: 1em;
  background-color: $blue-grey-900;
  border-radius: .4em;
  margin-bottom: 1em;
  box-shadow: 0 3px 5px rgba(black, .9);

  &:before {
    display: block;
    position: absolute;
    bottom: -.6em;
    left: 50%;
    content: '';
    width: 1.4em;
    height: 1.4em;
    background-color: $blue-grey-900;
    transform: rotate(45deg);
    margin-left: -.7em;
  }

  h2 {
    font-size: 1.5em;
    line-height: 1.2;
    margin-bottom: .1em;
    margin-top: 0;
  }

  h3 {
    font-size: 1.2em;
    margin: .1em 0;
    font-weight: normal;
    color: $blue-grey-100;
  }

  ul,
  p {
    font-weight: normal;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: .6em 0 0;
  }

}

What we’re doing:

• We create our round markers using the .icon-marker class and set up our .icon-marker-tooltip class to show up when hovered over
• Our .icon-marker-tooltip class is hidden by default, as it’s our tooltip, but we position it absolutely to appear over top of our marker and formatted the way we want it

And finally, once we have our geoJsonLayers created with our styling added, we can add it to the map!

geoJsonLayers.addTo(map)

Map with Coronavirus location data

Now you might be wondering why it doesn't appear to be centering properly. Go ahead and change the LOCATION variable at the top of the index.js file to:

const LOCATION = {
  lat: 0,
  lng: 0
};

Once that’s set, when the page reloads, the map should be centered in the middle of the world!

Map with Coronavirus location data centered with a tooltip

Follow along with the commit!

Yay, we did it! ?

If you followed along, you now have created your own Coronavirus map dashboard that gives some quick stats about the cases around the world.

Take what you learned and run with it. You can apply this to any other type of data that you can imagine.

What else can we do?

Add more styles and a custom basemap

In my original demo, I set up a custom basemap using Mapbox that allows me to have a dark background making the markers easier to see.

Creating a new basemap in Mapbox Studio

Mapbox is great and has a nice free tier if you’re interested in getting started.

Once you have a Mapbox account, you can even copy the style I used and make it your own.

Basic Dark Mapbox Theme

To learn how to integrate it, you can try to check out the source code of my original demo:

https://github.com/colbyfayock/coronavirus-map-dashboard

Add overview dashboard stats

Dashboards with maps like the Johns Hopkins University app allows us to see more than a look on the map, but a glimpse at quick stats about the cases around the world.

Johns Hopkins University Coronavirus Map Dashboard - March 29, 2020

The NovelCOVID API has more endpoints like /all that provide a few global stats.

Be safe and stay informed

I want to reiterate that you should make sure you're staying up to date using official sources for information, such as the Johns Hopkins University dashboard. Though the data should be reliable, it should also be considered a proof of concept for building a map and referencing, but shouldn't be considered for any kind of statistical analysis.

Please take care of yourself during these times. We're all in this together! ❤️

Want to learn more about maps?

You can check out a few of my other resources to get started:

• Anyone Can Map! Inspiration and an introduction to the world of mapping
• How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter
• How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
• How to Create your own Santa Tracker with Gatsby and React Leaflet
• How to build a mapping app in React the easy way with Leaflet