How to design a React component similar to WHO Coronavirus Disease (COVID-19) Dashboard?

Question

I want to design a map component similar to

WHO Coronavirus Disease (COVID-19) Dashboard map component. for a particular country, where different regions can be selected based on a prop.

WHO Coronavirus Disease (COVID-19) Dashboard

any references or guidance would be much helpful. I have no clue to do it. don't downvote it

Answer 1

First of all, you will need a Chart library like https://d3js.org/ to be enable to plot the graphs. I found D3js to be the most flexible amongst all the libraries.

Then you can integrate the data from your database to the plotting methods provided with the library

Examples of D3js plots:

1. https://observablehq.com/@d3/bubble-map
2. https://observablehq.com/@d3/spike-map

Other Plotting libraries

1. Google Charts: https://developers.google.com/chart/interactive/docs/gallery
2. Highcharts: https://www.highcharts.com/demo/maps
3. JS charting:https://jscharting.com/examples/chart-types/geographic-map/
4. Plotly: https://plotly.com/javascript/