COVID-19 Data Visualization
TutorialDevelop a bar chart race application with NodeJS, TypeScript, & LightningChart JS
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.
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.
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:
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.
In our covid.json file we will see the following structure:
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).
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
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.
Now we will declare the following constants:
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.
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.
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.
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.
setMouseInteractions: This Boolean value will enable all mouse interactions that can be supported by the chart in construction.
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]).
setTickStrategy: The TickStrategy defines the positioning and formatting logic of Axis ticks as well as the style of created ticks.
setAnimationScroll:Specifies zoom animation to use.
createTickLabel: in this function, we will declare the label properties for all our bars:
addCountryHandler: the function returns single bar with property of dimensions, data(entry) and label.
Each country has its own rectangle series for different style:
Add TextBox element to bar:
Set label title and position:
Set interval for Y axis:
Increase value of Y variable:
addCountries: The function will work as a loop, executing the [addCountryHandler] function for each bar.
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.
startRace: this function will orchestrate all previous functions that we declared. This function will be executed for the “startRaceHandler” function.
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.
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].
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
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.
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.