Data Visualization for COVID-19 Dashboard Tracker Using AnyChart JS Charts

April 12th, 2021 by AnyChart Team

COVID-19 Dashboard Tracker Using AnyChart JS Charts for Interactive Data VisualizationData visualization has played an important role during the COVID-19 pandemic, allowing governments, scientists, healthcare professionals, and the general public to better understand different aspects of the crisis. There are many illuminating projects all over the web that leverage charts and maps to effectively communicate what the coronavirus statistics have to say. Some of them are using our data visualization tools under a free license provided as part of the special initiative we announced last spring to support the global COVID-19 data analysis effort.

We told you about two examples of such projects earlier: StopCorona and iConcepts SARS-CoV-2 Stats. Now let us introduce you to another interesting resource — COVID-19 Dashboard Tracker by Maxime des Touches. Launched more than a year ago, while Maxime was yet a computer science student, it has turned from a simple online data table into a complex interactive data visualization project offering up-to-date insight into how the pandemic unfolds in France and worldwide.

Maxime kindly agreed to talk to us about his COVID-19 tracker, experience using AnyChart, and the pandemic in general. Check out our quick interview, glance at a few screenshots, and try his open-source dashboard by yourself. (Stack: HTML/jQuery/JSON.)

AnyChart: Hi Maxime! To start with, can you tell our community about yourself in brief? Like, where are you from and what do you do?

Maxime: Hello! My name is Maxime des Touches. I’m from France. Until recently, I studied web development at ENI Ecole Informatique, a computer science school in the city of Niort. Now, I work full-time as a web developer and IT technician at Green IT Solutions.

It’s my passion to create interesting and efficient web projects. So, I am currently focused on deepening my skills in programming languages like JavaScript and PHP. To get as much practice as possible, from time to time I like building websites and tools for personal use.

A: So, how did you come up with the idea of your own COVID-19 dashboard?

M: In March 2020, when the first lockdown measures were introduced in France, I wanted to understand what was going on and keep up with the situation, and I started to look at open data around the Web. Honestly, I thought the crisis would only last for a few weeks. But the situation could not stop worsening…

Many official COVID-19 dashboards I saw looked quite overloaded. Numerous data tables and lines everywhere on the same page. Non-technical people obviously had trouble exploring and understanding it all.

So, I decided to create my own COVID dashboard in line with my point of view on how such things should be represented. At that time, I still was a web development student and it was an interesting challenge for me to create a project like that. I selected the data I considered most important and visualized it in a form that may look quite basic but has proved to be suitable for my friends and family to make sense of all that information.

Coronavirus cases data tables in the Covid-19 dashboard tracker
At first, my project only had one simple table on a plain HTML page, which displayed some basic COVID-19 statistics for France. Then, gradually, I added more data and not only for France but also for the entire world. Now it’s running under the proud name of COVID-19 Dashboard Tracker, representing coronavirus data from a variety of sources such as the Johns Hopkins CSSE, World Health Organization, Our World in Data, Santé Publique France, and more.

Main global data map, combining choropleth and bubble map visualizations, in the Covid dashboard tracker

A: Does the dashboard currently look exactly as you wanted? Is it all done or do you have any updates in mind?

M: I am quite happy about how it looks now. But the project is not completely over as I keep expanding and improving it all the time.

For instance, about a week ago, I added new data about the vaccination campaign.

Vaccination data table in the Covid-19 dashboard tracker.png
I’ve already got more ideas on what else should be displayed on my website. But we have to be careful about the data we show in such projects, not to mention how it is visualized, so it’s not that easy and takes time.

Actually, the main point for one of the next big updates is the mobile version. At the moment, you can display my dashboard on a mobile device and it will work just fine. But I can definitely make it look better and I will, you’ll see.

A: What place does data visualization have in your project?

M: Data visualization is clearly the heart of my project and any project like this one!

