COVID-19 Data Visualization

TutorialDevelop a bar chart race application with NodeJS, TypeScript, & LightningChart JS

Get the project template

TABLE OF CONTENTS

Visualizing COVID-19 cases in a bar chart race visualization

COVID-19 (Coronavirus) pandemic is still threatening the lives of millions of people, all over the world. Vaccinations have started, hopefully, they will continue their steady positive global effect.

With this Bar Chart Race, we show how different countries have diagnosed and reported COVID-19 infected people counts during the pandemic, and for this article, we will use the LightningChart JS bar chart shows you how to create a COVID-19 visualization of the confirmed cases around the world but, we will add some more features (increased, reorder and counting animation).

Also, for this chart, we will use the data taken from the COVID tracker API.

https://coronavirus-tracker-api.herokuapp.com/confirmed

This data is real, so this chart will be useful for you in case you need to work with COVID-19 information.

In this exercise, we will consume data from the Coronavirus Tracker API and from a local JSON file.

zip icon
Download the project to follow the tutorial

COVID-19 Bar Chart Race Project (.ZIP)

Project overview

In an effort to track the virus number of cases worldwide and ensure that people are safe, many organizations have developed custom charts to visualize their data.

Here’s the example that we’ve developed, a racing bar chart. This type of chart displays the number of cases over time as the position of the countries in the chart varies according to the number of cases. This makes it easy to see the development of the countries in terms of the number of cases they have registered.

Configuring our template

  • Please, download the template provided in this article.
  • Once opened in Visual Studio Code, you will see a file tree like this one: File tree of the COVID-19 data visualization project in Visual Studio Code

    As you can see, we only have a JSON data file and the COVIDCHART typescript file.

  • Please, open a new terminal.

  • As usual in a Node JS project, we will have to run our NPM Install command.

    • This would be everything for our initial setup.

    Lets's code.

JSON file

  • In our covid.json file we will see the following structure:

    The structure of the covid.json file where the data are stored to create the COVID-19 visualization

    • Members: Root node that will be used in our typescript code to take the members within.

    • Country: Name value for all the countries selected in this file.

    • History: Date and numeric values of covid cases (by day).

    The structure of the covid.json file where the data are stored to create the COVID-19 visualization

    In case you want to add more data to this file, you can take the data from here:

    https://coronavirus-tracker-api.herokuapp.com/confirmed

COVIDCHART.ts

