Coronavirus Map and Broadcast Repl.itDiscordCJ#9 JAM #9
Anthony_Tonev (94)

Map that shows virus related data for each country on hover. Broadcast information on click and restricted broadcast station for live broadcasting. No database.

Technology used:svgMap.js, Coronavirus monitor
from rapidapi.com, express.js and socket.io.

MAP:
Colors legend is based on active cases. White:0 active cases (if every country is colored white, this means that the virus is almost dead). Light Red: less cases. Dark Red: most cases (currently this is in Italy so it will be darkest). The country of Kosovo is updated by hand. North Korea has not reported any cases.

BROADCAST:
Selecting a country shows broadcast news on top moving from right to left. Text scrolling can be paused by holding the mouse over it. Global broadcast channel is entered by clicking the top left globe button.
Inside a .env file are the tokens for URL and PASSWORD. They are used to access the broadcast studio page. URL is the name that you give to the END of the url where the studio version is accessed (https://replitdiscordcj9--anthony-tonev.repl.co/broadcast_station).
PASSWORD is then used to login which will unlock a bunch of UI elements that are used to broadcast, erase and download broadcast data. By selecting a specific country - the button will get a suffix with the country code. By clicking it the new broadcast will append at the end of the last one. Erasing will replace the whole broadcast of selected country with '.........'. Operations are updated live - no need of reload. Coronavirus stats are updated daily (require reload). Downloaded file is readable JSON. Lack of database means that content will fall back to hard coded one. Downloading file is the only way to have persistence. It can be assigned to 'rooms' object inside '/public/data/broadcast_data.js'. Currently, I have gathered day by day event documentation of several infected countries for the last two weeks - source Wikipedia.

This is how the broadcast JSON looks https://jsonblob.com/c1f64588-6bbb-11ea-bbd9-09bb890be815

desktop:

phone(poor support):

ui:

dropdown for selecting which transmission to be displayed

On hover pause, on click speed up, on another click pause again, on leave normal speed:

IDEA:
Having all the information on one map (not only the stats but the daily news or even better - history of the measures taken each week in each country. This can give an idea which measures give good results. Now I don't think I'm qualified to present true and useful data like that but what I've tried to create is a tool that can be used by a journalist, blogger or data specialist who can present useful, worldwide information in a easy way.

You are viewing a single comment. View All
Coder100 (1189)

You can with css
Here's a blueprint

@keyframes notmarquee {
  0% { transform: translateX(0); }
  25% { transform: translateX(25%); }
  50% { transform: translateX(50%); }
  75% { transform: translateX(75%); }
  100% { transform: translateX(100%); }
}

Not tested yet, but this hopefully works.
Implement it like this:

element {
  animation-name: notmarquee;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(5, end); /* or: linear */
}

@SilentShadowBla