infographics. project 5
date. 2021
codes. GitHub
Brief Summary:
This is a three paged infographic website created using fullpage.js and the context given for this website was that a local news agency, "The Lion Press", designed and develop a single-page interactive infographic website about Covid-19 in Singapore. I used several different animations features from the JavaScript to make the website more lively.
Target Audience:
The targeted audiences for this website would be news readers who were looking for more in depth information on the pandemic situation with interactives to show case how serious the situation is.
Cases Section:
For the cases section, it includes Header with website title and navigation to other sections, Information about the number of Covid-19 cases in Singapore and A chart displaying daily Covid-19 cases in Singapore for the past month. Considering this was the first page, I decided to use Anime.js to set the counter for the Total cases, Currently in hospital, and Total deaths. Thereafter, the rest of the information will then pop in to place. The line chart was used by Chart.js library. This helps to display the daily Covid cases in a interactive infographic manner.
Vaccination Progress Section:
For the vaccination progress section, it includes Information on the vaccination progress in Singapore, I added a group of smiley faces and one sad face on the middle to represent the statistic that 1 out of 10 Singaporeans has not been vaccinated and I used tippy so whenever a user hovers over a smiley face, it would say "I am vaccinated" while when it hovers over a sad face it will say "I am not vaccinated".
Vaccination Centers:
For the vaccination centers section, it includes A map containing locations of vaccination centers in Singapore, each location point has a tooltip containing the center name, address and phone number and an interactive table containing the list of vaccination centers in Singapore. For this section, I used list table from Chart.js so that the user will be able to view the vaccination centers more conveniently, furthermore, they could also give a quick search on the center's they are looking for. Aside from that, I have also included a Singapore map at the side that showcases the various vaccination centers in Singapore in a map view. I used Tippy.js on each of the dots so that when the user hovers over it, the tooltip of the address details of the vaccination center will be shown.