Interactive thematic map with a time slider to show a snapshot of spread of coronavirus over time https://go.juyoun.gg/coronamap
Find a file
2022-08-06 08:09:54 -07:00
dist Reupload 2022-08-06 08:09:54 -07:00
docs/assets/img Reupload 2022-08-06 08:09:54 -07:00
node_modules Reupload 2022-08-06 08:09:54 -07:00
src Reupload 2022-08-06 08:09:54 -07:00
LICENSE Reupload 2022-08-06 08:09:54 -07:00
package-lock.json Reupload 2022-08-06 08:09:54 -07:00
package.json Reupload 2022-08-06 08:09:54 -07:00
README.md Reupload 2022-08-06 08:09:54 -07:00
tsconfig.json Reupload 2022-08-06 08:09:54 -07:00
webpack.config.js Reupload 2022-08-06 08:09:54 -07:00

Coronamap

Coronamap is an interactive thematic map that animates the spread of the coronavirus.

Check out the deployment.

Coronmap on laptop Coronamap on phone

Preview

Coronamap preview

Disease data: Johns Hopkins CSSE (https://github.com/CSSEGISandData/COVID-19)

Date Slider

The date slider consisting of several form controls, as follows
  • Right-pointing triangle button: Play
  • Left-pointing triangle button: Reverse
  • Right-pointing double triangle button: Move to the next day
  • Left-pointing double triangle button: Move to the previous day
  • Button with circular arrow pointing in a clockwise direction: Loop
  • Range input type positioned to the middle: Date progress bar
  • Range input type labeled with fps value and a clock icon to the left: Playback speed

Colored Geographical Areas

A yellow to red gradient color ramp legend labeled with the range of infected cases

The yellow-orange-red sequential color scheme shows the number of infected cases.

Circle Markers

The size of a circle marker scales to the number of deaths.

Getting Started

Prerequisites

  • Node.js
$ yum install nodejs
$ yum install npm
  • Install npm packages
$ npm install

Development

  • Watch for updates to code and compile automatically: npm run develop
  • Build the optimized production: npm run build
  • Run all unit tests: npm run test