From YouTube
Today, we're going to talk about how to make COVID-19 cases map.
First, we should install the node.js. Node.js is a JavaScript running environment based on the Chrome V8 engine.
Here is the cmd window, and after we input the path, we can find that we have done install the node on the computer. The next step is to open the code. This is our program.
Let's see the data we have prepared. This is administration district data.
For example, these are the center point and name of countries.
In the countryRegion.js, there are coordinates from each region of each country. For example, this is data from Russia.
There are the coordinates of each province in China. This is the region of Macau.
This is the Novel Coronavirus Cases data.
First, in ncp.json, It’s the statistics data from each province of China in two months. They are the cases data on March 23rd, 22ndand 21st.
This is the Novel Coronavirus data all over the world. This is the data except for China. This is Chinese; this is Italian, and so on.
And then, under the path of src/components/data, this is the name of each country in English and in Chinese.
This is population data, which is used to calculate the incidence rate.
This is the center point data of the province in China, including properties and geometry information. And geometry information includes coordinates and types; properties include population and name of each province.
This is a Chinese English comparison of each province.
We're done with the data.
Next, This is the main page named index.html. On this page, we quote the data that we showed. In app.jsx, we can see the code that implements the main functions is from application.jsx.
We're done with the code.
In the package.json, we can find it quote the dependent libraries from node modules. So before running the program, we should Install the node modules.
we can input the command- npm install. After we finished, we can see the node modules folder under the project content. We can run the program by inputting command- npm run dev.
After the program runs successfully, we can find the main page in English. There is risk level map. Under the page, we can see the histogram in two months. And this is new confirmed cases map in China. They are the current confirmed cases. This is a reported incidence map.
In the histogram, we can click the button to control the display of local cases(Hubei), local cases (outside Hubei) and overseas imported cases. We can control the duration time by dragging the control buttons.
This is a global map; we can zoom in and zoom out and pan the map. We can click to see the number of New confirmed from a country. This page is the cumulative confirmed map in the world. And this page is a reported incidence map.
We can also switch the language by clicking this button. After switching, we can see the text in this page has been switched to Chinese successfully.
If you want to change another language, you need to prepare data in different languages first. This is countriesNameEn.js include Spanish English comparison data. All data are in English on the left, and in different languages on the right.
This is the description on the page includes title, headlines, and so on.
This is the province data of China, which also needs to be modified. On the left is the English name, and right is the Spanish name.
Use these Spanish files to replace the same files. After we replace these files, refresh the page again. We can find it changes to Spanish. When you zoom in, you can see the Spanish names of different countries. All the text on this page is in Spanish.
Finally, if you use the data of your country to make the Novel Coronavirus Cases map, pay attention to modify the map center to your location. In the mapmanger.js, you can modify the point of the center. And then you can refresh the page. We can find that it had been modified.
