Share your repls and programming experiences

← Back to all posts
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.

Commentshotnewtop
MatthewDoan1 (295)

omg anthony is back yayayaya

vishal1999tk (11)

Damn, that's a really cool looking design and colors :O

mkhoi (226)

Love the style of this website!

AlephZero (307)

Wow, awesome! The design is really cool.

Coder100 (1197)

Nice work!
Only thing though:
Please DON'T USE MARQUEES!
Makes your website's age go from 2 minutes old to 10,000 millennia lol
(It's deprecated in favor of CSS)

SilentShadowBla (498)

just a quick question how else would you do it? Using an animation, can you explain how it would work? thx @Coder100

Anthony_Tonev (94)

@Coder100 it's temporary - I'm trying to recreate in js today. This old marquee tag is such a mess express full of bugs..

Coder100 (1197)

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

Anthony_Tonev (94)

@Coder100 Yes this works but I think I will use a js solution so I can control it more. However I'm not sure if I can implement anything right now since my work for the past hour got erased after repl plugin crash.... I have the bad feeling that marquee tag will stay for now. Will try again later.
EDIT: added js solution. Now it is time to add control on speed and pause.

[deleted]

seriously!!! how can people program seriously hard things i don't even care about the out put but the code itself is impressive there is like 2 lines of code and..... by the way i am a beginner so it looks like a lot to me.

AlephZero (307)

@CreeperKING112 It may take some time, but I'm sure you'll be able to write complex code soon enough 🙂 The most important thing is practice.

Anthony_Tonev (94)

@CreeperKING112 learn fundamentals of algorithms and how to read documentations. As @AlephZero sayed - practice is key. Just focus on one language - solve problems and work on personal projects but don't try to sell these projects - think of them as a sketch study for the real painting. Once you solve a lot of problems and build enough toy projects, you will notice a pattern and next problem/project you will be solving/building is one you have solved/build several times before but in a slightly different way.