pages/contrib.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Welcome! We're happy you'd like to contribute! This is an open project, and we value contributions from everyone.">
<meta name="keywords" content="contribute">
<link rel="icon" href="../assets/covid.svg">
<title>Contribute | COVID-19 Tracker</title>
<link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/prismjs@1.23.0/themes/prism.css">
<style>

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Base */

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #222;
  text-align: left;
  background-color: #fff;
}

*,
::after,
::before {
	box-sizing: border-box;
}

ul,
ol {
	margin-top: 0;
	margin-bottom: 1rem;
}

a {
	color: #007bff;
	text-decoration: none;
	background-color: transparent;
}

a:hover {
	color: #0056b3;
	text-decoration: underline;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Main */

#livemark-main {
  padding: 24px 20px;
  min-height: 100vh;
}

#livemark-main h1 {
  margin-top: 4px !important;
  padding-bottom: 12px !important;
}

#livemark-main h1 a.heading,
#livemark-main h2 a.heading,
#livemark-main h3 a.heading,
#livemark-main h4 a.heading,
#livemark-main h5 a.heading,
#livemark-main h6 a.heading {
  display: none;
}

#livemark-main h2:hover a.heading,
#livemark-main h3:hover a.heading,
#livemark-main h4:hover a.heading,
#livemark-main h5:hover a.heading,
#livemark-main h6:hover a.heading {
  display: inline;
  margin-left: 8px;
  color: #aaa;
  font-weight: normal;
  text-decoration: none;
}

#livemark-main h2 a.heading:hover,
#livemark-main h3 a.heading:hover,
#livemark-main h4 a.heading:hover,
#livemark-main h5 a.heading:hover,
#livemark-main h6 a.heading:hover {
  text-decoration: underline;
}

@media only screen and (min-width: 768px) {
  #livemark-main {
    margin-left: 300px;
    border-left: dashed 1px #ccc;
  }
}

@media only screen and (min-width: 992px) {
  #livemark-main {
    margin-right: 300px;
    border-right: dashed 1px #ccc;
  }
}

#livemark-main .octicon {
  display: inline-block;
  fill: currentColor;
  vertical-align: text-bottom;
}

#livemark-main .anchor {
  float: left;
  line-height: 1;
  margin-left: -20px;
  padding-right: 4px;
}

#livemark-main .anchor:focus {
  outline: none;
}

#livemark-main h1 .octicon-link,
#livemark-main h2 .octicon-link,
#livemark-main h3 .octicon-link,
#livemark-main h4 .octicon-link,
#livemark-main h5 .octicon-link,
#livemark-main h6 .octicon-link {
  color: #1b1f23;
  vertical-align: middle;
  visibility: hidden;
}

#livemark-main h1:hover .anchor,
#livemark-main h2:hover .anchor,
#livemark-main h3:hover .anchor,
#livemark-main h4:hover .anchor,
#livemark-main h5:hover .anchor,
#livemark-main h6:hover .anchor {
  text-decoration: none;
}

#livemark-main h1:hover .anchor .octicon-link,
#livemark-main h2:hover .anchor .octicon-link,
#livemark-main h3:hover .anchor .octicon-link,
#livemark-main h4:hover .anchor .octicon-link,
#livemark-main h5:hover .anchor .octicon-link,
#livemark-main h6:hover .anchor .octicon-link {
  visibility: visible;
}

#livemark-main h1:hover .anchor .octicon-link:before,
#livemark-main h2:hover .anchor .octicon-link:before,
#livemark-main h3:hover .anchor .octicon-link:before,
#livemark-main h4:hover .anchor .octicon-link:before,
#livemark-main h5:hover .anchor .octicon-link:before,
#livemark-main h6:hover .anchor .octicon-link:before {
  width: 16px;
  height: 16px;
  content: ' ';
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z'%3E%3C/path%3E%3C/svg%3E");
}

#livemark-main {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  color: #222;
  font-family: Roboto, system-ui, -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
  line-height: 1.5;
  word-wrap: break-word;
}

#livemark-main details {
  display: block;
}

#livemark-main summary {
  display: list-item;
}

#livemark-main a {
  background-color: initial;
}

#livemark-main a:active,
#livemark-main a:hover {
  outline-width: 0;
}

#livemark-main strong {
  font-weight: inherit;
  font-weight: bolder;
}

#livemark-main h1 {
  font-size: 2em;
  margin: .67em 0;
}

#livemark-main img {
  border-style: none;
}

#livemark-main code,
#livemark-main kbd,
#livemark-main pre {
  font-family: monospace,monospace;
  font-size: 1em;
}

#livemark-main hr {
  box-sizing: initial;
  height: 0;
  overflow: visible;
}

#livemark-main input {
  font: inherit;
  margin: 0;
}

#livemark-main input {
  overflow: visible;
}

#livemark-main [type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}

#livemark-main * {
  box-sizing: border-box;
}

#livemark-main input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

#livemark-main a {
  color: #0366d6;
  text-decoration: none;
}

#livemark-main a:hover {
  text-decoration: underline;
}

#livemark-main strong {
  font-weight: 600;
}

#livemark-main hr {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dfe2e5;
}

#livemark-main hr:after,
#livemark-main hr:before {
  display: table;
  content: "";
}

#livemark-main hr:after {
  clear: both;
}

/* NOTE: is it possible to find a better fix for not breaking TablePlugin's styles? */
#livemark-main table:not(.dataTable) {
  border-spacing: 0;
  border-collapse: collapse;
}

#livemark-main td,
#livemark-main th {
  padding: 0;
}

#livemark-main details summary {
  cursor: pointer;
}

#livemark-main kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: 1px solid #d1d5da;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #d1d5da;
}

#livemark-main h1,
#livemark-main h2,
#livemark-main h3,
#livemark-main h4,
#livemark-main h5,
#livemark-main h6 {
  margin-top: 0;
  margin-bottom: 0;
}

#livemark-main h1 {
  font-size: 32px;
}

#livemark-main h1,
#livemark-main h2 {
  font-weight: 600;
}

#livemark-main h2 {
  font-size: 24px;
}

#livemark-main h3 {
  font-size: 20px;
}

#livemark-main h3,
#livemark-main h4 {
  font-weight: 600;
}

#livemark-main h4 {
  font-size: 16px;
}

#livemark-main h5 {
  font-size: 14px;
}

#livemark-main h5,
#livemark-main h6 {
  font-weight: 600;
}

#livemark-main h6 {
  font-size: 12px;
}

#livemark-main p {
  margin-top: 0;
  margin-bottom: 10px;
}

#livemark-main blockquote {
  margin: 0;
}

#livemark-main ol,
#livemark-main ul {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

#livemark-main ol ol,
#livemark-main ul ol {
  list-style-type: lower-roman;
}

#livemark-main ol ol ol,
#livemark-main ol ul ol,
#livemark-main ul ol ol,
#livemark-main ul ul ol {
  list-style-type: lower-alpha;
}

#livemark-main dd {
  margin-left: 0;
}

#livemark-main code,
#livemark-main pre {
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  font-size: 12px;
}

#livemark-main pre {
  margin-top: 0;
  margin-bottom: 0;
}

#livemark-main input::-webkit-inner-spin-button,
#livemark-main input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

#livemark-main :checked+.radio-label {
  position: relative;
  z-index: 1;
  border-color: #0366d6;
}

#livemark-main .border {
  border: 1px solid #e1e4e8!important;
}

#livemark-main .border-0 {
  border: 0!important;
}

#livemark-main .border-bottom {
  border-bottom: 1px solid #e1e4e8!important;
}

#livemark-main .rounded-1 {
  border-radius: 3px!important;
}

#livemark-main .bg-white {
  background-color: #fff!important;
}

#livemark-main .bg-gray-light {
  background-color: #fafbfc!important;
}

#livemark-main .text-gray-light {
  color: #666!important;
}

#livemark-main .mb-0 {
  margin-bottom: 0!important;
}

#livemark-main .my-2 {
  margin-top: 8px!important;
  margin-bottom: 8px!important;
}

#livemark-main .pl-0 {
  padding-left: 0!important;
}

#livemark-main .py-0 {
  padding-top: 0!important;
  padding-bottom: 0!important;
}

#livemark-main .pl-1 {
  padding-left: 4px!important;
}

#livemark-main .pl-2 {
  padding-left: 8px!important;
}

#livemark-main .py-2 {
  padding-top: 8px!important;
  padding-bottom: 8px!important;
}

#livemark-main .pl-3,
#livemark-main .px-3 {
  padding-left: 16px!important;
}

#livemark-main .px-3 {
  padding-right: 16px!important;
}

#livemark-main .pl-4 {
  padding-left: 24px!important;
}

#livemark-main .pl-5 {
  padding-left: 32px!important;
}

#livemark-main .pl-6 {
  padding-left: 40px!important;
}

#livemark-main .f6 {
  font-size: 12px!important;
}

#livemark-main .lh-condensed {
  line-height: 1.25!important;
}

#livemark-main .text-bold {
  font-weight: 600!important;
}

#livemark-main .pl-c {
  color: #666;
}

#livemark-main .pl-c1,
#livemark-main .pl-s .pl-v {
  color: #005cc5;
}

#livemark-main .pl-e,
#livemark-main .pl-en {
  color: #6f42c1;
}

#livemark-main .pl-s .pl-s1,
#livemark-main .pl-smi {
  color: #222;
}

#livemark-main .pl-ent {
  color: #22863a;
}

#livemark-main .pl-k {
  color: #d73a49;
}

