Webrocker Blog

(updated: 20.12.20, see below)

As if doomscrolling the grim news of a world in a pandemic wasn't depressing enough, today I had the idea to add (yet another) visualisation around the numbers of deaths that Covid-19 has caused. This was sparked by the boiling the frog effect that the rising daily numbers of deaths seem to have. Here in Germany today we had nearly 1000 new deaths - in one day. And the number is increasing from week to week, and yet, somehow, the majority of people still seem unimpressed. Imagine a plane would crash, every day, for several weeks, and nobody seems to care.

Well, I planned to hone my skills around querying for data, storing it locally, and do something with it, for quite a while now. The John Hopkins University pushes their data to a git repo, and with a little bit of thinking, some plain php functions and a lot of headscratching and testing, I now can present:

The CoronaDeathToll

I learned a lot today, but the most astonishing thing for me was that adding over some 10,000 html elements as a list will bring the browser to its knees, but using the icons directly as text inside *one* html element will not.

So this:

 // $total = 1600000;
 $skull = '?';
 $html = '<ul>';
 while ( $i < $total ) {
   $html .= '<li>' . $skull . '</li>';
   $i++;
 }
 $html .= '</ul>';
 echo $html;

will be rendered very quickly as html, but the viewing browser will stall while parsing that many nodes.

But this:

 // $total = 1600000;
 $skull = '?';
 $html = '<div>';
 while ( $i < $total ) {
   $html .= $skull;
   $i++;
 }
 $html .= '</div>';
 echo $html;

Update 17.12.20:

Frederic @fhemberger suggested I could use php's own str_repeat() function instead of the while loop.
So now this is a bit more tidy:

 // $total = 1600000;
 $skull = '?';
 $html = '<div>';
 $html .= str_repeat($skull,$total);
 $html .= '</div>';
 echo $html;

:: /update

works fine, at least on my desktop. Which is a pity, since I had planned some nice gimmicks with css and transitions, but of course this would only work if the individual skulls would be represented inside their own html element.

Using them as one text works even when querying the total amount worldwide - currently ~ 1.6 million skulls. But mobile browsers seem to have a problem with the amount of "text" that this produces - even on my relatively new phone, Safari stalled. Strange, this seems to have settled itself, can't reproduce it anymore.

I'm curious what happens tomorrow; my script in theory should fetch the new csv off that git repo, and then has a comparison to today's data… I tested this with the "german" dataset already, this is why, when viewing Germany, there's this info about the difference to the day before, and the "new" skulls are displayed in a slightly different color. If all works as planned, tomorrow all the other coutries also should have some info about the difference to today.

Today started the second "lockdown" here in Germany - I really do hope that this will put an end to the rising numbers which had got out of hand despite the "soft lockdown" that we have here since the beginning of November. Sadly, even when the numbers of new infections, and now the rising number of the Covid-10 related deaths have risen way beyond the scale that has scared us all in March and April, somehow the people seem rather unimpressed and are going about their ways as before.

But just by scrolling rows and rows of skulls, maybe this will make more of an impression than the plain numbers.

Take care y'all, I hope we all make it safe out of this worldwide situation.

Update 17.12.20:

Of course things didn't work as planned when the clock struck midnight. My script happily queried for a new day's data.csv, got nothing back and then everything came to a screeching stop, haha. This is the nice thing about private projects, you can fix it in production. So I refactored and tweaked my logic a bit, and ta-daah, now the whole thing updated itself with new data sometime around 7a.m this morning (Berlin time).
Currently I am refactoring and abstracting some stuff, so don't be surprised if something breaks. :)

Dirk @faulancer forwarded me the suggestion that it would be nice to have some comparison for the numbers, so I added Jumbo Jets (450 ppl), WorldTradeCenter on 9/11 (2606 ppl) and Wembley Stadiums (90000 ppl) as additional units of display.

You'll find them near the bottom of the page.

:: /update

Update 18.12.20:

Manuel @mmatuzo suggested that the URL should change, when a country is selected. Since I redirect the "coronadeathtoll/" url to display Germany's data as a default, this was confusing. While Kerstin @kprobiesch argued that not changing the URL was a good thing, because this is a "world" visualisation, I put in some more effort and now the selected country is also visible in the URL.
I also refactored the accuracy of the Jumbo, Wembley and WTC numbers, "ceil"-ing them was too broad. Thing I learned: If you round the numbers and allow for decimals, then you also should check that in your sprintf() string you don't use %d placeholders for those numbers, else they still will be a digits without decimals. Yes, I put the "pro" in programming.

:: /update

Update 20.12.20:

Now the numbers of the last recent two days is displayed, and their difference.

:: /update