Inside this file, we will have all the logic needed to create our chart, configure animations, and format the data.

  • Import JSON data file.

  • Declare the constant lcjs that will refer to our @arction/lcjs library.

  • Extract required classes from lcjs.

    Extracting the required classes from lcjs (LightningChart JS) to create the COVID-19 bar chart data visualization

  • Now we will declare the following constants:

    Declaring the constants to manipulate the behavior of the bar chart race

    • Those values will affect the behavior of our chart, so declare them now and use them as global values, would be easier for any update in our chart.

    • rectThickness: This will affect the thickness of all bars in our chart. With a higher value the bars will be thinner and vice versa (the value can be float).

    • rectGap: will affect the position of the labels and numbers of each bar.

    • Duration: This would be the acceleration time of all our bars. If you specify a minor value, the bars will load the values faster.

  • Configuring the chart object: Before to create the chart, we need to configure the main properties.

    Configuring the main properties of the bar chart

  • Ls.ChartXY: We specified that we want to create an XY chart type.

  • setTitle: text that will be displayed as title in the top of our chart. The value is a string type, so you can construct a string value dynamically.

  • setAutoCursorMode: Set chart AutoCursor behavior, by selecting a preset option from AutoCursorModes.

    Read more:

    https://lightningchart.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setautocursormode

  • setPadding: Number with pixel margins for all sides or data structure with individual pixel paddings for each side. Any side can be omitted, only passed values will be overridden.

    Read more:

    https://lightningchart.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setPadding

  • setMouseInteractions: This Boolean value will enable all mouse interactions that can be supported by the chart in construction.

    Read more: https://lightningchart.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setmouseinteractions

  • getDefaultAxisY/AxisX: Get reference to the default Y Axis of the ChartXY. This will always return reference to the Y Axis that is closest to the chart (starting from bottom). All methods below [getDefaultAxisX] will affect only the X axis. (Same logic in case you need to reference to Y axis [getDefaultAxisY]).

    Read more:

    https://lightningchart.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html#setmouseinteractions getDefaultAxisY/AxisX to return the reference to the Y Axis

  • setTickStrategy: The TickStrategy defines the positioning and formatting logic of Axis ticks as well as the style of created ticks.

    Read more:

    https://lightningchart.com/lightningchart-js-api-documentation/v3.4.0/classes/axis.html#settickstrategy

  • setAnimationScroll:Specifies zoom animation to use.

    Read more:

    https://lightningchart.com/lightningchart-js-api-documentation/v3.4.0/classes/axis.html#setanimationscroll

  • createTickLabel: in this function, we will declare the label properties for all our bars:

    Using the createTickLabel function to declare the label properties of the bar chart

  • addCountryHandler: the function returns single bar with property of dimensions, data(entry) and label.

    The addCountryHandler function is used to return single bars with property of dimensions

    Each country has its own rectangle series for different style:

    Adding single rectangle series to each country

    Add TextBox element to bar:

    Adding the TextBox element to the bars

    Set label title and position:

    Establishing the title and position of the label in the bar chart race

    Set interval for Y axis:

    Set interval for Y axis

    Increase value of Y variable:

    Increasing the value of the Y variable

    Return Figure:

    Return figure

  • addCountries: The function will work as a loop, executing the [addCountryHandler] function for each bar.

    The addCountries function will work as a loop for adding bars

  • sortCountries: The function will sort all data by date.

    Inside the “data” parameter , we will have all values inside the “members” element. The “raceDay” parameter will work as an initial value where our chart will begin. “raceDay” will use the value from the variable “initDay” (15). The result will be returned inside the “countryList” object.

    The sortCountries function will sort all the data by date

  • startRace: this function will orchestrate all previous functions that we declared. This function will be executed for the “startRaceHandler” function.

    The startRace function will arrange all the previous functions

  • startRaceHandler: Here we will send the JSON data to the [startRace] function. We will start making an HTTP request (fetch), to get COVID data provided by LightningChart. This data was gotten by the CORONAVIRUS Tracker API.

    The result will be sent to the [startRace] function. If the request fails, the JSON file will be taken as data source.

    Sending the JSON data to the startRace function

    Inside of [startRace], we will use the function [mergeData]. Some countries are divided by region, and it is needed to merge them. This applies more for data provided in real time.

  • The last step would be to create the chart object and send this to [startRaceHandler].

    All previous methods will be contained inside [startRaceHandler].

    Creating the chart object

    We can then specify the theme (Look and Feel) that works best for us.

    Read more about themes variations:

    https://lightningchart.com/lightningchart-js-api-documentation/v3.4.0/interfaces/themes.html

NPM Start

The explanation and project are ready.

The last step is to run our project. As the other articles, we just need to run the command “npm start” in our terminal.

As we can see, the start race function will control the speed and the automatic classification of each bar. The countries will move up and down, based on the number of COVID cases.

The Theme feature can change the perception of the chart, so I recommend trying all the options provided by Lightning Charts.

Conclusion

A bar chart can be a basic but very useful tool for understanding and displaying statistical data.

Many times, we decide to use office software, instead of experimenting with the use of programming libraries, because it can be complex for many of us.

In this exercise, it was demonstrated in a fairly simple way, how to implement a graph with animations that help to dynamically understand the situation that is being studied (in this example, the COVID cases in the world).

I invite you to try downloading this project and experience it on your own.

Similarly, I invite you to experiment with the various themes (UI) that Lightning Chart provides us.

Finally, I would like to mention that this type of chart can be used in mobile applications, web applications, and desktop applications.

The possibilities are many and could help you offer a completer and more professional product.

If you're interested in developing desktop applications, please check the previous article: Develop a cross-platform medical electrocardiogram (ECG) application with Electron JS.