You know, displaying complex data is one thing, but providing an intelligible visualization that everyone will understand without much effort is most important.

As I mentioned before, some COVID dashboards are actually too complex for regular people. I’ve done my best to make sure the manner of data visualization in my projects gives a more intuitive understanding of the situation.

Area charts visualizing global data in the Covid dashboard tracker

A: How do you use AnyChart in your COVID-19 Dashboard Tracker? What types of charts appeared to be most helpful?

M: I am using AnyChart as the main charting library to create interactive data visualizations throughout my COVID-19 tracker.

Bubble map from the Covid dashboard tracker
To be exact, your solution is generating bar, area, and donut charts, as well as choropleth and bubble maps. This set of basic data visualization charts appeared to be sufficient to get a well-structured overview of the data in such a dashboard.

Donut charts in the Covid dashboard tracker
As long as my COVID-19 dashboard is connected to APIs with JSON data, I really appreciate how I could quickly set AnyChart tools in an effective way.

A: Please tell us some more about the technical side. What’s your stack there?

M: My project is quite basic, wrapped in HTML, with nothing too fancy behind the scene. It mainly relies on the JavaScript language. Fundamentally, the dashboard is built on the jQuery framework and Ajax requests, taking JSON data from a number of open data APIs.

For a CSS framework, I needed a lightweight one, so I picked the basic W3.CSS framework from W3Schools.

I am also using the Tabulator JS library to display interactive data tables.

A: Was the integration of AnyChart JS charts easy enough?

M: Yes, AnyChart was absolutely easy to integrate.

I am getting the data in JSON format, and my project is based on jQuery. The AnyChart JS library is fully compatible with JSON and perfectly runs with jQuery.

Bar charts in the Covid dashboard tracker

A: Why did you choose AnyChart from all the JavaScript charting libraries out there?

M: I choose AnyChart for its integration simplicity and outstanding documentation. Numerous samples and demos for all visualization types and features also helped a lot to connect my data streams the right way and tune up the information display real quick. As a result, I got my interactive charts and maps up and running without any hassle.

In addition, I especially liked the collection of maps in AnyMap. Choropleth and bubble maps I needed are well-thought-out. The pre-built “Enter full screen” option in the context menu is clearly a good point, too.

A: What do you think AnyChart lacks? What should we work on next to make you and other developers even happier?

M: Well, it’s a hard question for sure. AnyChart is actually offering a complete data visualization solution suitable for every kind of web project, I mean it. Possibly, further improvements could be made to the responsive part, especially in maps, and full mobile integration.

A: When asked by a friend which JS charting library to choose, would you recommend AnyChart?

M: Yes, I will definitely recommend AnyChart to everyone! For the ease of web integration, full support, and comprehensive documentation.

A: Thank you so much! Concluding our conversation: You’ve been carefully watching how the situation unfolds for more than a year now — what are your thoughts on the COVID-19 pandemic and when do you think life will return to normal?

M: The COVID-19 pandemic is something completely new and this is why most of our governments don’t really know how to manage their countries and people the right way. For instance, in France, unfortunately, we are still not in a good way after one year of the crisis. Restaurants, cinemas, and many other local businesses and public places are still closed.

Area charts visualizing data for France in the Covid dashboard tracker
COVID-19 is not only dangerous in terms of health and economic issues. It is dividing us. While a part of the population continues to follow the rules of social distancing and wear a mask, the others are already too tired from the long-lasting lockdowns and restrictions, refusing to respect the shielding and protection measures. Well, we’ll see where it leads us, humans.

In my opinion, we all should be patient, and let’s keep in mind that the perilous virus is invisible and could be everywhere. Vaccination is coming, and I hope that 2021 will be a possible end to the pandemic.


Check out the COVID-19 Dashboard Tracker case study we’ve just published as well and look at other selected case studies.

See more customer stories in our blog.

If you would like to share your AnyChart story, let us know.



No Comments Yet

*