#livemark-main .pl-pds,
#livemark-main .pl-s,
#livemark-main .pl-s .pl-pse .pl-s1,
#livemark-main .pl-sr,
#livemark-main .pl-sr .pl-cce,
#livemark-main .pl-sr .pl-sra,
#livemark-main .pl-sr .pl-sre {
  color: #032f62;
}

#livemark-main .pl-smw,
#livemark-main .pl-v {
  color: #e36209;
}

#livemark-main .pl-bu {
  color: #b31d28;
}

#livemark-main .pl-ii {
  color: #fafbfc;
  background-color: #b31d28;
}

#livemark-main .pl-c2 {
  color: #fafbfc;
  background-color: #d73a49;
}

#livemark-main .pl-c2:before {
  content: "^M";
}

#livemark-main .pl-sr .pl-cce {
  font-weight: 700;
  color: #22863a;
}

#livemark-main .pl-ml {
  color: #735c0f;
}

#livemark-main .pl-mh,
#livemark-main .pl-mh .pl-en,
#livemark-main .pl-ms {
  font-weight: 700;
  color: #005cc5;
}

#livemark-main .pl-mi {
  font-style: italic;
  color: #222;
}

#livemark-main .pl-mb {
  font-weight: 700;
  color: #222;
}

#livemark-main .pl-md {
  color: #b31d28;
  background-color: #ffeef0;
}

#livemark-main .pl-mi1 {
  color: #22863a;
  background-color: #f0fff4;
}

#livemark-main .pl-mc {
  color: #e36209;
  background-color: #ffebda;
}

#livemark-main .pl-mi2 {
  color: #f6f8fa;
  background-color: #005cc5;
}

#livemark-main .pl-mdr {
  font-weight: 700;
  color: #6f42c1;
}

#livemark-main .pl-ba {
  color: #586069;
}

#livemark-main .pl-sg {
  color: #959da5;
}

#livemark-main .pl-corl {
  text-decoration: underline;
  color: #032f62;
}

#livemark-main .mb-0 {
  margin-bottom: 0!important;
}

#livemark-main .my-2 {
  margin-bottom: 8px!important;
}

#livemark-main .my-2 {
  margin-top: 8px!important;
}

#livemark-main .pl-0 {
  padding-left: 0!important;
}

#livemark-main .py-0 {
  padding-top: 0!important;
  padding-bottom: 0!important;
}

#livemark-main .pl-1 {
  padding-left: 4px!important;
}

#livemark-main .pl-2 {
  padding-left: 8px!important;
}

#livemark-main .py-2 {
  padding-top: 8px!important;
  padding-bottom: 8px!important;
}

#livemark-main .pl-3 {
  padding-left: 16px!important;
}

#livemark-main .pl-4 {
  padding-left: 24px!important;
}

#livemark-main .pl-5 {
  padding-left: 32px!important;
}

#livemark-main .pl-6 {
  padding-left: 40px!important;
}

#livemark-main .pl-7 {
  padding-left: 48px!important;
}

#livemark-main .pl-8 {
  padding-left: 64px!important;
}

#livemark-main .pl-9 {
  padding-left: 80px!important;
}

#livemark-main .pl-10 {
  padding-left: 96px!important;
}

#livemark-main .pl-11 {
  padding-left: 112px!important;
}

#livemark-main .pl-12 {
  padding-left: 128px!important;
}

#livemark-main hr {
  border-bottom-color: #eee;
}

#livemark-main kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: 1px solid #d1d5da;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #d1d5da;
}

#livemark-main:after,
#livemark-main:before {
  display: table;
  content: "";
}

#livemark-main:after {
  clear: both;
}

#livemark-main a:not([href]) {
  color: inherit;
  text-decoration: none;
}

#livemark-main blockquote,
#livemark-main details,
#livemark-main dl,
#livemark-main ol,
#livemark-main p,
#livemark-main pre,
#livemark-main table:not(.dataTable),
#livemark-main ul {
  margin-top: 0;
  margin-bottom: 16px;
}

#livemark-main hr {
  /* height: .25em; */
  height: 1px;
  padding: 0;
  margin: 24px 0;
  background-color: #e1e4e8;
  border: 0;
}

#livemark-main blockquote {
  padding: 0 1em;
  color: #666;
  border-left: .25em solid #dfe2e5;
}

#livemark-main blockquote>:first-child {
  margin-top: 0;
}

#livemark-main blockquote>:last-child {
  margin-bottom: 0;
}

#livemark-main h1,
#livemark-main h2,
#livemark-main h3,
#livemark-main h4,
#livemark-main h5,
#livemark-main h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

#livemark-main h1 {
  font-size: 2em;
}

#livemark-main h1,
#livemark-main h2 {
  padding-bottom: .3em;
  border-bottom: 1px solid #eaecef;
}

#livemark-main h2 {
  font-size: 1.5em;
}

#livemark-main h3 {
  font-size: 1.25em;
}

#livemark-main h4 {
  font-size: 1em;
}

#livemark-main h5 {
  font-size: .875em;
}

#livemark-main h6 {
  font-size: .85em;
  color: #666;
}

#livemark-main ol,
#livemark-main ul {
  padding-left: 2em;
}

#livemark-main ol ol,
#livemark-main ol ul,
#livemark-main ul ol,
#livemark-main ul ul {
  margin-top: 0;
  margin-bottom: 0;
}

#livemark-main li {
  word-wrap: break-all;
}

#livemark-main li>p {
  margin-top: 16px;
}

#livemark-main li+li {
  margin-top: .25em;
}

#livemark-main dl {
  padding: 0;
}

#livemark-main dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}

#livemark-main dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

#livemark-main table:not(.dataTable) {
  display: block;
  width: 100%;
  overflow: auto;
}

#livemark-main table:not(.dataTable) th {
  font-weight: 600;
}

#livemark-main table:not(.dataTable) td,
#livemark-main table:not(.dataTable) th {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

#livemark-main table:not(.dataTable) tr {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

#livemark-main table:not(.dataTable) tr:nth-child(2n) {
  background-color: #f6f8fa;
}

#livemark-main img {
  max-width: 100%;
  box-sizing: initial;
  background-color: #fff;
}

#livemark-main img[align=right] {
  padding-left: 20px;
}

#livemark-main img[align=left] {
  padding-right: 20px;
}

#livemark-main code {
  padding: .2em .4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27,31,35,.05);
  border-radius: 3px;
}

#livemark-main pre {
  word-wrap: normal;
}

#livemark-main pre>code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

#livemark-main .highlight {
  margin-bottom: 16px;
}

#livemark-main .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

#livemark-main .highlight pre,
#livemark-main pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}

#livemark-main pre code {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: initial;
  border: 0;
}

#livemark-main .commit-tease-sha {
  display: inline-block;
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  font-size: 90%;
  color: #444d56;
}

#livemark-main .full-commit .btn-outline:not(:disabled):hover {
  color: #005cc5;
  border-color: #005cc5;
}

#livemark-main .blob-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

#livemark-main .blob-wrapper-embedded {
  max-height: 240px;
  overflow-y: auto;
}

#livemark-main .blob-num {
  width: 1%;
  min-width: 50px;
  padding-right: 10px;
  padding-left: 10px;
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  font-size: 12px;
  line-height: 20px;
  color: rgba(27,31,35,.3);
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#livemark-main .blob-num:hover {
  color: rgba(27,31,35,.6);
}

#livemark-main .blob-num:before {
  content: attr(data-line-number);
}

#livemark-main .blob-code {
  position: relative;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 20px;
  vertical-align: top;
}

#livemark-main .blob-code-inner {
  overflow: visible;
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  font-size: 12px;
  color: #222;
  word-wrap: normal;
  white-space: pre;
}

#livemark-main .pl-token.active,
#livemark-main .pl-token:hover {
  cursor: pointer;
  background: #ffea7f;
}

#livemark-main .tab-size[data-tab-size="1"] {
  -moz-tab-size: 1;
  tab-size: 1;
}

#livemark-main .tab-size[data-tab-size="2"] {
  -moz-tab-size: 2;
  tab-size: 2;
}

#livemark-main .tab-size[data-tab-size="3"] {
  -moz-tab-size: 3;
  tab-size: 3;
}

#livemark-main .tab-size[data-tab-size="4"] {
  -moz-tab-size: 4;
  tab-size: 4;
}

#livemark-main .tab-size[data-tab-size="5"] {
  -moz-tab-size: 5;
  tab-size: 5;
}

#livemark-main .tab-size[data-tab-size="6"] {
  -moz-tab-size: 6;
  tab-size: 6;
}

#livemark-main .tab-size[data-tab-size="7"] {
  -moz-tab-size: 7;
  tab-size: 7;
}

#livemark-main .tab-size[data-tab-size="8"] {
  -moz-tab-size: 8;
  tab-size: 8;
}

#livemark-main .tab-size[data-tab-size="9"] {
  -moz-tab-size: 9;
  tab-size: 9;
}

#livemark-main .tab-size[data-tab-size="10"] {
  -moz-tab-size: 10;
  tab-size: 10;
}

#livemark-main .tab-size[data-tab-size="11"] {
  -moz-tab-size: 11;
  tab-size: 11;
}

#livemark-main .tab-size[data-tab-size="12"] {
  -moz-tab-size: 12;
  tab-size: 12;
}

#livemark-main .task-list-item {
  list-style-type: none;
}

#livemark-main .task-list-item+.task-list-item {
  margin-top: 3px;
}

#livemark-main .task-list-item input {
  margin: 0 .2em .25em -1.6em;
  vertical-align: middle;
}

/* Left */

