jay/coronamap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
coronamap/README.md
7ae ef8e11cd98
Reupload
2022-08-06 08:09:54 -07:00

2.6 KiB
Raw Blame History

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