Categories
Web

COVID-19 in Italy: an Interactive Map

Data published by the Ministry of Health displayed on a national map and on a graph that shows the evolution of Coronavirus infection cases

In these days the Ministry of Health is reporting daily data on the number of people who tested positive for COVID-19.

On the Johns Hopkins University Map that traces the cases of Coronavirus worldwide you can also read the data for Italy, but only at the national level.

Inspired by the above mentioned map I made a similar one that displays the official data of the Ministry on a regional basis, accompanied by a graph showing the evolution of the data day by day.
By selecting a region on the map you can see the graph of the cases of that single region.

From March 17th a new chart is available. That one compares the evolution of confirmed cases between all regions.

The data will be updated, whenever possible, whenever an official update will be released on the channels of the Ministry of Health and the Civil Protection.

The map is available in this page.

At the bottom of the page there are the sources from which the data was taken.

Update 7/03

Since March 7th , the official map of the Civil Protection (desktopmobile) and a repository contains the official data are available.
This map will continue to be updated as the official map does not offer the evolution of data at regional level.

Update 13/03

This page (unofficial) contains a lot of graphs and details to visualize official data.

Categories
Bootstrap Programming Web

Advanced Pagination with Bootstrap

Among the many components of Bootstrap we can find one to build a block of page indexes to implement a pagination. Typically this component is used when you have a list of elements that, for one reason or another, can not be shown all in one page. In this case, as with search engines, several pages are created with the same template but each with different elements, sorted by some criteria.

The Pagination Component Documentation Page presents the basic version of this tool and some variants, without Javascript code to allow the buttons to work.

In case we have to use pagination for a few pages, that’s enough.
In many other cases, however, it is necessary to achieve the problem that the number of pages is too large to show all the numbers in the user interface.

Having found this problem I implemented a simple algorithm that allows to “collapse” part of the unnecessary page indexes. The result is shown immediately below.

See the Pen Advanced Pagination in Bootstrap by Lorenzo Vainigli (@lorenzovngl) on CodePen.

This algorithm uses three variables:

  • Count: total number of pages to be listed.
  • Range: number of indices to be shown on the left and on the right of the current page.
  • Page: current page, the one that the user is viewing.

Javascript code

let count = 50;
let range = 3;
let page = 15;

if (page > 1){
  $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + (page-1) + '">Previous</a></li>');
}
for (let i = 1; i <= count; i++){
  if (i == 1 && page-range > 1){
    $('.pagination').append('<li class="page-item"><a class="page-link" href="./1">1</a></li>');
      if (page-range > 2){
        $('.pagination').append('<li class="page-item disabled"><a class="page-link" href="#">...</a></li>');
    }
  }
  if (i >= page-range && i <= page+range){
    if (i != page){
      $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + i + '">' + i + '</a></li>');
    } else {
      $('.pagination').append('<li class="page-item active"><a class="page-link" href=""./' + i + '"">' + i + '</a></li>');
    }
  }
  if (i == count && page+range < count){
    if (page+range < count-1){
      $('.pagination').append('<li class="page-item disabled"><a class="page-link" href="#">...</a></li>');
    }
    $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + count + '">' + count + '</a></li>'); 
  }
}
if (page < count){
  $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + (page+1) + '">Next</a></li>');
}

PHP code

$count = 50;
$range = 3;
$page = 15;

if ($page > 1){
  echo '<li class="page-item"><a class="page-link" href="./'.($page-1).'">Previous</a></li>';
}
for ($i=1; $i<=$count; $i++){
  if ($i == 1 && $page-$range > 1){
    echo '<li class="page-item"><a class="page-link" href="./1">1</a></li>';
    if ($page-$range > 2){
      echo '<li class="page-item disabled"><a class="page-link" href="#">...</a></li>';
    }
  }
  if ($i >= $page-$range && $i <= $page+$range){
    if ($i != $page){
      echo '<li class="page-item"><a class="page-link" href="./'.$i.'">'.$i.'</a></li>';
    } else {
      echo '<li class="page-item active"><a class="page-link" href=""./'.$i.'"">'.$i.'</a></li>';
    }
  }
  if ($i == $count && $page+$range < $count){
    if ($page+$range < $count-1){
      echo '<li class="page-item disabled"><a class="page-link" href="#">...</a></li>';
    }
    echo '<li class="page-item"><a class="page-link" href="./'.$count.'">'.$count.'</a></li>';
  }
}
if ($page < $count){
  echo '<li class="page-item"><a class="page-link" href="./'.($page+1).'">Successiva</a></li>';
}

Dependencies (Bootstrap 4.0.0)

CSS

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

Javascript

https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js

Categories
Programming Web

Disable Google Analytics only for site’s administrators

Services used to track visitors to your site, such as Google Analytics, are essential tools to get an idea of the performance of your web pages.

The problem that arises is that administrators, content creators or any other profile that manages the content of a site are among the most active users. In the long run, this activity, which Analytics catalogues as “visitor”, without distinguishing between users and administrators, falsifies the numbers of real users, i.e. those who have no interest in the growth or decrease in numbers of a site.

This is very important, especially if the numbers of visitors will be the basis for the choice of marketing strategies.

How to do that?

Using cookies

To track visitors Analytics uses a short Javascript code like this one, included on every single page of the site that each visitor’s browser runs:

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-X');

Quite simply, we can define a cookie to be set in the administrator’s browser (for example no-tracking) and, with a conditional command, tell the code to execute the previous instructions only if the cookie is not present. The value of the cookie is therefore not relevant.

// indexOf(str) returns -1 if there is no occurrence of string str,
// the index of the first occurrence of str otherwise
if (document.cookie.indexOf("no-tracking") === -1){
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-XXXXXXXX-X');
}

The cookie can also be set manually in the administrator’s browser.

Once this operation has been carried out, Google Analytics will only track the real users who visit the site, making the collected data much more reliable.