#livemark-left {
  visibility: hidden;
  position: fixed;
  width: 300px;
  padding: 10px 40px;
  padding-bottom: 100px;
  left: 0px;
  top: 25px;
  font-size: 125%;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

/* NOTE: we need to move it to DisplayPlugin (currently unsetting doesn't work) */
body:not(.with-readability) #livemark-left::-webkit-scrollbar {
  display: none; /* Chrome; Safari */
}

#livemark-left > div:not(:last-child) {
  border-bottom: 1px solid #eaecef;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

@media only screen and (min-width: 768px) {
  #livemark-left {
    visibility: visible;
  }
}

/* Right */

#livemark-right {
  visibility: hidden;
  position: fixed;
  width: 300px;
  padding: 10px 40px;
  padding-bottom: 100px;
  right: 0px;
  top: 25px;
  font-size: 125%;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

/* NOTE: we need to move it to DisplayPlugin (currently unsetting doesn't work) */
body:not(.with-readability) #livemark-right::-webkit-scrollbar {
  display: none; /* Chrome; Safari */
}

#livemark-right > div:not(:last-child) {
  border-bottom: 1px solid #eaecef;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

@media only screen and (min-width: 992px) {
  #livemark-right {
    visibility: visible;
  }
}

</style>
<style>

.status .btn {
  font-size: 30px !important;
  font-weight: 900 !important;
}

.livemark-table {
  font-size: 13px;
}

.livemark-table th {
  padding: 10px 2px !important;
}

.livemark-table td {
  padding: 10px 5px !important;
}

.livemark-table th {
  background-color: #fff !important;
  font-weight: bold !important;
}

.livemark-table tr:nth-child(odd) td {
  background-color: #f8f8f8 !important;
}

</style>
<style>

#livemark-brand {
  color: #888;
}

#livemark-brand ul {
  overflow: hidden;
  position: relative;
  padding-left: 0;
  margin: 0;
}

#livemark-brand li {
  list-style: none;
}

#livemark-brand a {
  display: inline-block;
  color: currentColor;
  position: relative;
  width: 100%;
  line-height: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

#livemark-brand a.active {
  font-weight: 700;
}

#livemark-brand a:hover {
  color: #80b2e6;
}

</style>
<style>

#livemark-pages {
  color: #888;
}

#livemark-pages ul {
  overflow: hidden;
  position: relative;
  padding-left: 0;
  margin: 0;
}

#livemark-pages ul.secondary {
  margin-left: 20px;
  display: none;
}

#livemark-pages li.active ul.secondary {
  display: block;
}

#livemark-pages li {
  list-style: none;
}

#livemark-pages a {
  display: inline-block;
  color: currentColor;
  position: relative;
  width: 100%;
  line-height: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

#livemark-pages li.active > a {
  font-weight: 700;
}

#livemark-pages li.group.active > a {
  font-weight: normal;
}

#livemark-pages li.group a.primary::after {
  content: "\f054";
  font-size: 16px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 2px;
  right: 0px;
}

#livemark-pages li.group.active a.primary::after {
  content: "\f078";
}

#livemark-pages a:hover {
  color: #80b2e6;
}

</style>
<style>

.livemark-reference {
  display: block;
  /* font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;; */
}

.livemark-reference-heading {
    background-color: #f6f8fa;
    font-family: "Roboto Mono", ui-monospace, monospace;
    padding: 1em 0;
}

</style>
<style>

#livemark-notes {
  color: #aaa;
  text-align: right;
  font-size: 14px;
  float: right;
  visibility: hidden;
}

@media (min-width: 768px) {
  #livemark-notes {
    visibility: visible;
  }
}

#livemark-notes a {
  color: inherit;
}

#livemark-notes a:hover {
  color: #80b2e6;
}

#livemark-notes a[target="_blank"]:after {
  content: "\f35d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  vertical-align: text-top;
  text-decoration: none;
  display: inline-block;
  color: #ccc;
  font-size: 10px;
  margin-left: -1px;
}

#livemark-notes a[target="_blank"]:hover:after {
  color: #80b2e6;
}

</style>
<style>

#livemark-signs {
  color: #888;
  border-top: 1px solid #eaecef;
  margin-top: 24px;
  padding-top: 20px;
  height: 50px;
}

#livemark-signs .next {
  float: right;
}

#livemark-signs a {
  font-size: 20px;
  color: currentColor;
}

#livemark-signs a:hover {
  color: #80b2e6;
}

</style>
<style>

#livemark-rating {
  height: 46px;
}

#livemark-rating iframe {
  margin-top: -5px;
  border: none;
  opacity: 0.5;
}

</style>
<style>

#livemark-topics {
  color: #888;
}

#livemark-topics .toc>.toc-list {
  overflow: hidden;
  position: relative;
}

#livemark-topics .toc>.toc-list li {
  list-style: none;
}

#livemark-topics .toc-list {
  padding-left: 0;
  margin: 0;
}

#livemark-topics a.toc-link {
  color: currentColor;
}

#livemark-topics a.toc-link:hover {
  color: #80b2e6;
}

#livemark-topics .is-active-link {
  font-weight: 700;
}

#livemark-topics ul.secondary {
  margin-left: 20px;
  display: none;
}

#livemark-topics li.is-active-li ul.secondary {
  display: block;
}

#livemark-topics li.group a.primary::after {
  content: "\f054";
  font-size: 16px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 2px;
  right: 0px;
}

#livemark-topics li.group.is-active-li a.primary::after {
  content: "\f078";
}

#livemark-topics a {
  display: inline-block;
  color: currentColor;
  position: relative;
  width: 100%;
  line-height: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

#livemark-topics a:hover {
  color: #80b2e6;
}

</style>
<style>

.livemark-audio {
  padding-bottom: 10px;
}

</style>
<style>

.livemark-blog-item {
  margin-bottom: 16px;
  text-align: justify;
}

.livemark-blog-item h2 a:not(.heading) {
  color: #222 !important;
}

</style>
<style>

#livemark-cards .modal-lg {
    max-width: 1000px;
}

</style>
<style>

#livemark-display {
  display: flex;
  position: fixed;
  visibility: hidden;
  justify-content: space-between;
  font-size: 16px;
  color: #888;
  width: 240px;
  bottom: 20px;
  right: 30px;
}

@media only screen and (min-width: 992px) {
  #livemark-display {
    visibility: visible;
  }
}

#livemark-display .control {
  cursor: pointer;
  background-color:#fff;
  box-shadow: 0px 7px 10px #eee;
  border-radius: 50%;
  border: solid 1px #ddd;
  z-index: 100;
}

#livemark-display .control .fa {
  display: inline-block !important;
  opacity: 1 !important;
  padding: 15px;
}

.with-readability {
  font-size: 20px;
}

.with-readability #livemark-main {
  color: #000;
}

.with-readability #livemark-left > *,
.with-readability #livemark-right > * {
  color: #444;
}

.with-readability #livemark-left,
.with-readability #livemark-right {
  scrollbar-width: unset;  /* Firefox */
  -ms-overflow-style: unset;  /* Internet Explorer 10+ */
}

/* NOTE: */
/* temporarily implemented in HtmlPlugin */
/* .with-readability #livemark-left::-webkit-scrollbar, */
/* .with-readability #livemark-right::-webkit-scrollbar { */
  /* display: unset !important; [> Chrome; Safari <] */
/* } */

</style>
<style>

.livemark-image {
  padding-bottom: 10px;
}

</style>
<style>

.livemark-infinity {
  display: none;
}

</style>
<style>

#livemark-mobile {
  position: absolute;
  visibility: hidden;
  z-index: 10000;
  /* NOTE: We can't use "right" because of Mobile Chrome and #34 */
  left: calc(100vw - 60px);
  top: 24px;
}

#livemark-mobile .stack {
  margin-top: 15px;
  display: block;
  cursor: pointer;
}

#livemark-mobile .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #aaa;
}

@media only screen and (max-width: 768px) {
  #livemark-mobile {
    visibility: visible;
  }

  #livemark-mobile.active {
    position: fixed;
  }

  #livemark-mobile.active .bar:nth-child(2) {
    opacity: 0;
  }

  #livemark-mobile.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  #livemark-mobile.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  #livemark-left {
      position: fixed;
      top: 0;
      left: -100vw;
      padding-top: 35px;
      background-color: #fff;
      width: 100vw;
      border-radius: 10px;
      text-align: center;
      transition: 0.3s;
      box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
      visibility: visible;
      z-index: 1000;
  }

  #livemark-left.active {
    left: 0;
  }
}

</style>
<link rel="stylesheet" href="https://unpkg.com/paginationjs@2.1.5/dist/pagination.css">
<style>

.livemark-pagination {
  display: none;
}

</style>
<style>

.livemark-remark {
  display: block;
}

</style>
<style>

#livemark-search {
  position: fixed;
  left: 30px;
  width: 240px;
  bottom: 20px;
  z-index:100;
  visibility: hidden;
}

@media only screen and (min-width: 992px) {
  #livemark-search {
    visibility: visible;
  }
}

#livemark-search-input {
  width: 100%;
  outline: none;
  font-size: 20px;
  padding: 7px 10px;
  border-radius: 20px;
  border: solid 1px #ddd;
  box-shadow: 0px 7px 10px #eee;
  color: #888;
}

#livemark-search-input::placeholder {
  color: #888;
}

#livemark-search-input::-webkit-search-decoration,
#livemark-search-input::-webkit-search-cancel-button,
#livemark-search-input::-webkit-search-results-button,
#livemark-search-input::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

#livemark-search-output {
  visibility: hidden;
  width: 100%;
  font-size: 16px;
  padding: 10px 10px;
  border-radius: 20px;
  border: solid 1px #ddd;
  box-shadow: 0px 7px 10px #eee;
  background: white;
  margin-bottom: 10px;
}

