Skip to content

Commit

Permalink
// Covid dashboard - v2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@elreviae
elreviae committed Jan 1, 2022
1 parent d77a746 commit 62444b9
Show file tree
Hide file tree
Showing 81 changed files with 3,023 additions and 4,727 deletions.
34 changes: 22 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,46 @@
# Covid-19 Data dashboard
Simple & optimised dashboard about the actual situation and the evolution of the Covid-19 in the world.
Lightweight, simple & optimised dashboard about the actual situation and the evolution of the Covid-19 in the world and especially in France.

## Web application available online : https://elreviae.github.io/coviddata/

----------------------
![Screenshot](coviddata-dashboard-1.jpeg)

![Screenshot](coviddata-dashboard-2.jpeg)

![Screenshot](coviddata-dashboard-3.jpeg)

![Screenshot](coviddata-dashboard-4.jpeg)

----------------------

# This dashboard shows :

- Data Table : Reported daily and global cases, deaths and recovered by country, territory or conveyance.
- World Overview : Reported daily and global cases, deaths and recovered by country, territory or conveyance.

- Charts : Charts of actual cases & global summed Covid-19 time series data since the pandemic began.
- World Vaccinations : Reported Vaccination Cases by Country, Territory, or Conveyance.

- World Maps :
- World map of reported cumulative Global Cases, Deaths and Recovered by Country, Province or County.
- World map of reported cumulative Global Active Cases, Deaths and Recovered by Country.
- World Map : Covid-19 World map of actual active & critical cases

- Data Vaccinations : Reported Vaccination Cases by Country, Territory, or Conveyance.
- World Charts :
- Data charts of new and total cases.
- Data charts about the total and daily vaccinations in the world.
- Data chart about total Covid-19 test per continent.

- France map & Data Tables :
- Reported actual & cumulative french cases per county and regions.
- Covid France :
- Cumulative & Actual French cases COVID-19 Coronavirus Pandemic.
- Reported French Cases by Counties and Regions.

- News Covid-19 :
- News about Covid :
- Reported of some recent news posts or articles about the Covid-19.

----------------------

# APIs
- Our World In Data - covid-19-data : https://github.com/owid/covid-19-data/tree/master/public/data
- disease.sh - Open Disease Data: https://disease.sh/
- about-corona.net: https://about-corona.net/
- coronavirusAPI-France: https://github.com/florianzemma/CoronavirusAPI-France
- Opencovid19-fr: https://github.com/opencovid19-fr/data
- opendatasoft.com: https://public.opendatasoft.com
- newsapi.org: https://newsapi.org

----------------------
Expand Down
271 changes: 167 additions & 104 deletions about.html
View file

Large diffs are not rendered by default.

227 changes: 132 additions & 95 deletions covidchartsdata.html
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,154 @@
<!DOCTYPE html>
<html lang="en">
<title>Covid-19 Dashboard Tracker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" href="css/w3-colors-metro.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="css/customcss.css" rel="stylesheet">
<link href="css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="css/anychart-font.min.css" type="text/css" rel="stylesheet">

<body class="bg-dashboard">
<!-- Top container -->
<div class="w3-bar w3-top w3-large navbar-custom">
<button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i> Menu</button>
<a href="index.html" ><span class="w3-bar-item w3-left w3-text-amber w3-xlarge"><i class="fas fa-circle-notch"></i> CovidData</span></a>
<title>Covid-19 Dashboard Tracker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" href="css/w3-colors-metro.css">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="css/anychart-font.min.css" type="text/css" rel="stylesheet">
<link href="css/customcss.css" rel="stylesheet">

<body class="bg-dashboard">

<div class="w3-bar w3-top w3-large topbar-custom" style="z-index:4">
<button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey"
onclick="w3_open();"><i class="fa fa-bars"></i> Menu</button>
<a href="index.html"><span class="w3-bar-item w3-right w3-xlarge dashboardTitle"><i class="fas fa-spinner"></i>
CovidData</span></a>
</div>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse sidebar-custom w3-animate-left w3-round-large w3-card-4 w3-margin"
id="dashSidebar">
<div class="w3-container w3-margin-top">
<h5 class="sidebaritle">Covid Data Dashboard</h5>
</div>
<hr>
<div class="w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large bg-closemenu" onclick="w3_close()"
title="close menu"><i class="far fa-times-circle w3-large w3-margin-right"></i> Close Menu</a>

