A multi-threaded Helix showing countries affected by COVID 19.
You can configure and sort the helix with the controls on the right side, resulting in a firework of CSS3 transitions.
This is a perfect performance demo for the webworkers driven UI framework neo.mjs.
- Online Versions
- Preview Image
- Getting Started
- Docs App
- Multithreading
- Navigation Concept
- Attribution
You can find the Online Versions here on GitHub Pages (COVID-19 Helix).
-
Clone this repo to your system to get the project files
git clone https://github.com/neomjs/covid-helix.git
-
Open the checked out top level folder inside your terminal
cd covid-helix
-
Install the required node modules & run all relevant build scripts at once
npm run build-all
-
Make sure to use a local WebServer!
- Use a local webserver of your choice
- OR
npm run server-start
Since this app shell was created using:
npx neo-app
we do get documentation views for our app source code out of the box:
localhost/covid-helix/docs/index.html
In case you want to take a closer look at the workers setup, take a look into the Chrome dev tools Sources:
Your app code will get loaded into the App thread.
- Click on an item to select it. Afterwards you can use the Arrow Keys to walk through the items.
- Hit the Space Key to rotate the currently selected item to the front.
- Hit the Enter Key to expand the currently selected item.
- Use the mouse wheel vertically to zoom.
- Use the mouse wheel horizontally to rotate (e.g. trackpad / magic mouse).
- Care for adding mobile support? Please add your feedback here.
- This App is created using the neo.mjs UI framework.
- Data provided by NovelCOVID/API.
- Icons made by Freepik from www.flaticon.com.
Build with ❤️ in Germany.
Copyright (c) 2020 - today, Tobias Uhlig