#livemark-search-output ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#livemark-search-output li.active {
  font-size: 20px;
  font-weight: bold;
}

#livemark-search-output a {
  color: #5CC820;
  text-decoration: underline;
}

.livemark-search-found {
  background-color: #5CC820;
  color: white;
  font-weight: bold;
  padding: 5px;
  border-radius: 5px;
}

</style>
<style>

#livemark-main h2 .livemark-source-button {
  float: right;
  display: none;
}

#livemark-main h2:hover .livemark-source-button {
  display: inline;
  margin-left: 8px;
  color: #aaa;
  font-weight: normal;
  text-decoration: none;
}

#livemark-main h2 .livemark-source-button:hover {
  text-decoration: underline;
}

.livemark-source-section {
  border: dashed 1px #ccc;
}

</style>
<style>

.nav-tabs {
    padding-left: 0 !important;
}

.nav-item {
    margin-top: 0 !important;
}

</style>
<style>

.livemark-task pre:first-child {
  margin-bottom: 0 !important;
  border-bottom: dashed 1px #ccc;
}

</style>
<style>

.livemark-video {
  padding-bottom: 10px;
}

</style>
</head>
<body>
<div id="livemark-left">

<div id="livemark-brand">
  <ul>
    <li>
      <a class="active" href="..">
        COVID-19 Tracker
      </a>
    </li>
  </ul>
</div>

<div id="livemark-pages">
  <ul class="primary">
        <li class="primary  ">
      <a href="../index.html" class="primary">
        World
      </a>
          </li>
        <li class="primary  ">
      <a href="regions.html" class="primary">
        Regions
      </a>
          </li>
        <li class="primary  ">
      <a href="countries.html" class="primary">
        Countries
      </a>
          </li>
        <li class="primary  ">
      <a href="mortality.html" class="primary">
        Excess Mortality
      </a>
          </li>
        <li class="primary  ">
      <a href="immunity.html" class="primary">
        Rolling Immunity
      </a>
          </li>
        <li class="primary  ">
      <a href="data.html" class="primary">
        Data Collection
      </a>
          </li>
        <li class="primary  active">
      <a href="contrib.html" class="primary">
        Contribute
      </a>
          </li>
        <li class="primary  ">
      <a href="forum.html" class="primary">
        Forum
      </a>
          </li>
        <li class="primary  ">
      <a href="../blog/index.html" class="primary">
        Blog
      </a>
          </li>
      </ul>
</div>
</div>
<div id="livemark-main">
<div id="livemark-notes">
      <a href="https://github.com/frictionlessdata/covid-tracker/edit/main/pages/contrib.md" target="_blank">Edit page </a> in <a href="https://livemark.frictionlessdata.io" target="_blank"> Livemark </a><br>
    (2023-07-11 07:52)
</div>

<h1>Contribute</h1>
<p>Welcome! We're happy you'd like to contribute! This is an open project, and we value contributions from everyone.</p>
<p>We use Github as a code and issues hosting platform. To report a bug or propose a new feature, please open an <a href="https://github.com/frictionlessdata/covid-tracker/issues">issue</a>. For pull requests, we would ask you initially create an issue and then create a pull requests linked to this issue.</p>
<h2>Setup</h2>
<p>To start working on the project clone the repository and enter its directory:</p>
<div><pre><code class="language-bash">$ git clone git@github.com:frictionlessdata/covid-tracker.git
$ cd covid-tracker
</code></pre>
</div><p>Create a virtual environment (optional):</p>
<div><pre><code class="language-bash">$ python3 -m venv .python
$ source .python/bin/activate
</code></pre>
</div><p>And install livemark:</p>
<div><pre><code>$ pip install livemark
</code></pre>
</div><h2>Install</h2>
<p>Run the following command to install dependencies:</p>
<div data-id="install"><div class="livemark-task"><pre><code class="language-bash">$ livemark run install</code></pre>

<pre><code class="language-bash">pip install -r requirements.txt
</code></pre>
</div></div><h2>Data</h2>
<p>To collect the data use the data collection script (run only if you want to update the data):</p>
<div><pre><code class="language-bash">$ livemark run data
</code></pre>
</div><p>See in-detail on the <a href="data.html">Data Collection</a> page.</p>
<h2>Build</h2>
<blockquote>
<p>See the Livemark documentation for full details: <a href="https://livemark.frictionlessdata.io/">https://livemark.frictionlessdata.io/</a></p>
</blockquote>
<p>You can then use the command-line interface to build the output HTML file:</p>
<div><pre><code class="language-bash">$ livemark build
</code></pre>
</div><p>Or start a livereload server to automatically reload the output page as you modify the input Markdown document:</p>
<div><pre><code class="language-bash">$ livemark start
</code></pre>
</div><h2>Deploy</h2>
<p>The project is deployed automatically to Github Pages on every push to "main". That means that the page will automatically be deployed every time there is a change approved from a Pull Request.</p>
<p>If you'd like to update Github Issue/PR templates run this command:</p>
<div data-id="github"><div class="livemark-task"><pre><code class="language-bash">$ livemark run github</code></pre>

<pre><code class="language-bash">sed -i -E "s/@(\w*)/@$(head -n 1 LEAD.md)/" .github/issue_template.md
sed -i -E "s/@(\w*)/@$(head -n 1 LEAD.md)/" .github/pull_request_template.md
</code></pre>
</div></div>

<div id="livemark-signs">
  <div>
        <div class="next">
      <a href="forum.html">
        Forum »
      </a>
    </div>
            <div class="prev">
      <a href="data.html">
        « Data Collection
      </a>
    </div>
      </div>
</div>
</div>
<div id="livemark-right">

<div id="livemark-rating">
  <iframe src="https://ghbtns.com/github-btn.html?user=frictionlessdata&amp;repo=covid-tracker&amp;type=star&amp;count=true&amp;size=large" width="160px" height="30px" title="GitHub">
  </iframe>
</div>

<div id="livemark-topics">
  <div class="toc">
  </div>
</div>
</div>
<script src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/prismjs@1.23.0/components/prism-core.min.js"></script>
<script src="https://unpkg.com/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script>