<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse sidebar-custom w3-animate-left" id="dashSidebar">
<div class="w3-container w3-margin-top">
<h5 class="dashboardTitle">Covid Data Dashboard</h5>
</div>
<div class="w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i> Close Menu</a>
<a href="index.html" class="w3-bar-item w3-button w3-padding w3-hover-amber"><i class="fas fa-pills"></i> World Data Overview</a>
<a href="covidworldmaps.html" class="w3-bar-item w3-button w3-padding w3-hover-teal"><i class="fas fa-globe-europe"></i> World Maps</a>
<a href="covidvaccinations.html" class="w3-bar-item w3-button w3-padding w3-hover-green"><i class="fas fa-syringe"></i> World Data Vaccinations</a>
<a href="covidchartsdata.html" class="w3-bar-item w3-button w3-padding w3-hover-light-green"><i class="fas fa-chart-bar"></i> World Data Charts</a>
<a href="covidfrance.html" class="w3-bar-item w3-button w3-padding w3-hover-blue"><i class="fas fa-flag"></i> Data France</a>
<a href="covidnews.html" class="w3-bar-item w3-button w3-padding w3-hover-cyan"><i class="fas fa-newspaper"></i> News about Covid</a>
<a href="about.html" class="w3-bar-item w3-button w3-padding w3-hover-red"><i class="fas fa-info-circle"></i> About</a>
<a href="index.html" class="w3-margin-bottom w3-bar-item w3-button w3-padding w3-hover-amber"><i
class="fas fa-pills w3-large w3-margin-right"></i>
World Overview</a>

<a href="covidvaccinations.html" class="w3-margin-bottom w3-bar-item w3-button w3-padding w3-hover-green"><i
class="fas fa-syringe w3-large w3-margin-right"></i> World Vaccinations</a>

<a href="covidworldmaps.html" class="w3-margin-bottom w3-bar-item w3-button w3-padding w3-hover-teal"><i
class="fas fa-globe-europe w3-large w3-margin-right"></i> World Map</a>

<a href="covidchartsdata.html"
class="w3-margin-bottom w3-bar-item w3-button w3-padding w3-hover-light-green"><i
class="fas fa-chart-bar w3-large w3-margin-right"></i> World Charts</a>

<a href="covidfrance.html" class="w3-margin-bottom w3-bar-item w3-button w3-padding w3-hover-blue"><i
class="fas fa-flag w3-large w3-margin-right"></i> Covid France</a>

<a href="covidnews.html" class="w3-margin-bottom w3-bar-item w3-button w3-padding w3-hover-cyan"><i
class="fas fa-newspaper w3-large w3-margin-right"></i> News about Covid</a>

<a href="about.html" class="w3-margin-bottom w3-bar-item w3-button w3-padding w3-hover-red"><i
class="fas fa-info-circle w3-large w3-margin-right"></i> About</a>
</div>
</nav>

<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer"
title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main main-custom">
<!-- Header -->
<header class="w3-container ">
<h5 class="w3-large"><i class="fas fa-chart-pie w3-text-light-green"></i> Data charts of new and total
Covid-19 cases in the world. Last update: <span class="latestUpdate w3-text-light-green"></span></h5>
<p class="w3-small">Right click on charts for context menu.</p>
</header>

<div class="w3-row-padding w3-margin-bottom">
<div class="w3-half w3-margin-bottom">
<div class="w3-container w3-padding-16 dark-element w3-round-large w3-card-4">
<div id="chartPie1" class="chartsBlock1"></div>
</div>
</div>
</nav>

<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<div class="w3-half w3-margin-bottom">
<div class="w3-container w3-padding-16 dark-element w3-round-large w3-card-4">
<div id="chartPie2" class="chartsBlock1"></div>
</div>
</div>
</div>

<!-- !PAGE CONTENT! -->
<div class="w3-main main-custom">
<!-- Header -->
<div class="w3-row-padding w3-margin-bottom">
<header class="w3-container ">
<h5 class="w3-large"><i class="fas fa-chart-line w3-text-light-green"></i> Data charts of new cases and time series data since the Covid-19 pandemic began. Last update: <span id="latestUpdate" class="w3-text-light-green"></span></h5>
<p class="w3-small">Right click on charts for context menu.</p>
<h5 class="w3-large"><i class="fas fa-chart-line w3-text-light-green"></i> Data charts about the total
and daily vaccinations in the world. Last update: <span
class="latestUpdate w3-text-light-green"></span></h5>
</header>

<div class="w3-row-padding w3-margin-bottom">
<div class="w3-half w3-margin-bottom">
<div class="w3-container w3-padding-16 dark-element">
<div id="chartPie1" class="chartsBlock1"></div>
</div>
</div>