document.addEventListener("DOMContentLoaded", function () {
  const content = document.querySelector("#livemark-main");
  const headings = content.querySelectorAll("h1, h2, h3, h4, h5, h6, h7");
  const headingMap = {};

  // Add identifiers
  Array.prototype.forEach.call(headings, function (heading) {
    const id = heading.id
      ? heading.id
      : heading.textContent
          .trim()
          .toLowerCase()
          .split(" ")
          .join("-")
          .replace(/[!@#$%^&*():]/gi, "")
          .replace(/\//gi, "-");
    headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
    if (headingMap[id]) {
      heading.id = id + "-" + headingMap[id];
    } else {
      heading.id = id;
    }
  });

  // Add links
  Array.prototype.forEach.call(headings, function (heading) {
    const link = document.createElement("a");
    link.href = "#" + heading.id;
    link.innerText = "#";
    link.classList.add("heading");
    heading.appendChild(link);
  });
});

</script>
<script>

document.addEventListener("DOMContentLoaded", function () {
  const groups = $("#livemark-pages li.group");
  for (const group of groups) {
    $(group)
      .children("a")
      .click((ev) => {
        ev.preventDefault();
        $(group).toggleClass("active");
        // $(group).find(".fa").toggleClass("fa-chevron-right");
        // $(group).find(".fa").toggleClass("fa-chevron-down");
      });
  }
});

</script>
<script src="https://unpkg.com/tocbot@4.12.3/dist/tocbot.min.js"></script>
<script>

document.addEventListener("DOMContentLoaded", function () {
  // Start tocbot
  tocbot.init({
    // Where to render the table of contents.
    tocSelector: ".toc",
    // Where to grab the headings to build the table of contents.
    contentSelector: "#livemark-main",
    // Which headings to grab inside of the contentSelector element.
    headingSelector: "h2",
    // For headings inside relative or absolute positioned containers within content.
    hasInnerContainers: true,
    // Called each time a heading is parsed. Expects a string in return.
    headingLabelCallback: (label) => {
      label = label.replace(/(^#|#$)/g, "").trim();
      // label = label.replace(/\(.*?\)$/g, "");
      return label;
    },
    // Disable generating ordered lists (ol)
    orderedList: false,
    // Fix active link class
    onClick: syncList,
    scrollEndCallback: syncList,
  });

  // Style list
  $("#livemark-topics .toc > ul").addClass("primary");
  $("#livemark-topics .toc > ul > li").addClass("primary");
  $("#livemark-topics .toc > ul > li > a").addClass("primary");
  $("#livemark-topics .toc ul.is-collapsible").addClass("secondary");
  $("#livemark-topics .toc ul.is-collapsible li").addClass("secondary");
  $("#livemark-topics .toc ul.is-collapsible li > a").addClass("secondary");
  for (const element of $("#livemark-topics .primary")) {
    if ($(element).find(".secondary").length) {
      $(element).addClass("group");
    }
  }

  // Sync list
  function syncList() {
    for (const element of $("#livemark-topics li.primary")) {
      if ($(element).find(".is-active-li").length) {
        $(element).addClass("is-active-li");
      }
    }
  }
  syncList();
});

</script>
<script>

document.addEventListener("DOMContentLoaded", function () {
  const handlePopstate = async () => {
    const href = location.hash;
    if (href.startsWith("#card=")) {
      const code = href.split("=")[1];
      const response = await fetch(`/assets/cards/${code}.html`);
      const html = await response.text();
      $("#livemark-cards .modal-title").html("");
      $("#livemark-cards .modal-body").html(html);
      $("#livemark-cards h1").appendTo("#livemark-cards .modal-title");
      $("#livemark-cards .modal").modal();
      $("#livemark-cards .modal").on("hidden.bs.modal", () => {
        history.pushState("", document.title, window.location.pathname);
      });
    }
  };
  window.addEventListener("popstate", handlePopstate);
  handlePopstate();
});

</script>

<div id="livemark-cards">
  <div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://unpkg.com/ue-scroll-js@2.0.2/dist/ue-scroll.min.js"></script>
<script>

document.addEventListener("DOMContentLoaded", function () {
  // Init
  const readability = localStorage.getItem("livemark-display-readability");
  if (readability === "plus") {
    document.body.classList.add("with-readability");
  } else {
    document.body.classList.remove("with-readability");
  }

  // Plus
  document
    .getElementById("livemark-display-plus")
    .addEventListener("click", function () {
      document.body.classList.add("with-readability");
      localStorage.setItem("livemark-display-readability", "plus");
    });

  // Minus
  document
    .getElementById("livemark-display-minus")
    .addEventListener("click", function () {
      document.body.classList.remove("with-readability");
      localStorage.setItem("livemark-display-readability", "minus");
    });

  // Print
  document
    .getElementById("livemark-display-print")
    .addEventListener("click", function () {
      window.print();
    });

  // Scroll
  const scrollSpeed = parseInt("10");
  UeScroll.init({ element: "#livemark-display-scroll .fa", scrollSpeed });
});

</script>

<div id="livemark-display">
  <div class="control" id="livemark-display-print" title="Print">
    <span class="fa fa-print"></span>
  </div>
  <div class="control" id="livemark-display-plus" title="Increase readability">
    <span class="fa fa-plus"></span>
  </div>
  <div class="control" id="livemark-display-minus" title="Decrease readability">
    <span class="fa fa-minus"></span>
  </div>
  <div class="control" id="livemark-display-scroll" title="Back to top">
    <span class="fa fa-chevron-up"></span>
  </div>
</div>
<script>

document.addEventListener("DOMContentLoaded", function () {
  const container = $(".livemark-infinity");
  if (container.length) {
    const elements = container
      .children()
      .map((index, element) => element.outerHTML)
      .get();
    container.html(elements.splice(0, 100));
    container.show();
    window.addEventListener("scroll", () => {
      const element = container.get(0);
      const position = window.scrollY + window.innerHeight + 100;
      const threshold = element.offsetTop + element.scrollHeight;
      if (position > threshold) {
        container.append(elements.splice(0, 100));
      }
    });
  }
});

</script>
<script>

document.addEventListener("DOMContentLoaded", function () {
  const left = document.getElementById("livemark-left");
  const mobile = document.getElementById("livemark-mobile");
  mobile.addEventListener("click", () => {
    left.classList.toggle("active");
    mobile.classList.toggle("active");
  });
  // NOTE: We can replace the selector by 'a:not[href=""]' after #57
  left.querySelectorAll("li:not(.group) a").forEach((link) => {
    link.addEventListener("click", () => {
      if (left.classList.contains("active")) {
        left.classList.remove("active");
        mobile.classList.remove("active");
      }
    });
  });
});

</script>

<div id="livemark-mobile">
  <div class="stack" title="Toggle menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
</div>
<script src="https://unpkg.com/paginationjs@2.1.5/dist/pagination.min.js"></script>
<script>

document.addEventListener("DOMContentLoaded", function () {
  const container = $(".livemark-pagination");
  if (container.length) {
    const elements = container
      .children()
      .map((index, element) => element.outerHTML)
      .get();
    container.html(`
      <div class="livemark-pagination-data"></div>
      <div class="livemark-pagination-navs"></div>
    `);
    container.find(".livemark-pagination-navs").pagination({
      dataSource: elements,
      callback: (html) => {
        container.find(".livemark-pagination-data").html(html);
      },
    });
    container.show();
  }
});

</script>
<script src="https://unpkg.com/lunr@2.3.9/lunr.min.js"></script>
<script src="https://unpkg.com/jquery-highlight@3.5.0/jquery.highlight.js"></script>
<script src="https://unpkg.com/jquery.scrollto@2.1.3/jquery.scrollTo.js"></script>
<script>

document.addEventListener("DOMContentLoaded", function () {
  const prepare = () => {
    const searchParams = new URLSearchParams(window.location.search);
    const query = searchParams.get('query') || ''
    if (query.length >= 3) {
      searchInput.value = query
    }
  }
  const search = () => {
    unhighlight()
    query = searchInput.value
    searchOutput.innerHTML = ''
    searchOutput.style.visibility = 'hidden'
    const searchParams = new URLSearchParams(window.location.search);
    if (query.length < 3) return
    const results = searchIndex.search(query)
    if (!results.length) return
    searchParams.set('query', query)
    const newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);
    const elements = []
    for (const result of results) {
      const item = searchItems[result.ref]
      const link = `${item.relpath}.html`
      const cls = window.location.pathname === link ? 'class="active"' : ''
      elements.push(`<li ${cls}><a href="${link}?query=${query}">${item.name}</a></li>`)
    }
    searchOutput.innerHTML = `<ul>\n${elements.join('\n')}\n</ul>`
    searchOutput.style.visibility = 'visible'
    highlight()
  }
  const highlight = () => {
    const stem = lunr.stemmer(new lunr.Token(query)).str
    $('#livemark-main').highlight(stem, {className: 'livemark-search-found'});
    setTimeout(() => {
      $(window).scrollTo($('.livemark-search-found').first(), 1000)
    }, 1000)
  }
  const unhighlight = () => {
    $('#livemark-main').unhighlight({className: 'livemark-search-found'});
  }
  const searchItems = {
          'index': {
          'name': 'COVID-19 Tracker',
          'path': 'index',
          'relpath': '../index',
          'text': "# COVID-19 Tracker [![Build](https://img.shields.io/github/actions/workflow/status/frictionlessdata/covid-tracker/general.yaml?branch=main)](https://github.com/frictionlessdata/covid-tracker/actions) [![Codebase](https://img.shields.io/badge/codebase-github-brightgreen)](https://github.com/frictionlessdata/covid-tracker) [![Support](https://img.shields.io/badge/support-discord-brightgreen)](https://discord.com/channels/695635777199145130/695635777199145133) ```yaml remark type: primary text: \"Last data update: 2023-07-10 (this site is being updated on a nightly basis).\" ``` **Coronavirus disease 2019 (COVID-19)**, also known as [COVID](https://en.wikipedia.org/wiki/COVID-19) and the coronavirus, is a contagious disease caused by severe acute respiratory syndrome coronavirus 2 (SARS-CoV-2). The data dashboard has been created by the Frictionless Data team and it\u0027s open for contributing for anyone who is interested. The main COVID-19 data resources we use for this project are [Our World in Data](https://ourworldindata.org/coronavirus) core data and [Excess Mortality](https://github.com/dkobak/excess-mortality) research. ## Status The main three core metrics we track: total deaths, total cases, and all the vaccination shots taken (worldwide): ```html markup Deaths 6.9M Cases 767.7M Vaccinations 13.5B ``` ## Deaths Here is a timeline of the worldwide deaths caused by the COVID-19 pandemic: ```json chart { \"width\": 800, \"data\": {\"url\": \"data/locations/OWID_WRL/timeline.csv\"}, \"encoding\": { \"x\": {\"field\": \"date\", \"type\": \"temporal\"}, \"y\": {\"field\": \"new_deaths\", \"type\": \"quantitative\", \"scale\": {\"domainMin\": 0}}, \"tooltip\": [ { \"field\": \"date\", \"type\": \"temporal\", \"title\": \"Date\" }, { \"field\": \"new_deaths\", \"type\": \"quantitative\", \"title\": \"Deaths\" } ] }, \"mark\": { \"type\": \"area\", \"line\": {\"color\": \"red\"}, \"color\": { \"x1\": 1, \"y1\": 1, \"x2\": 1, \"y2\": 0, \"gradient\": \"linear\", \"stops\": [{\"offset\": 0, \"color\": \"white\"}, {\"offset\": 1, \"color\": \"red\"}] } } } ``` ## New Cases The new cases data is less reliable as cases registration really depends on the testing volume and methodology: ```json chart { \"width\": 800, \"data\": {\"url\": \"data/locations/OWID_WRL/timeline.csv\"}, \"encoding\": { \"x\": {\"field\": \"date\", \"type\": \"temporal\"}, \"y\": {\"field\": \"new_cases\", \"type\": \"quantitative\", \"scale\": {\"domainMin\": 0}}, \"tooltip\": [ { \"field\": \"date\", \"type\": \"temporal\", \"title\": \"Date\" }, { \"field\": \"new_cases\", \"type\": \"quantitative\", \"title\": \"Cases\" } ] }, \"mark\": { \"type\": \"area\", \"line\": {\"color\": \"blue\"}, \"color\": { \"x1\": 1, \"y1\": 1, \"x2\": 1, \"y2\": 0, \"gradient\": \"linear\", \"stops\": [{\"offset\": 0, \"color\": \"white\"}, {\"offset\": 1, \"color\": \"blue\"}] } } } ``` ## Vaccinations The vaccination campaign had been started around January 2021; this chart shows all the shots taken: ```json chart { \"width\": 800, \"data\": {\"url\": \"data/locations/OWID_WRL/timeline.csv\"}, \"encoding\": { \"x\": {\"field\": \"date\", \"type\": \"temporal\"}, \"y\": {\"field\": \"new_vaccinations\", \"type\": \"quantitative\", \"scale\": {\"domainMin\": 0}}, \"tooltip\": [ { \"field\": \"date\", \"type\": \"temporal\", \"title\": \"Date\" }, { \"field\": \"new_vaccinations\", \"type\": \"quantitative\", \"title\": \"Shots\" } ] }, \"mark\": { \"type\": \"area\", \"line\": {\"color\": \"green\"}, \"color\": { \"x1\": 1, \"y1\": 1, \"x2\": 1, \"y2\": 0, \"gradient\": \"linear\", \"stops\": [{\"offset\": 0, \"color\": \"white\"}, {\"offset\": 1, \"color\": \"green\"}] } } } ``` ## Locations Here is a summary of the key pandemic data: ```yaml table data: data/reports/world.csv order: - [1, \u0027desc\u0027] columns: - name: Location data: link type: string - name: Deaths data: total_deaths - name: Deaths/1M data: total_deaths_per_million - name: Cases data: total_cases - name: Cases/1M data: total_cases_per_million - name: Shots data: total_vaccinations - name: Shots/100 data: total_vaccinations_per_hundred ``` ## About The purpose of this site is to display analyzed COVID-19 data in a helpful way. On the homepage, you can find summary data for total counts of death, case numbers, and vaccinations from around the world. There are also separate pages displaying similar data but for specific world [regions](/pages/regions.html) and [countries](/pages/countries.html), as well as displaying calculated data like [excess mortality](/pages/mortality.html) and [rolling immunity](/pages/immunity.html). This site is build on the open source Frictionless Livemark tool, and all data collection information is freely shared on the [data collection page](/pages/data.html). Additionally, all source code for the data visualisations can be found on the [GitHub repository](https://github.com/frictionlessdata/covid-tracker). Finally, this is a community project, and anyone is welcome to [contribute](/pages/contrib.html)!",
      },
          'pages/regions': {
          'name': 'Regions',
          'path': 'pages/regions',
          'relpath': 'regions',
          'text': "# Regions This page displays the total count of deaths, case numbers, and vaccinations for regions of the world. ## Deaths Here is an interactive map showing the count of total deaths per region: ```json chart { \"width\": 800, \"height\": 400, \"data\": { \"url\": \"../data/spatial/regions.json\", \"format\": {\"property\": \"features\"} }, \"transform\": [ { \"lookup\": \"properties.CONTINENT\", \"from\": { \"data\": { \"url\": \"../data/reports/regions.csv\" }, \"key\": \"location\", \"fields\": [\"iso_code\", \"location\", \"total_deaths_per_million\"] } }, { \"calculate\": \"\u0027#card=\u0027 + datum.iso_code\", \"as\": \"url\" } ], \"projection\": {\"type\": \"mercator\"}, \"mark\": { \"type\": \"geoshape\", \"stroke\": \"#757575\", \"strokeWidth\": 0.5 }, \"encoding\": { \"color\": { \"field\": \"total_deaths_per_million\", \"type\": \"quantitative\", \"scale\": {\"scheme\": \"reds\"}, \"legend\": { \"title\": \"Deaths/1M\" } }, \"tooltip\": [ { \"field\": \"properties.CONTINENT\", \"type\": \"nominal\", \"title\": \"Region\" }, { \"field\": \"total_deaths_per_million\", \"type\": \"quantitative\", \"title\": \"Deaths/1M\" } ], \"href\": {\"field\": \"url\", \"type\": \"nominal\"} } } ``` ## Total Cases Here is an interactive map showing the count of total cases per region: ```json chart { \"width\": 800, \"height\": 400, \"data\": { \"url\": \"../data/spatial/regions.json\", \"format\": {\"property\": \"features\"} }, \"transform\": [ { \"lookup\": \"properties.CONTINENT\", \"from\": { \"data\": { \"url\": \"../data/reports/regions.csv\" }, \"key\": \"location\", \"fields\": [\"iso_code\", \"location\", \"total_cases_per_million\"] } }, { \"calculate\": \"\u0027#card=\u0027 + datum.iso_code\", \"as\": \"url\" } ], \"projection\": {\"type\": \"mercator\"}, \"mark\": { \"type\": \"geoshape\", \"stroke\": \"#757575\", \"strokeWidth\": 0.5 }, \"encoding\": { \"color\": { \"field\": \"total_cases_per_million\", \"type\": \"quantitative\", \"scale\": {\"scheme\": \"blues\"}, \"legend\": { \"title\": \"Cases/1M\" } }, \"tooltip\": [ { \"field\": \"properties.CONTINENT\", \"type\": \"nominal\", \"title\": \"Region\" }, { \"field\": \"total_cases_per_million\", \"type\": \"quantitative\", \"title\": \"Cases/1M\" } ], \"href\": {\"field\": \"url\", \"type\": \"nominal\"} } } ``` ## Vaccinations Here is an interactive map showing the amount of total shots taken per region: ```json chart { \"width\": 800, \"height\": 400, \"data\": { \"url\": \"../data/spatial/regions.json\", \"format\": {\"property\": \"features\"} }, \"transform\": [ { \"lookup\": \"properties.CONTINENT\", \"from\": { \"data\": { \"url\": \"../data/reports/regions.csv\" }, \"key\": \"location\", \"fields\": [\"iso_code\", \"location\", \"total_vaccinations_per_hundred\"] } }, { \"calculate\": \"\u0027#card=\u0027 + datum.iso_code\", \"as\": \"url\" } ], \"projection\": {\"type\": \"mercator\"}, \"mark\": { \"type\": \"geoshape\", \"stroke\": \"#757575\", \"strokeWidth\": 0.5 }, \"encoding\": { \"color\": { \"field\": \"total_vaccinations_per_hundred\", \"type\": \"quantitative\", \"scale\": {\"scheme\": \"greens\"}, \"legend\": { \"title\": \"Shots/100\" } }, \"tooltip\": [ { \"field\": \"properties.CONTINENT\", \"type\": \"nominal\", \"title\": \"Region\" }, { \"field\": \"total_vaccinations_per_hundred\", \"type\": \"quantitative\", \"title\": \"Shots/100\" } ], \"href\": {\"field\": \"url\", \"type\": \"nominal\"} } } ``` ## Locations Here is a summary of the key pandemic data by region: ```yaml table data: data/reports/regions.csv order: - [1, \u0027desc\u0027] columns: - name: Location data: link type: string - name: Deaths data: total_deaths - name: Deaths/1M data: total_deaths_per_million - name: Cases data: total_cases - name: Cases/1M data: total_cases_per_million - name: Shots data: total_vaccinations - name: Shots/100 data: total_vaccinations_per_hundred ```",
      },
          'pages/countries': {
          'name': 'Countries',
          'path': 'pages/countries',
          'relpath': 'countries',
          'text': "# Countries This page displays the total count of deaths, case numbers, and vaccinations for countries of the world. ## Deaths Here is an interactive map showing the count of total deaths per country: ```json chart { \"width\": 800, \"height\": 400, \"data\": { \"url\": \"../data/spatial/countries.json\", \"format\": {\"property\": \"features\"} }, \"transform\": [ { \"lookup\": \"properties.name\", \"from\": { \"data\": { \"url\": \"../data/reports/countries.csv\" }, \"key\": \"location\", \"fields\": [\"iso_code\", \"location\", \"total_deaths_per_million\"] } }, { \"calculate\": \"\u0027#card=\u0027 + datum.iso_code\", \"as\": \"url\" } ], \"projection\": {\"type\": \"mercator\"}, \"mark\": { \"type\": \"geoshape\", \"stroke\": \"#757575\", \"strokeWidth\": 0.5 }, \"encoding\": { \"color\": { \"field\": \"total_deaths_per_million\", \"type\": \"quantitative\", \"scale\": {\"scheme\": \"reds\"}, \"legend\": { \"title\": \"Deaths/1M\" } }, \"tooltip\": [ { \"field\": \"properties.name\", \"type\": \"nominal\", \"title\": \"Country\" }, { \"field\": \"total_deaths_per_million\", \"type\": \"quantitative\", \"title\": \"Deaths/1M\" } ], \"href\": {\"field\": \"url\", \"type\": \"nominal\"} } } ``` ## Total Cases Here is an interactive map showing the count of total cases per country: ```json chart { \"width\": 800, \"height\": 400, \"data\": { \"url\": \"../data/spatial/countries.json\", \"format\": {\"property\": \"features\"} }, \"transform\": [ { \"lookup\": \"properties.name\", \"from\": { \"data\": { \"url\": \"../data/reports/countries.csv\" }, \"key\": \"location\", \"fields\": [\"iso_code\", \"location\", \"total_cases_per_million\"] } }, { \"calculate\": \"\u0027#card=\u0027 + datum.iso_code\", \"as\": \"url\" } ], \"projection\": {\"type\": \"mercator\"}, \"mark\": { \"type\": \"geoshape\", \"stroke\": \"#757575\", \"strokeWidth\": 0.5 }, \"encoding\": { \"color\": { \"field\": \"total_cases_per_million\", \"type\": \"quantitative\", \"scale\": {\"scheme\": \"blues\"}, \"legend\": { \"title\": \"Cases/1M\" } }, \"tooltip\": [ { \"field\": \"properties.name\", \"type\": \"nominal\", \"title\": \"Country\" }, { \"field\": \"total_cases_per_million\", \"type\": \"quantitative\", \"title\": \"Cases/1M\" } ], \"href\": {\"field\": \"url\", \"type\": \"nominal\"} } } ``` ## Vaccinations Here is an interactive map showing the amount of total shots taken per country: ```json chart { \"width\": 800, \"height\": 400, \"data\": { \"url\": \"../data/spatial/countries.json\", \"format\": {\"property\": \"features\"} }, \"transform\": [ { \"lookup\": \"properties.name\", \"from\": { \"data\": { \"url\": \"../data/reports/countries.csv\" }, \"key\": \"location\", \"fields\": [\"iso_code\", \"location\", \"total_vaccinations_per_hundred\"] } }, { \"calculate\": \"\u0027#card=\u0027 + datum.iso_code\", \"as\": \"url\" } ], \"projection\": {\"type\": \"mercator\"}, \"mark\": { \"type\": \"geoshape\", \"stroke\": \"#757575\", \"strokeWidth\": 0.5 }, \"encoding\": { \"color\": { \"field\": \"total_vaccinations_per_hundred\", \"type\": \"quantitative\", \"scale\": {\"scheme\": \"greens\"}, \"legend\": { \"title\": \"Shots/100\" } }, \"tooltip\": [ { \"field\": \"properties.name\", \"type\": \"nominal\", \"title\": \"Country\" }, { \"field\": \"total_vaccinations_per_hundred\", \"type\": \"quantitative\", \"title\": \"Shots/100\" } ], \"href\": {\"field\": \"url\", \"type\": \"nominal\"} } } ``` ## Locations Here is a summary of the key pandemic data by country: ```yaml table data: data/reports/countries.csv order: - [1, \u0027desc\u0027] columns: - name: Location data: link type: string - name: Deaths data: total_deaths - name: Deaths/1M data: total_deaths_per_million - name: Cases data: total_cases - name: Cases/1M data: total_cases_per_million - name: Shots data: total_vaccinations - name: Shots/100 data: total_vaccinations_per_hundred ```",
      },
          'pages/mortality': {
          'name': 'Excess Mortality',
          'path': 'pages/mortality',
          'relpath': 'mortality',
          'text': "# Excess Mortality **Excess mortality** is a [term](https://odihpn.org/resources/interpreting-and-using-mortality-data-in-humanitarian-emergencies/) used in epidemiology and public health that refers to the number of deaths from all causes during a crisis above and beyond what we would have expected to see under \u2018normal\u2019 conditions. ## Deaths Here is a representation of excess mortality per country on the world map: ```json chart { \"width\": 800, \"height\": 400, \"data\": { \"url\": \"../data/spatial/countries.json\", \"format\": {\"property\": \"features\"} }, \"transform\": [ { \"lookup\": \"properties.name\", \"from\": { \"data\": { \"url\": \"../data/reports/mortality.csv\" }, \"key\": \"Country\", \"fields\": [\"Country\", \"Excess per 100k\"] } } ], \"projection\": {\"type\": \"mercator\"}, \"mark\": { \"type\": \"geoshape\", \"stroke\": \"#757575\", \"strokeWidth\": 0.5 }, \"encoding\": { \"color\": { \"field\": \"Excess per 100k\", \"type\": \"quantitative\", \"scale\": {\"scheme\": \"Reds\"}, \"legend\": { \"title\": \"Deaths/100k\" } }, \"tooltip\": [ { \"field\": \"properties.name\", \"type\": \"nominal\", \"title\": \"Country\" }, { \"field\": \"Excess per 100k\", \"type\": \"quantitative\", \"title\": \"Deaths/100k\" } ] } } ``` ## Locations Here is a list of excess deaths by countries: ```yaml table data: data/reports/mortality.csv order: - [1, \u0027desc\u0027] columns: - name: Location data: Country - name: Deaths data: Excess deaths - name: Deaths/100k data: Excess per 100k - name: Undercount data: Undercount ratio type: num - name: Last Updated data: Data until ``` ## Methodology This page is based on researh by [Karlinsky \u0026 Kobak](https://github.com/dkobak/excess-mortality). The numbers are based on the World Mortality Dataset and the idea the comparing expected mortality trends with real mortality during pandemic we can calculate the real deaths amount as some countries might provide innacurate data.",
      },
          'pages/immunity': {
          'name': 'Rolling Immunity',
          'path': 'pages/immunity',
          'relpath': 'immunity',
          'text': "# Rolling Immunity ```yaml remark type: warning text: This website is data journalism rather than scientific work. Immunity/antibodies analysis is a complicated matter. You can read more about it, for example, in this scientific paper (DOI). ``` **Rolling immunity** (in terms of this page) is a collective immunity metric based on factual uses cases (counted using deaths) and vaccination shots timeline and the fact that individual immunity decreases over time. This page is about finding relations with pandemic outbreaks and the rolling immunity concept. ## Examples To showcase the idea of rolling immunity, we use 5 countries having different vaccination timeframes. The Israel use case **might** be showing that having too fast of a vaccination campaign leads to outbreaks due to low levels of rolling immunity. This USA case **might** be showing that the vaccination level wasn\u0027t enough. ### Israel ```json chart { \"width\": 800, \"data\": {\"url\": \"../data/locations/ISR/timeline.csv\"}, \"resolve\": {\"scale\": {\"y\": \"independent\"}}, \"encoding\": { \"x\": {\"field\": \"date\", \"type\": \"temporal\"} }, \"layer\": [ { \"mark\": \"line\", \"encoding\": { \"y\": {\"field\": \"new_deaths_per_million\", \"type\": \"quantitative\", \"scale\": {\"domainMin\": 0}}, \"color\": {\"value\": \"red\"} } }, { \"mark\": \"line\", \"encoding\": { \"y\": {\"field\": \"rolling_immunity\", \"type\": \"quantitative\", \"scale\": {\"domain\": [0, 1]}}, \"color\": {\"value\": \"green\"} } } ] } ``` ### USA ```json chart { \"width\": 800, \"data\": {\"url\": \"../data/locations/USA/timeline.csv\"}, \"resolve\": {\"scale\": {\"y\": \"independent\"}}, \"encoding\": { \"x\": {\"field\": \"date\", \"type\": \"temporal\"} }, \"layer\": [ { \"mark\": \"line\", \"encoding\": { \"y\": {\"field\": \"new_deaths_per_million\", \"type\": \"quantitative\", \"scale\": {\"domainMin\": 0}}, \"color\": {\"value\": \"red\"} } }, { \"mark\": \"line\", \"encoding\": { \"y\": {\"field\": \"rolling_immunity\", \"type\": \"quantitative\", \"scale\": {\"domain\": [0, 1]}}, \"color\": {\"value\": \"green\"} } } ] } ``` ### UK ```json chart { \"width\": 800, \"data\": {\"url\": \"../data/locations/GBR/timeline.csv\"}, \"resolve\": {\"scale\": {\"y\": \"independent\"}}, \"encoding\": { \"x\": {\"field\": \"date\", \"type\": \"temporal\"} }, \"layer\": [ { \"mark\": \"line\", \"encoding\": { \"y\": {\"field\": \"new_deaths_per_million\", \"type\": \"quantitative\", \"scale\": {\"domainMin\": 0}}, \"color\": {\"value\": \"red\"} } }, { \"mark\": \"line\", \"encoding\": { \"y\": {\"field\": \"rolling_immunity\", \"type\": \"quantitative\", \"scale\": {\"domain\": [0, 1]}}, \"color\": {\"value\": \"green\"} } } ] } ``` ### Germany ```json chart { \"width\": 800, \"data\": {\"url\": \"../data/locations/DEU/timeline.csv\"}, \"resolve\": {\"scale\": {\"y\": \"independent\"}}, \"encoding\": { \"x\": {\"field\": \"date\", \"type\": \"temporal\"} }, \"layer\": [ { \"mark\": \"line\", \"encoding\": { \"y\": {\"field\": \"new_deaths_per_million\", \"type\": \"quantitative\", \"scale\": {\"domainMin\": 0}}, \"color\": {\"value\": \"red\"} } }, { \"mark\": \"line\", \"encoding\": { \"y\": {\"field\": \"rolling_immunity\", \"type\": \"quantitative\", \"scale\": {\"domain\": [0, 1]}}, \"color\": {\"value\": \"green\"} } } ] } ``` ### Brasil ```json chart { \"width\": 800, \"data\": {\"url\": \"../data/locations/BRA/timeline.csv\"}, \"resolve\": {\"scale\": {\"y\": \"independent\"}}, \"encoding\": { \"x\": {\"field\": \"date\", \"type\": \"temporal\"} }, \"layer\": [ { \"mark\": \"line\", \"encoding\": { \"y\": {\"field\": \"new_deaths_per_million\", \"type\": \"quantitative\", \"scale\": {\"domainMin\": 0}}, \"color\": {\"value\": \"red\"} } }, { \"mark\": \"line\", \"encoding\": { \"y\": {\"field\": \"rolling_immunity\", \"type\": \"quantitative\", \"scale\": {\"domain\": [0, 1]}}, \"color\": {\"value\": \"green\"} } } ] } ``` ## Locations Explore charts for other countries and [share](forum.html) what you think. Take into account that this methodology is very approximate as the numbers depend on the healthcare and vaccines efficacy in the exact country. This table uses 7 day moving averages for deaths and cases: ```yaml table data: data/reports/immunity.csv order: - [1, \u0027desc\u0027] columns: - name: Location data: link - name: Immunity data: rolling_immunity - name: Deaths/1M data: new_deaths_smoothed_per_million - name: Cases/1M data: new_cases_smoothed_per_million ``` ## Methodology We use oversimplified rolling immunity formula for a date. We use deaths instead of use cases to overcome the problem of inaccurate use cases reporting. The exact ratio is configurable; we use 1 death for 100 use cases based on known death rate for now around 50 use cases per a death and estimating unreported use cases as 50 use cases per 1 death: ``` rolling_immunity_for_a_date = (estimated_new_cases + new_vaccinations) / population estimated_new_cases = new_deaths * 100 ``` We count one case to be equal to one vaccination shot. For the model we use the decreasing ration `(180 - days)/180` meaning that you will lose all the immunity you had acquired in 180 days. Again, this parameter is configurable and might be changed in other models. ``` rolling_immunity_for_a_date = 100% rolling_immunity_for_a_date_in_180_days = 0% ``` Please take a look at the [full algorithm](data.html).",
      },
          'pages/data': {
          'name': 'Data Collection',
          'path': 'pages/data',
          'relpath': 'data',
          'text': "# Data Collection All data on this site was generated (cleaned, analysed) using the [Frictionless Python Framework](https://framework.frictionlessdata.io/) on openly availabe data. The data is from [Our World in Data](https://ourworldindata.org/coronavirus) and [Excess Mortality](https://github.com/dkobak/excess-mortality). Read on to see the Frictionless code that was used to analyse the data. ## Extract First of all, we need to extract all the data from [Our World in Data](https://ourworldindata.org/coronavirus) and [Excess Mortality](https://github.com/dkobak/excess-mortality) repositories: ```python task id=data-extract from frictionless import Resource OWID = \"https://covid.ourworldindata.org/data\" GITHUB = \"https://raw.githubusercontent.com\" # Timeline resource = Resource(f\"{OWID}/owid-covid-data.csv\") resource.write(\"data/timeline.csv\") print(f\"Extracted: timeline\") # Latest resource = Resource(f\"{OWID}/latest/owid-covid-latest.csv\") resource.write(\"data/latest.csv\") print(f\"Extracted: latest\") # Mortality resource = Resource(f\"{GITHUB}/dkobak/excess-mortality/main/excess-mortality.csv\") resource.write(\"data/reports/mortality.csv\") print(f\"Extracted: reports/mortality\") ``` ## Transform We will split the data by location and calculate rolling immunity: ```python task id=data-transform-timeline from pprint import pprint from frictionless import Resource, Detector FRAME = 180 detector = Detector(sample_size=10000) # Helpers def calculate_rolling_immunity(group): total_units = 0 for number, row in enumerate(reversed(group[-FRAME:]), start=1): if not row[\"population\"]: return 0 new_vaccinations = float(row[\"new_vaccinations\"] or 0) new_cases = float(row[\"new_deaths\"] or 0) * 100 # new_cases = float(row[\"new_cases\"] or 0) * 2 row_units = (new_cases + new_vaccinations) * ((FRAME - number + 1) / FRAME) row_units = row_units / float(row[\"population\"]) total_units += row_units return round(total_units, 2) def write_group(group): if group: row = group[-1].copy() path = f\"data/locations/{row[\u0027iso_code\u0027]}/timeline.csv\" Resource(group, detector=detector).write(path) if (row[\"population\"] or 0) \u003e 1000000: row[\"link\"] = f\"{row[\u0027location\u0027]}\" immunity.append(row) print(f\"Transformed timeline: {row[\u0027location\u0027]}\") # General immunity = [] with Resource(\"data/timeline.csv\", detector=detector) as resource: code = None group = [] for row in resource.row_stream: if code != row[\"iso_code\"]: write_group(group) code = row[\"iso_code\"] group = [] row = row.to_dict() row[\"rolling_immunity\"] = calculate_rolling_immunity(group) group.append(row) write_group(group) Resource(immunity).write(\"data/reports/immunity.csv\") ``` Also, we need to transform `data/latest.csv`: ```python task id=data-transform-latest from frictionless import Resource WORLD = [\"OWID_WRL\"] REGIONS = [\"OWID_AFR\", \"OWID_ASI\", \"OWID_EUR\", \"OWID_OCE\", \"OWID_NAM\", \"OWID_SAM\"] # General world = [] regions = [] countries = [] with Resource(\"data/latest.csv\") as resource: for row in resource.row_stream: row = row.to_dict() code = row[\"iso_code\"] row[\"link\"] = f\"{row[\u0027location\u0027]}\" path = f\"data/locations/{code}/latest.csv\" Resource([row]).write(path) if code in WORLD: world.append(row) elif code in REGIONS: regions.append(row) elif not code.startswith(\"OWID\"): countries.append(row) Resource(world).write(\"data/reports/world.csv\") Resource(regions).write(\"data/reports/regions.csv\") Resource(countries).write(\"data/reports/countries.csv\") print(\"Transformed latest\") ``` ## Load To show different locations as cards we render them: ```python task id=data-load from frictionless import Resource from livemark.plugins.cards import CardsPlugin # General CardsPlugin.delete_cards() with Resource(\"data/latest.csv\") as resource: for row in resource.row_stream: code = row[\"iso_code\"] CardsPlugin.create_card(\"cards/location.md\", code=code, data=row) print(f\"Loaded: {row[\u0027location\u0027]}\") ```",
      },
          'pages/contrib': {
          'name': 'Contribute',
          'path': 'pages/contrib',
          'relpath': 'contrib',
          'text': "# Contribute Welcome! We\u0027re happy you\u0027d like to contribute! This is an open project, and we value contributions from everyone. We use Github as a code and issues hosting platform. To report a bug or propose a new feature, please open an [issue](https://github.com/frictionlessdata/covid-tracker/issues). For pull requests, we would ask you initially create an issue and then create a pull requests linked to this issue. ## Setup To start working on the project clone the repository and enter its directory: ```bash $ git clone git@github.com:frictionlessdata/covid-tracker.git $ cd covid-tracker ``` Create a virtual environment (optional): ```bash $ python3 -m venv .python $ source .python/bin/activate ``` And install livemark: ``` $ pip install livemark ``` ## Install Run the following command to install dependencies: ```bash task id=install pip install -r requirements.txt ``` ## Data To collect the data use the data collection script (run only if you want to update the data): ```bash $ livemark run data ``` See in-detail on the [Data Collection](data.html) page. ## Build \u003e See the Livemark documentation for full details: https://livemark.frictionlessdata.io/ You can then use the command-line interface to build the output HTML file: ```bash $ livemark build ``` Or start a livereload server to automatically reload the output page as you modify the input Markdown document: ```bash $ livemark start ``` ## Deploy The project is deployed automatically to Github Pages on every push to \"main\". That means that the page will automatically be deployed every time there is a change approved from a Pull Request. If you\u0027d like to update Github Issue/PR templates run this command: ```bash task id=github sed -i -E \"s/@(\\w*)/@$(head -n 1 LEAD.md)/\" .github/issue_template.md sed -i -E \"s/@(\\w*)/@$(head -n 1 LEAD.md)/\" .github/pull_request_template.md ```",
      },
          'pages/forum': {
          'name': 'Forum',
          'path': 'pages/forum',
          'relpath': 'forum',
          'text': "# Forum",
      },
          'blog/index': {
          'name': 'Blog',
          'path': 'blog/index',
          'relpath': '../blog/index',
          'text': "# Blog ```html markup {% for item in document.get_plugin(\u0027blog\u0027).items %} {{ item.document.name }} By {{ item.document.get_plugin(\u0027blog\u0027).author }} on {{ item.document.get_plugin(\u0027blog\u0027).date }} {{ item.document.description }} Read more \u00bb {% endfor %} ```",
      },
          'blog/2021-11-02-five-millions-deaths': {
          'name': 'COVID-19 took more than 5 millions lives',
          'path': 'blog/2021-11-02-five-millions-deaths',
          'relpath': '../blog/2021-11-02-five-millions-deaths',
          'text': "# COVID-19 took more than 5 millions lives According to the official data, COVID-19 is now responsible for more than 5 millions deaths. It passed this mark yesterday on November the 1st. As known, there are some undercount in official data so the real figures are even bigger.",
      },
      };
  const searchIndex = lunr(function () {
    this.ref("path")
    this.field("name", { boost: 10 })
    this.field("text")
    for (const item of Object.values(searchItems)) {
      this.add(item)
    }
  });
  const searchOutput = document.getElementById('livemark-search-output')
  const searchInput = document.getElementById('livemark-search-input')
  searchInput.addEventListener('input', search)
  prepare()
  search()
});

</script>

<div id="livemark-search">
  <div id="livemark-search-output"></div>
  <input id="livemark-search-input" type="search" placeholder="Search...">
</div>
<script>

document.addEventListener("DOMContentLoaded", function () {
  // Add buttons
  $("h2").append('<a href="" class="livemark-source-button">Source</a>');

  // Enable buttons
  $(".livemark-source-button").click(async (ev) => {
    ev.preventDefault();

    // Close open
    if ($(".livemark-source-section").length) {
      $(".livemark-source-section").remove();
      return;
    }

    // Load content
    let source = location.href.replace(".html", ".md");
    if (!source.endsWith(".md")) source = `${source}index.md`;
    const heading = $(ev.target).parent().contents().get(0).nodeValue;
    response = await fetch(source);
    content = await response.text();

    // Extract section
    let isCapture;
    const lines = [];
    for (const line of content.split(/\r?\n/)) {
      if (line.startsWith("##")) {
        isCapture = line.startsWith(`## ${heading}`) ? true : false;
        continue;
      }
      if (isCapture) {
        lines.push(line);
      }
    }
    const section = _.escape(lines.join("\n").trim());

    // Show section
    $(ev.target)
      .parent()
      .after(
        `<pre class="livemark-source-section" style="white-space: pre-wrap;">${section}</pre>`
      );
  });
});

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