<div class="w3-half">
<div class="w3-container w3-padding-16 dark-element">
<div id="chartPie2" class="chartsBlock1"></div>
</div>
<div class="w3-half w3-margin-bottom">
<div class="w3-container w3-padding-16 dark-element w3-round-large w3-card-4">
<div id="curvesVaccDaily" class="chartsBlock2"></div>
</div>
</div>

<div class="w3-row-padding w3-margin-bottom">
<div class="w3-col">
<div class="w3-container w3-padding-16 dark-element">
<div id="chartCurves" class="chartsBlock2"></div>
</div>
<div class="w3-half w3-margin-bottom">
<div class="w3-container w3-padding-16 dark-element w3-round-large w3-card-4">
<div id="curvesVaccTotal" class="chartsBlock2"></div>
</div>
</div>

<div class="w3-row-padding w3-margin-bottom">
<header class="w3-container ">
<h5 class="w3-large"><i class="fas fa-chart-line w3-text-light-green"></i> Data chart about total Covid-19 test per continent. Last update: <span id="latestUpdateTests" class="w3-text-light-green"></span></h5>
</header>
<div class="w3-col">
<div class="w3-container w3-padding-16 dark-element">
<div id="chartBars" class="chartsBlock2"></div>
</div>
</div>

<div class="w3-row-padding w3-margin-bottom">
<header class="w3-container ">
<h5 class="w3-large"><i class="fas fa-chart-bar w3-text-light-green"></i> Data chart about total
Covid-19 tests per continent. Last update: <span class="latestUpdate w3-text-light-green"></span>
</h5>
</header>
<div class="w3-col">
<div class="w3-container w3-padding-16 dark-element w3-round-large w3-card-4">
<div id="chartBars" class="chartsBlock2"></div>
</div>
</div>
</div>
</div>

<!-- Footer -->
<footer class="w3-container w3-padding-16 footer-custom">
<h4>CREDITS</h4>
<p>Created by Maxime DES TOUCHES - 2020 . <a href="https://github.com/elreviae" target="_blank">Github</a></p>
</footer>
<!-- Footer -->
<footer class="w3-container w3-padding-16 footer-custom">
<p class="w3-right"><span class="copyrightDate"></span> Made by Maxime des Touches. <a
href="https://github.com/elreviae" target="_blank" class="footerlink">Github</a></p>
</footer>

<!-- End page content -->
</div>
</div>

<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/anychart-base.min.js"></script>
<script src="js/anychart-ui.min.js"></script>
<script src="js/anychart-exports.min.js"></script>
<script src="js/dark_earth.min.js"></script>
<script src="js/anychart-data-adapter.min.js"></script>
<script src="js/customchartsData.min.js"></script>
<script src="js/sidebar.js"></script>
<script>
var jsonData = 'https://corona-api.com/timeline';
$.getJSON(jsonData, function(responseData){
let noData = 'Not Available ...';
let latestUpdate = moment(responseData.data[0].updated_at).format('LLL');
if(latestUpdate==null){ $('#latestUpdate').html(noData)}else{ $('#latestUpdate').html(latestUpdate)}
});

var covApiData = 'https://disease.sh/v3/covid-19/continents';
$.getJSON(covApiData, function(responseData){
let noData = 'Not Available ...';
let latestUpdateTests = moment(responseData[0].updated).format('LLL');
if(latestUpdateTests==null){ $('#latestUpdateTests').html(noData)}else{ $('#latestUpdateTests').html(latestUpdateTests)}
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/anychart/anychart-base.min.js"></script>
<script src="js/anychart/anychart-ui.min.js"></script>
<script src="js/anychart/anychart-exports.min.js"></script>
<script src="js/anychart/anychart-data-adapter.min.js"></script>
<script src="js/min/chartsPiesworld.min.js"></script>
<script src="js/min/chartVaccDaily.min.js"></script>
<script src="js/min/chartVaccTotal.min.js"></script>
<script src="js/min/chartBarContinents.min.js"></script>
<script src="js/customsite.js"></script>
<script>
let jsonData = 'https://disease.sh/v3/covid-19/all';
$.getJSON(jsonData, function (responseData) {
let noData = 'Not Available ...';
let latestUpdate = moment(responseData.updated).format('LLL');
if (latestUpdate == null) { $('.latestUpdate').html(noData) } else { $('.latestUpdate').html(latestUpdate) }
});
</script>

</body>
</html>
</script>

</body>

</html>
Binary file added coviddata-dashboard-1.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added coviddata-dashboard-2.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added coviddata-dashboard-3.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added coviddata-dashboard-4.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 62444b9

Please sign in to comment.