{"id":3427,"date":"2022-12-17T10:46:31","date_gmt":"2022-12-17T15:46:31","guid":{"rendered":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/?page_id=3427"},"modified":"2023-02-13T11:51:17","modified_gmt":"2023-02-13T16:51:17","slug":"monkeypox-in-africa","status":"publish","type":"page","link":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/monkeypox-in-africa\/","title":{"rendered":"Mpox (Monkeypox) in Africa"},"content":{"rendered":"\n<title> Monkeypox in Africa <\/title>\n<!-- ------------------ Some JavaScript Libraries ---------------------- --> \n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/apexcharts\"><\/script>\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.js\"><\/script>\n<script src=\"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js\"><\/script>\n     \n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.2\/dist\/leaflet.css\" integrity=\"sha256-sA+zWATbFveLLNqWO2gtiw3HL\/lh1giY\/Inf1BJ0z14=\" crossorigin=\"\">\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.2\/dist\/leaflet.js\" integrity=\"sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=\" crossorigin=\"\"><\/script>\n\n<script src=\"https:\/\/acadic-portal.github.io\/africa.js\"><\/script>\n<script src=\"https:\/\/acadic-portal.github.io\/monkeypox.js\"><\/script>\n<!-- ---------------------------------------------------------------- -->\n\n<!-- ------------------------ Header Functions\/Variables ---------------------------- -->\n<script>\nmyafrica = africa; \/\/ For building maps;\nmympox = mpox; \/\/ For building charts;\n\nvar nullCountries; \/\/ For disabling unsupported checkboxes\nvar mx_r_value;\nvar result; \/\/for downloading file.\n\n\/\/ ~~~~~~~~~~~~ Choropleth Functions ~~~~~~~~~~~~~~\nvar map1;\nvar map2;\nvar map3;\nvar map4;\nvar geojson1;\nvar geojson2;\nvar geojson3;\nvar geojson4;\nvar info1;\nvar info2;\nvar info3;\nvar info4;\n\/\/ Below four variables are used for map colors:\nvar mxcase1;\nvar mxcase2;\nvar mxdeath1;\nvar mxdeath2;\n\/\/ Below variables are to know which date for each map\nvar casedate1;\nvar casedate2;\nvar deathdate1;\nvar deathdate2;\nfunction caseColor1(d, n) { return d > 7*n ? '#200050' :\n                                  d > 6*n ? '#39008E' :\n                                  d > 5*n ? '#5B00E2' :\n                                  d > 4*n ? '#7619FF' :\n                                  d > 3*n ? '#9147FF' :\n                                  d > 2*n ? '#C39BFF' :\n                                  d > n   ? '#D8BDFF' :\n                                  d > 0   ? '#EBDDFF' :\n                                  d == 0  ? '#FAF7FF' :\n                                   '#FBF8F3' ; }\nfunction caseColor2(d, n) { return d > 3*n ? '#200050' :\n                                   d > 2*n ? '#5B00E2' :\n                                   d >  n  ? '#9147FF' :\n                                   d >  0  ? '#D8BDFF' :\n                                   d == 0  ? '#FAF7FF' :\n                                    '#FBF8F3' ; }\nfunction deathColor(d, n) { return d > 3*n ? '#E19601' :\n                                   d > 2*n ? '#FEB116' :\n                                   d > n   ? '#FEC044' :\n                                   d >  0 ? '#FFE697' :\n                                   d ==  0 ? '#FFF6D9' :\n                                             '#FBF8F3' ; }\nfunction getOpacity(d) { return d >= 0 ? 1 : d == 0 ? 0 : 0; }\n\nfunction caseStyle1 (feature) { return { fillColor: caseColor1 (feature.properties[casedate1], Math.floor(mxcase1\/8)), weight: 0.5,             \n                                      opacity: getOpacity(feature.properties[casedate1]),\n                                      color: 'black', fillOpacity: getOpacity(feature.properties[casedate1]) }; }\nfunction caseStyle2 (feature) { return { fillColor: caseColor2 (feature.properties[casedate2], mxcase2\/4), weight: 0.5,             \n                                      opacity: getOpacity(feature.properties[casedate2]),\n                                      color: 'black', fillOpacity: getOpacity(feature.properties[casedate2]) }; }\nfunction deathStyle1 (feature) { return { fillColor: deathColor (feature.properties[deathdate1], mxdeath1\/4), weight: 0.5,             \n                                      opacity: getOpacity(feature.properties[deathdate1]),\n                                      color: 'black', fillOpacity: getOpacity(feature.properties[deathdate1]) }; }\nfunction deathStyle2 (feature) { return { fillColor: deathColor (feature.properties[deathdate2], mxdeath2\/4), weight: 0.5,             \n                                      opacity: getOpacity(feature.properties[deathdate2]),\n                                      color: 'black', fillOpacity: getOpacity(feature.properties[deathdate2]) }; }\n\nfunction highlightFeature1 (e) {\n    var layer = e.target;\n    layer.setStyle({ weight: .5, color: '#000', dashArray: '', fillOpacity: 0.7 });\n    if (!L.Browser.opera && !L.Browser.edge) layer.bringToFront();\n    info1.update(layer.feature.properties);\n}\nfunction resetHighlight1 (e) { \n    geojson1.resetStyle(e.target); \n    info1.update(); \n}\nfunction zoomToFeature1 (e) { map1.fitBounds (e.target.getBounds()); }\nfunction onEachFeature1 (feature, layer) { layer.on({ mouseover: highlightFeature1, mouseout: resetHighlight1, click: zoomToFeature1 }); }\n\nfunction highlightFeature2 (e) {\n    var layer = e.target;\n    layer.setStyle({ weight: .5, color: '#000', dashArray: '', fillOpacity: 0.7 });\n    if (!L.Browser.opera && !L.Browser.edge) layer.bringToFront();\n    info2.update(layer.feature.properties);\n}\nfunction resetHighlight2 (e) { \n    geojson2.resetStyle(e.target); \n    info2.update(); \n}\nfunction zoomToFeature2 (e) { map2.fitBounds (e.target.getBounds()); }\nfunction onEachFeature2 (feature, layer) { layer.on({ mouseover: highlightFeature2, mouseout: resetHighlight2, click: zoomToFeature2 }); }\n\nfunction highlightFeature3 (e) {\n    var layer = e.target;\n    layer.setStyle({ weight: .5, color: '#000', dashArray: '', fillOpacity: 0.7 });\n    if (!L.Browser.opera && !L.Browser.edge) layer.bringToFront();\n    info3.update(layer.feature.properties);\n}\nfunction resetHighlight3 (e) { \n    geojson3.resetStyle(e.target); \n    info3.update(); \n}\nfunction zoomToFeature3 (e) { map3.fitBounds (e.target.getBounds()); }\nfunction onEachFeature3 (feature, layer) { layer.on({ mouseover: highlightFeature3, mouseout: resetHighlight3, click: zoomToFeature3 }); }\n\nfunction highlightFeature4 (e) {\n    var layer = e.target;\n    layer.setStyle({ weight: .5, color: '#000', dashArray: '', fillOpacity: 0.7 });\n    if (!L.Browser.opera && !L.Browser.edge) layer.bringToFront();\n    info4.update(layer.feature.properties);\n}\nfunction resetHighlight4 (e) { \n    geojson4.resetStyle(e.target); \n    info4.update(); \n}\nfunction zoomToFeature4 (e) { map4.fitBounds (e.target.getBounds()); }\nfunction onEachFeature4 (feature, layer) { layer.on({ mouseover: highlightFeature4, mouseout: resetHighlight4, click: zoomToFeature4 }); }\n\n\/*~~~~~~~~~~~~~~~~ Range Function ~~~~~~~~~~~~~~~~*\/\nfunction showcaserange (v0) {\n  month = 4 + Number (v0);\n  year = 2022;\n  while (month > 12 ) {\n    year++;\n    month -= 12;\n  }\n  dt = new Date(year, month, 1);\n  v = dt.toISOString().split('T')[0].substr(0, 7);\n  document.getElementById (\"caserange\").innerHTML = v;\n  casedate1 = \"new_cases\" + v;\n  casedate2 = \"new_cases_per_million\" + v;\n  if (geojson1) map1.removeLayer(geojson1);\n  geojson1 = L.geoJson(myafrica, {style: caseStyle1, onEachFeature: onEachFeature1}).addTo(map1);\n  if (geojson2) map2.removeLayer(geojson2);\n  geojson2 = L.geoJson(myafrica, {style: caseStyle2, onEachFeature: onEachFeature2}).addTo(map2);\n}\nfunction showdeathrange (v0) {\n  month = 4 + Number (v0);\n  year = 2022;\n  while (month > 12 ) {\n    year++;\n    month -= 12;\n  }\n  dt = new Date(year, month, 1);\n  v = dt.toISOString().split('T')[0].substr(0, 7);\n  document.getElementById (\"deathrange\").innerHTML = v;\n  deathdate1 = \"new_deaths\" + v;\n  deathdate2 = \"new_deaths_per_million\" + v;\n  if (geojson3) map3.removeLayer(geojson3);\n  geojson3 = L.geoJson(myafrica, {style: deathStyle1, onEachFeature: onEachFeature3}).addTo(map3);\n  if (geojson4) map4.removeLayer(geojson4);\n  geojson4 = L.geoJson(myafrica, {style: deathStyle2, onEachFeature: onEachFeature4}).addTo(map4);\n}\n\n\/\/~~~~~~~~~~~~~~~~~~~~~ Cards ~~~~~~~~~~~~~~~~~~~~~~~\nfunction setcards () {\n  v = [0, 0, 0, 0];\n  n = [0, 0, 0, 0];\n  country = myafrica.features;\n  for (var i=0; i < country.length; i++) {\n    item = country[i][\"properties\"][\"adm0_a3\"]\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      for (var m = 0; m <= Number(mx_r_value); m++) {\n        month = 4 + m;\n        year = 2022;\n        while (month > 12 ) { year++; month -= 12; }\n        dt = new Date(year, month, 1);\n        dt = dt.toISOString().split('T')[0].substr(0, 7);\n\n        col = \"new_cases\" + dt;\n        dummy = Number(country[i][\"properties\"][col]);\n        if (dummy && dummy != 0) { v[0] += dummy; n[0] += 1; }\n        col = \"new_cases_per_million\" + dt;\n        dummy = Number(country[i][\"properties\"][col]);\n        if (dummy && dummy != 0) { v[1] += dummy; n[1] += 1; }\n        col = \"new_deaths\" + dt;\n        dummy = Number(country[i][\"properties\"][col])\n        if (dummy && dummy != 0) { v[2] += dummy; n[2] += 1; }\n        col = \"new_deaths_per_million\" + dt;\n        dummy = Number(country[i][\"properties\"][col])\n        if (dummy && dummy != 0) { v[3] += dummy; n[3] += 1; }\n      }\n    }\n  }   \n  if (n[0] != 0) v[0] = v[0] \/ n[0];\n  if (n[1] != 0) v[1] = v[1] \/ n[1];\n  if (n[2] != 0) v[2] = v[2] \/ n[2];\n  if (n[3] != 0) v[3] = v[3] \/ n[3];\n  document.getElementById (\"card4\").innerHTML = (v[0]).toFixed(2);\n  document.getElementById (\"card3\").innerHTML = (v[1]).toFixed(2);\n  document.getElementById (\"card2\").innerHTML = (v[2]).toFixed(2);\n  document.getElementById (\"card1\").innerHTML = (v[3]).toFixed(2);\n}\n\n\/\/~~~~~~~~~~~~~~~~~~~~~~~ Building Charts ~~~~~~~~~~~~~~~~~~~~~~\nfunction setcasechart () {\n  date = []\n  for (var m=0; m <= Number(mx_r_value); m++) {\n    month = 4 + m;\n    year = 2022;\n    while (month > 12 ) { year++; month -= 12; }\n    dt = new Date(year, month, 1);\n    dt = dt.toISOString().split('T')[0].substr(0, 7);\n    date.push (dt);\n  }\n  s = []\n  country = africa.features;\n  for (var i=0; i < country.length; i++) {\n    item = country[i][\"properties\"][\"adm0_a3\"]\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      dummy = {name: country[i][\"properties\"][\"admin\"]};\n      data = [];\n      for (var j=0; j <= Number(mx_r_value); j++) {\n        month = 4 + j;\n        year = 2022;\n        while (month > 12 ) { year++; month -= 12; }\n        dt = new Date(year, month, 1);\n        dt = dt.toISOString().split('T')[0].substr(0, 7);\n\n        col = \"new_cases\" + dt;\n        if (country[i][\"properties\"][col]) data.push (country[i][\"properties\"][col]);\n        else data.push (0);\n      }\n      dummy[\"data\"] = data;\n      s.push(dummy);\n    }  \n  }\n  var options = {series: s, chart: {height: 340, type: \"line\", animations: {enabled: false}, dynamicAnimation: {enabled: false}}, \n                          yaxis: [{labels: {formatter: function(val) {return val.toFixed(4);}}}],\n                          title: {text: 'Number of Cases by Country', align: 'left'}, dataLabels: {enabled: false}, stroke: {width: 2}, \n                          xaxis: {categories: date}, };\n  document.getElementById(\"casechart\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"casechart\"), options).render();\n}\n\n\/\/---------\nfunction setcasemillionchart () {\n  date = []\n  for (var m=0; m <= Number(mx_r_value); m++) {\n    month = 4 + m;\n    year = 2022;\n    while (month > 12 ) { year++; month -= 12; }\n    dt = new Date(year, month, 1);\n    dt = dt.toISOString().split('T')[0].substr(0, 7);\n    date.push (dt);\n  }\n  s = []\n  country = africa.features;\n  for (var i=0; i < country.length; i++) {\n    item = country[i][\"properties\"][\"adm0_a3\"]\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      dummy = {name: country[i][\"properties\"][\"admin\"]};\n      data = [];\n      for (var j=0; j <= Number(mx_r_value); j++) {\n        month = 4 + j;\n        year = 2022;\n        while (month > 12 ) { year++; month -= 12; }\n        dt = new Date(year, month, 1);\n        dt = dt.toISOString().split('T')[0].substr(0, 7);\n\n        col = \"new_cases_per_million\" + dt;\n        if (country[i][\"properties\"][col]) data.push (country[i][\"properties\"][col]);\n        else data.push (0);\n      }\n      dummy[\"data\"] = data;\n      s.push(dummy);\n    }  \n  }\n  var options = {series: s, chart: {height: 340, type: \"line\", animations: {enabled: false}, dynamicAnimation: {enabled: false}}, \n                          yaxis: [{labels: {formatter: function(val) {return val.toFixed(4);}}}],\n                       title: {text: 'Number of Cases (per million) by Country', align: 'left'}, dataLabels: {enabled: false}, stroke: {width: 2}, \n                          xaxis: {categories: date}, };\n  document.getElementById(\"casemillionchart\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"casemillionchart\"), options).render();\n}\n\n\/\/-------------\nfunction setcasecmlchart () {\n  date = []\n  for (var m=0; m <= Number(mx_r_value); m++) {\n    month = 4 + m;\n    year = 2022;\n    while (month > 12 ) { year++; month -= 12; }\n    dt = new Date(year, month, 1);\n    dt = dt.toISOString().split('T')[0].substr(0, 7);\n    date.push (dt);\n  }\n  s = []\n  country = africa.features;\n  for (var i=0; i < country.length; i++) {\n    item = country[i][\"properties\"][\"adm0_a3\"]\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      dummy = {name: country[i][\"properties\"][\"admin\"]};\n      data = [];\n      cml = 0; \/\/Because it's cumulative, if the value was not available the previous value should be pushed not zero.\n      for (var j=0; j <= Number(mx_r_value); j++) {\n        month = 4 + j;\n        year = 2022;\n        while (month > 12 ) { year++; month -= 12; }\n        dt = new Date(year, month, 1);\n        dt = dt.toISOString().split('T')[0].substr(0, 7);\n\n        col = \"total_cases\" + dt;\n        if (country[i][\"properties\"][col]) { data.push (country[i][\"properties\"][col]); cml = country[i][\"properties\"][col]; }\n        else data.push (cml);\n      }\n      dummy[\"data\"] = data;\n      s.push(dummy);\n    }  \n  }\n  var options = {series: s, chart: {height: 340, type: \"area\", animations: {enabled: false}, dynamicAnimation: {enabled: false}}, \n                          yaxis: [{labels: {formatter: function(val) {return val.toFixed(4);}}}],\n                          title: {text: 'Cumulative Number of Cases by Country', align: 'left'}, dataLabels: {enabled: false}, stroke: {width: 2}, \n                          xaxis: {categories: date}, };\n  document.getElementById(\"casecmlchart\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"casecmlchart\"), options).render();\n}\n\/\/----------------\nfunction setdeathchart () {\n  date = []\n  for (var m=0; m <= Number(mx_r_value); m++) {\n    month = 4 + m;\n    year = 2022;\n    while (month > 12 ) { year++; month -= 12; }\n    dt = new Date(year, month, 1);\n    dt = dt.toISOString().split('T')[0].substr(0, 7);\n    date.push (dt);\n  }\n  s = []\n  country = africa.features;\n  for (var i=0; i < country.length; i++) {\n    item = country[i][\"properties\"][\"adm0_a3\"]\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      dummy = {name: country[i][\"properties\"][\"admin\"]};\n      data = [];\n      for (var j=0; j <= Number(mx_r_value); j++) {\n        month = 4 + j;\n        year = 2022;\n        while (month > 12 ) { year++; month -= 12; }\n        dt = new Date(year, month, 1);\n        dt = dt.toISOString().split('T')[0].substr(0, 7);\n\n        col = \"new_deaths\" + dt;\n        if (country[i][\"properties\"][col]) data.push (country[i][\"properties\"][col]);\n        else data.push (0);\n      }\n      dummy[\"data\"] = data;\n      s.push(dummy);\n    }  \n  }\n  var options = {series: s, chart: {height: 340, type: \"line\", animations: {enabled: false}, dynamicAnimation: {enabled: false}}, \n                          yaxis: [{labels: {formatter: function(val) {return val.toFixed(4);}}}],\n                          title: {text: 'Number of Deaths by Country', align: 'left'}, dataLabels: {enabled: false}, stroke: {width: 2}, \n                          xaxis: {categories: date}, };\n  document.getElementById(\"deathchart\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"deathchart\"), options).render();\n}\n\n\/\/---------\nfunction setdeathmillionchart () {\n  date = []\n  for (var m=0; m <= Number(mx_r_value); m++) {\n    month = 4 + m;\n    year = 2022;\n    while (month > 12 ) { year++; month -= 12; }\n    dt = new Date(year, month, 1);\n    dt = dt.toISOString().split('T')[0].substr(0, 7);\n    date.push (dt);\n  }\n  s = []\n  country = africa.features;\n  for (var i=0; i < country.length; i++) {\n    item = country[i][\"properties\"][\"adm0_a3\"]\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      dummy = {name: country[i][\"properties\"][\"admin\"]};\n      data = [];\n      for (var j=0; j <= Number(mx_r_value); j++) {\n        month = 4 + j;\n        year = 2022;\n        while (month > 12 ) { year++; month -= 12; }\n        dt = new Date(year, month, 1);\n        dt = dt.toISOString().split('T')[0].substr(0, 7);\n\n        col = \"new_deaths_per_million\" + dt;\n        if (country[i][\"properties\"][col]) data.push (country[i][\"properties\"][col]);\n        else data.push (0);\n      }\n      dummy[\"data\"] = data;\n      s.push(dummy);\n    }  \n  }\n  var options = {series: s, chart: {height: 340, type: \"line\", animations: {enabled: false}, dynamicAnimation: {enabled: false}}, \n                          yaxis: [{labels: {formatter: function(val) {return val.toFixed(4);}}}],\n                       title: {text: 'Number of Deaths (per million) by Country', align: 'left'}, dataLabels: {enabled: false}, stroke: {width: 2}, \n                          xaxis: {categories: date}, };\n  document.getElementById(\"deathmillionchart\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"deathmillionchart\"), options).render();\n}\n\n\/\/-------------\nfunction setdeathcmlchart () {\n  date = []\n  for (var m=0; m <= Number(mx_r_value); m++) {\n    month = 4 + m;\n    year = 2022;\n    while (month > 12 ) { year++; month -= 12; }\n    dt = new Date(year, month, 1);\n    dt = dt.toISOString().split('T')[0].substr(0, 7);\n    date.push (dt);\n  }\n  s = []\n  country = africa.features;\n  for (var i=0; i < country.length; i++) {\n    item = country[i][\"properties\"][\"adm0_a3\"]\n    if (document.getElementById(item) && document.getElementById(item).disabled == false && document.getElementById(item).checked) {\n      dummy = {name: country[i][\"properties\"][\"admin\"]};\n      data = [];\n      cml = 0; \/\/Because it's cumulative, if the value was not available the previous value should be pushed not zero.\n      for (var j=0; j <= Number(mx_r_value); j++) {\n        month = 4 + j;\n        year = 2022;\n        while (month > 12 ) { year++; month -= 12; }\n        dt = new Date(year, month, 1);\n        dt = dt.toISOString().split('T')[0].substr(0, 7);\n\n        col = \"total_deaths\" + dt;\n        if (country[i][\"properties\"][col]) { data.push (country[i][\"properties\"][col]); cml = country[i][\"properties\"][col]; }\n        else data.push (cml);\n      }\n      dummy[\"data\"] = data;\n      s.push(dummy);\n    }  \n  }\n  var options = {series: s, chart: {height: 340, type: \"area\", animations: {enabled: false}, dynamicAnimation: {enabled: false}}, \n                          yaxis: [{labels: {formatter: function(val) {return val.toFixed(4);}}}],\n                          title: {text: 'Cumulative Number of Deaths by Country', align: 'left'}, dataLabels: {enabled: false}, stroke: {width: 2}, \n                          xaxis: {categories: date}, };\n  document.getElementById(\"deathcmlchart\").innerHTML = \"\";     \n  new ApexCharts(document.getElementById(\"deathcmlchart\"), options).render();\n}\n\n\/\/~~~~~~~~~~~~~~~~~~~~~~~ Checkbox Click ~~~~~~~~~~~~~~~~~~~~~~\nfunction radioClick (id) {\n  setcards();\n  setcasechart ();\n  setcasemillionchart ();\n  setcasecmlchart ();\n  setdeathchart ();\n  setdeathmillionchart ();\n  setdeathcmlchart ();\n} \n\n\/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Citation ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\/\nfunction cite() { \n  message = \"Please kindly cite our work and the underlying data source:<br> 1. ZM Nia, JD Kong, Mpox (Monkeypox) in Africa (2022) http:\/\/acadic.org\/mpox-in-africa<br> 2. World Health Organization, 2022 Mpox (Monkeypox) Outbreak: Global Trends (2023) https:\/\/worldhealthorg.shinyapps.io\/mpx_global\";\n  $('<div><\/div>').html( message ).dialog({ title: \"How to Cite\", resizable: false, modal: true, width: 800,\n        buttons: { 'Ok': function()  { $( this ).dialog( 'close' ); }} }); \n}\n\nfunction download() { window.URL.revokeObjectURL (document.getElementById (\"download\").href); }\n\n<\/script>\n\n<style>\n<!-- -------------------------------- CSS from Here ------------------------------ -->\nbody { font: 11pt Helvetica;} \n.checkb {\n    padding: 10px; \n    padding-left: 0px; \n    padding-right: 0px;\n    font-size: 9pt;\n}\n.info {\n    padding: 6px 8px;\n    font: 14px\/16px Arial, Helvetica, sans-serif;\n    background: white;\n    background: rgba(255,255,255,0.8);\n    box-shadow: 0 0 15px rgba(0,0,0,0.2);\n    border-radius: 5px;\n}\n.info h4 {\n    margin: 0 0 5px;\n    color: #777;\n}\n.legend {\n    line-height: 18px;\n    color: #555;\n}\n.legend i {\n    width: 18px;\n    height: 18px;\n    float: left;\n    margin-right: 8px;\n    opacity: 0.7;\n}\n.ui-widget-header {\n  padding: 1%;\n  padding-left: 8%;\n  background: #DDD;\n  font-size: 20px;\n}\n.ui-dialog-content {\n  padding-top: 2%;\n  padding-bottom: 4%;\n  padding-left: 4%;\n  padding-right: 4%;\n}\n.ui-dialog { \n  background: white;\n  border: 2px solid #000;\n  border-radius: 5px;\n  z-index: 1000000 !important;\n}\n.ui-dialog-titlebar-close {\n    visibility: hidden;\n}\n.ui-dialog-buttonset {\n    margin-left: 88%;\n    margin-bottom: 2%;\n}\n<\/style>\n\n\n<!-- ------------------------------ JavaScript from Here --------------------------------- -->\n<script>\n\/* --------------------- Building our Variable -------------------------- *\/\nnullCountries = [];\nmx_r_value = 0; \/\/This is to set the maximum of range blocks\n\/\/ These four variables are used for map colors.\nmxcase1 = 0;\nmxcase2 = 0;\nmxdeath1 = 0;\nmxdeath2 = 0;\nfor (var i=myafrica[\"features\"].length-1; i>=0; i--) {\n  alpha3 = myafrica[\"features\"][i][\"properties\"][\"adm0_a3\"]\n  r_value = 0;\n  b = 0;\n  for (var j=0; j<mympox.length; j++) {\n    if (mympox[j][\"iso_code\"] == alpha3) {\n      b = 1;\n      r_value++;\n      field = \"new_cases\" + mympox[j][\"date\"];\n      myafrica[\"features\"][i][\"properties\"][field] = Number(mympox[j][\"new_cases\"]);\n      if (Number(mympox[j][\"new_cases\"]) > mxcase1) mxcase1 = Number(mympox[j][\"new_cases\"]);\n\n      field = \"new_deaths\" + mympox[j][\"date\"];\n      myafrica[\"features\"][i][\"properties\"][field] = mympox[j][\"new_deaths\"];\n      if (mympox[j][\"new_deaths\"] > mxdeath1) mxdeath1 = mympox[j][\"new_deaths\"];\n\n      field = \"new_cases_per_million\" + mympox[j][\"date\"];\n      myafrica[\"features\"][i][\"properties\"][field] = mympox[j][\"new_cases_per_million\"];\n      if (mympox[j][\"new_cases_per_million\"] > mxcase2) mxcase2 = mympox[j][\"new_cases_per_million\"];\n\n      field = \"new_deaths_per_million\" + mympox[j][\"date\"];\n      myafrica[\"features\"][i][\"properties\"][field] = mympox[j][\"new_deaths_per_million\"];\n      if (mympox[j][\"new_deaths_per_million\"] > mxdeath2) mxdeath2 = mympox[j][\"new_deaths_per_million\"];\n\n      field = \"total_cases\" + mympox[j][\"date\"];\n      myafrica[\"features\"][i][\"properties\"][field] = mpox[j][\"total_cases\"];\n      field = \"total_deaths\" + mympox[j][\"date\"];\n      myafrica[\"features\"][i][\"properties\"][field] = mympox[j][\"total_deaths\"];\n    }\n  }\n  if (r_value > mx_r_value) mx_r_value = r_value;\n  if (b == 0) {\n    myafrica[\"features\"].splice(i, 1); \n    nullCountries.push (alpha3);      \n  }\n}\nmx_r_value--;\nmx_r_value = mx_r_value.toString();\n\n\/* --------------------------- Code Starts Here --------------------------------*\/\nwindow.onload = plzwork;\nfunction plzwork () { \n  document.getElementById(\"cases\").max = mx_r_value;\n  document.getElementById(\"cases\").value = \"6\";\n  document.getElementById(\"deaths\").max = mx_r_value;\n  document.getElementById(\"deaths\").value = \"6\";\n  for (var i=0; i<nullCountries.length; i++) document.getElementById(nullCountries[i]).disabled = true;\n\/*-------------------------- MAPS -----------------------------------------*\/\n  casedate1 = \"new_cases2022-11\";\n  casedate2 = \"new_cases_per_million2022-11\";\n  deathdate1 = \"new_deaths2022-11\";\n  deathdate2 = \"new_deaths_per_million2022-11\";\n\n  map1 = L.map('choropleth1', {attributionControl:false}).setView([8, 29], 3);\n  map1.zoomControl.setPosition('bottomright');\n  var tiles = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}.png', {maxZoom: 19,\n          attribution: '&copy; <a href=\"https:\/\/carto.com\/\">carto.com<\/a> contributors'}).addTo(map1);\n  geojson1 = L.geoJson(myafrica, {style: caseStyle1, onEachFeature: onEachFeature1}).addTo(map1);\n\n  map2 = L.map('choropleth2', {attributionControl:false}).setView([8, 29], 3);\n  map2.zoomControl.setPosition('bottomright');\n  var tiles2 = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}.png', {maxZoom: 19,\n          attribution: '&copy; <a href=\"https:\/\/carto.com\/\">carto.com<\/a> contributors'}).addTo(map2);\n  geojson2 = L.geoJson(myafrica, {style: caseStyle2, onEachFeature: onEachFeature2}).addTo(map2);\n\n  map3 = L.map('choropleth3', {attributionControl:false}).setView([8, 29], 3);\n  map3.zoomControl.setPosition('bottomright');\n  var tiles3 = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}.png', {maxZoom: 19,\n          attribution: '&copy; <a href=\"https:\/\/carto.com\/\">carto.com<\/a> contributors'}).addTo(map3);\n  geojson3 = L.geoJson(myafrica, {style: deathStyle1, onEachFeature: onEachFeature3}).addTo(map3);\n\n  map4 = L.map('choropleth4', {attributionControl:false}).setView([8, 29], 3);\n  map4.zoomControl.setPosition('bottomright');\n  var tiles4 = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/rastertiles\/voyager\/{z}\/{x}\/{y}.png', {maxZoom: 19,\n          attribution: '&copy; <a href=\"https:\/\/carto.com\/\">carto.com<\/a> contributors'}).addTo(map4);\n  geojson4 = L.geoJson(myafrica, {style: deathStyle2, onEachFeature: onEachFeature4}).addTo(map4);\n\n\n  info1 = L.control();\n  info1.onAdd = function (map1) {\n    this._div = L.DomUtil.create('div', 'info'); \/\/ create a div with a class \"info\"\n    this.update(); \n    return this._div;\n  };\n  info1.update = function (props) {         \n    this._div.innerHTML = '<h4><b>Number of Monkeypox Cases <\/b><\/h4>' +  (props ? '<b>' + props.admin + ': <\/b>' +\n    (props[casedate1] >= 0 ? (props[casedate1]).toFixed(4) + ' cases' : ' N\/A') : 'Hover over any country'); \n  };\n  info1.addTo(map1);\n\n  info2 = L.control();\n  info2.onAdd = function (map2) {\n    this._div = L.DomUtil.create('div', 'info'); \/\/ create a div with a class \"info\"\n    this.update();\n    return this._div;\n  };\n  info2.update = function (props) {         \n    this._div.innerHTML = '<h4><b>Number of Monkeypox Cases (per million)<\/b><\/h4>' +  (props ? '<b>' + props.admin + ': <\/b>' +\n    (props[casedate2] >= 0 ? (props[casedate2]).toFixed(4) + ' cases per million' : ' N\/A') : 'Hover over any country');\n  };\n  info2.addTo(map2);\n\n  info3 = L.control();\n  info3.onAdd = function (map3) {\n    this._div = L.DomUtil.create('div', 'info'); \/\/ create a div with a class \"info\"\n    this.update();\n    return this._div;\n  };\n  info3.update = function (props) {         \n    this._div.innerHTML = '<h4><b>Number of Monkeypox Mortalities <\/b><\/h4>' +  (props ? '<b>' + props.admin + ': <\/b>' +\n    (props[deathdate1]  >= 0 ? (props[deathdate1]).toFixed(4) + ' mortalities' : ' N\/A') : 'Hover over any country');\n  };\n  info3.addTo(map3);\n\n  info4 = L.control();\n  info4.onAdd = function (map4) {\n    this._div = L.DomUtil.create('div', 'info'); \/\/ create a div with a class \"info\"\n    this.update();\n    return this._div;\n  };\n  info4.update = function (props) {         \n    this._div.innerHTML = '<h4><b>Number of Monkeypox Mortalities (per million)<\/b><\/h4>' +  (props ? '<b>' + props.admin + ': <\/b>' +\n    (props[deathdate2]  >= 0 ? (props[deathdate2]).toFixed(4) + ' mortalities per million' : ' N\/A') : 'Hover over any country');\n  };\n  info4.addTo(map4);\n\n  legend1 = L.control({position: 'bottomleft'});\n  legend1.onAdd = function (map1) { \n    n = Math.floor(mxcase1\/8);\n    var div = L.DomUtil.create('div', 'info legend'),\n    grades = [0, n, 2*n, 3*n, 4*n, 5*n, 6*n, 7*n],\n    labels = [];\n    i = 0;\n    div.innerHTML = '<i style=\"background:' + caseColor1(grades[i], n) + '\"><\/i> 0<br>';\n    for (var i = 0; i < grades.length; i++) {\n      div.innerHTML += '<i style=\"background:' + caseColor1(grades[i]+1, n) + '\"><\/i> ' +\n      (grades[i]) + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');\n    }\n    div.id = \"lgnd1\";\n    return div;\n  }\n  legend1.addTo(map1);\n\n  legend2 = L.control({position: 'bottomleft'});\n  legend2.onAdd = function (map2) { \n    n = mxcase2\/4;\n    var div = L.DomUtil.create('div', 'info legend'),\n    grades = [0, n, 2*n, 3*n],\n    labels = [];\n    i = 0;\n    div.innerHTML = '<i style=\"background:' + caseColor2(grades[i], n) + '\"><\/i> 0<br>';\n    for (var i = 0; i < grades.length; i++) {\n      div.innerHTML += '<i style=\"background:' + caseColor2(grades[i]+0.001, n) + '\"><\/i> ' +\n      (grades[i]) + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');\n    }\n    div.id = \"lgnd2\";\n    return div;\n  }\n  legend2.addTo(map2);\n\n  legend3 = L.control({position: 'bottomleft'});\n  legend3.onAdd = function (map3) { \n    n = mxdeath1\/4;\n    var div = L.DomUtil.create('div', 'info legend'),\n    grades = [0, n, 2*n, 3*n],\n    labels = [];\n    i = 0;\n    div.innerHTML = '<i style=\"background:' + deathColor(grades[i], n) + '\"><\/i> 0<br>';\n    for (var i = 0; i < grades.length; i++) {\n      div.innerHTML += '<i style=\"background:' + deathColor(grades[i]+0.001, n) + '\"><\/i> ' +\n      (grades[i]) + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');\n    }\n    div.id = \"lgnd3\";\n    return div;\n  }\n  legend3.addTo(map3);\n\n  legend4 = L.control({position: 'bottomleft'});\n  legend4.onAdd = function (map4) { \n    n = mxdeath2\/4;\n    var div = L.DomUtil.create('div', 'info legend'),\n    grades = [0, n, 2*n, 3*n],\n    labels = [];\n    i = 0;\n    div.innerHTML = '<i style=\"background:' + deathColor(grades[i], n) + '\"><\/i> 0<br>';\n    for (var i = 0; i < grades.length; i++) {\n      div.innerHTML += '<i style=\"background:' + deathColor(grades[i]+0.001, n) + '\"><\/i> ' +\n      (grades[i]) + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');\n    }\n    div.id = \"lgnd4\";\n    return div;\n  }\n  legend4.addTo(map4);\n\n\/\/--------------------- preparing the file to download -----------------------\n  const header = Object.keys (mpox[0]);\n  const ascsv = mpox.map (dict => (header.map(key => dict[key]).join(',')));\n  result = [header.join(','), ...ascsv].join('\\n');\n  var blob = new Blob([result], { type: 'text\/csv;charset=utf-8;' });\n  url = window.URL.createObjectURL(blob);\n  document.getElementById (\"download\").href = url;\n\n\/\/---------------------- Other Functions ----------------------\n  setcards ();\n  setcasechart ();\n  setcasemillionchart ();\n  setcasecmlchart ();\n  setdeathchart ();\n  setdeathmillionchart ();\n  setdeathcmlchart ();\n}\n\n<\/script>\n\n\n<!-- --------------------------- Source -------------------------------- -->\n<div id=\"source\" style=\"background-color: #EAEAEA; margin-bottom: 0.25%; color: #000000; font-size: 15px; padding: 1.1%; width:100%; display: inline-block;\"> The data of this work is collected from the <a href=\"https:\/\/worldhealthorg.shinyapps.io\/mpx_global\/\"> World Health Organization<\/a>.\n<p> The dataset is freely available to copy, use, and redistribute for any purpose, even commercial, provided that authors are appropriately credited. <\/p>\n<div style=\"width: 10%; float: right; margin-right: 1.5%\"> <button style=\"width: 100%; color: #000000; padding: 0.5%; border-radius: 5px; border-color: grey\" onclick=\"cite()\"> How to cite <\/button> <\/div>\n<div style=\"float: right; margin-right: 3%\"> Download full dataset (.csv): \n<a id=\"download\" href=\"\" onclick=\"download()\" download=\"mpox.csv\">\n<img loading=\"lazy\" decoding=\"async\" style=\"padding-left: 1%\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/62\/62055.png\" alt=\"W3Schools\" width=\"23\" height=\"20\"> <\/a> <\/div>\n<\/div>\n\n<!-- -------------------------- HTML from Here --------------------------- -->\n<div style=\"background-color: #FF6600; width:100%;\">\n\n<!-- ---------- introduction ----------- -->\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.5%; margin: 1%; margin-top: 1.5%; width:98%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> \n<p align=\"justify\" style=\"margin: 0px;\"><b> The first known human case of Mpox was reported in 1970 in Democratic Republic of the Congo in a nine-month old baby. Since then Mpox has been endemic in a number of African countries, namely, Benin, Cameroon, the Central African Republic, the Democratic Republic of the Congo, Gabon, Ghana, Ivory Coast, Liberia, Nigeria, the Republic of the Congo, Sierra Leone, and South Sudan. It was only after 2003 that Mpox was identified in non-African countries. <\/b><\/p> <p align=\"justify\" style=\"margin: 0px; margin-top: 1%;\"><b> Below please find our dashboard for Mpox cases and mortalities in Africa during the 2022 outbreak. <\/b><\/p><\/div>\n\n<!-- ----------------------------- Add Links Here --------------------------------- -->\n\n<!-- ------------------------------- Case MAPS ---------------------------------- -->\n<div style=\"margin: 1%; margin-top: 0%;\">\n<div id=\"choropleth1\" style=\"width: 49.5%; height: 525px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  <\/div>\n<div id=\"choropleth2\" style=\"width: 49.5%; height: 525px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left; margin-left: 1%\">  <\/div> <\/div>\n\n<!-- --------------------------------- Case Range --------------------------- -->\n<div style=\"margin: 1.1%; margin-top: 1%; margin-right: 0.7%; width:98%; display: inline-block; vertical-align: top;\">\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1%; padding-left: 30%; width: 99.9%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float:left\">\n<b> <p id=\"caserange\" style=\"padding-left: 29%; margin: 0%; font-size: 15pt;\"> 2022-11 <\/p> <\/b>\n<input id=\"cases\" type=\"range\" min=\"0\" step=\"1\" max=\"7\" value=\"6\" style=\"width: 60%\" oninput=\"showcaserange(this.value)\"> \n<\/div> <\/div>\n\n<!-- ------------------------------- Death MAPS ---------------------------------- -->\n<div style=\"margin: 1%; margin-top: 0%;\">\n<div id=\"choropleth3\" style=\"width: 49.5%; height: 525px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  <\/div>\n<div id=\"choropleth4\" style=\"width: 49.5%; height: 525px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left; margin-left: 1%\">  <\/div> <\/div>\n\n<!-- --------------------------------- Death Range --------------------------- -->\n<div style=\"margin: 1.1%; margin-top: 1%; margin-right: 0.7%; width:98%; display: inline-block; vertical-align: top;\">\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1%; padding-left: 30%; width: 99.9%; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float:left\">\n<b> <p id=\"deathrange\" style=\"padding-left: 29%; margin: 0%; font-size: 15pt;\"> 2022-11 <\/p> <\/b>\n<input id=\"deaths\" type=\"range\" min=\"0\" step=\"1\" max=\"7\" value=\"6\" style=\"width: 60%\" oninput=\"showdeathrange(this.value)\"> \n<\/div> <\/div>\n\n<!-- --------------------------------- Select Country ---------------------------- -->\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.5%; margin: 1%; margin-top: 0%; margin-right: 0.7%; width:18%; height: 2008px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block; vertical-align: top;\">\n<p><b> Select Country: <\/b><\/p>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"DZA\" onclick=\"radioClick(this.id);\"> <b> Algeria <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"AGO\" onclick=\"radioClick(this.id);\"> <b> Angola <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"BEN\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Benin <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"BWA\" onclick=\"radioClick(this.id);\"> <b> Botswana <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"BFA\" onclick=\"radioClick(this.id);\"> <b> Burkina Faso <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"BDI\" onclick=\"radioClick(this.id);\"> <b> Burundi <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"CMR\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Cameroon <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"CAF\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Central African Republic <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"TCD\" onclick=\"radioClick(this.id);\"> <b> Chad <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"COG\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Congo <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"DJI\" onclick=\"radioClick(this.id);\"> <b> Djibouti <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"COD\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> DR Congo <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"EGY\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Egypt <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"GNQ\" onclick=\"radioClick(this.id);\"> <b> Equatorial Guinea <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"ERI\" onclick=\"radioClick(this.id);\"> <b> Eritrea <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"ETH\" onclick=\"radioClick(this.id);\"> <b> Ethiopia <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"GAB\" onclick=\"radioClick(this.id);\"> <b> Gabon <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"GMB\" onclick=\"radioClick(this.id);\"> <b> Gambia <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"GHA\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Ghana <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"GIN\" onclick=\"radioClick(this.id);\"> <b> Guinea <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"GNB\" onclick=\"radioClick(this.id);\"> <b> Guinea-Bissau <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"CIV\" onclick=\"radioClick(this.id);\"> <b> Ivory Coast <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"KEN\" onclick=\"radioClick(this.id);\"> <b> Kenya <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"LSO\" onclick=\"radioClick(this.id);\"> <b> Lesotho <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"LBR\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Liberia <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"LBY\" onclick=\"radioClick(this.id);\"> <b> Libya <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"MDG\" onclick=\"radioClick(this.id);\"> <b> Madagascar <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"MWI\" onclick=\"radioClick(this.id);\"> <b> Malawi <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"MLI\" onclick=\"radioClick(this.id);\"> <b> Mali <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"MRT\" onclick=\"radioClick(this.id);\"> <b> Mauritania <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"MAR\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Morocco <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"MOZ\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Mozambique <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"NAM\" onclick=\"radioClick(this.id);\"> <b> Namibia <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"NER\" onclick=\"radioClick(this.id);\"> <b> Niger <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"NGA\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Nigeria <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"RWA\" onclick=\"radioClick(this.id);\"> <b> Rwanda <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"SEN\" onclick=\"radioClick(this.id);\"> <b> Senegal <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"SLE\" onclick=\"radioClick(this.id);\"> <b> Sierra Leone <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"SOM\" onclick=\"radioClick(this.id);\"> <b> Somalia <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"SOL\" onclick=\"radioClick(this.id);\"> <b> Somaliland <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"ZAF\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> South Africa <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"SDS\" onclick=\"radioClick(this.id);\"> <b> South Soudan <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"SDN\" checked=\"checked\" onclick=\"radioClick(this.id);\"> <b> Sudan <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"SWZ\" onclick=\"radioClick(this.id);\"> <b> Swaziland (Eswatini) <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"TZA\" onclick=\"radioClick(this.id);\"> <b> Tanzania <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"TGO\" onclick=\"radioClick(this.id);\"> <b> Togo <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"TUN\" onclick=\"radioClick(this.id);\"> <b> Tunisia <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"UGA\" onclick=\"radioClick(this.id);\"> <b> Uganda <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"SAH\" onclick=\"radioClick(this.id);\"> <b> Western Sahara <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"ZMB\" onclick=\"radioClick(this.id);\"> <b> Zambia <\/b><\/div>\n<div class=\"checkb\"> <input type=\"checkbox\" id=\"ZWE\" onclick=\"radioClick(this.id);\"> <b> Zimbabwe <\/b><\/div>\n<\/div>\n\n<!-- ---------------------------------- Cards -------------------------------------- -->\n<div style=\"width:79.8%; margin-top: 0%; display: inline-block; vertical-align: top;\">\n\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding-top: 3.3%; padding-bottom: 3.3%; margin-left: 0%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 1.5%\"><b> Mean Number of Cases per Month <\/b><\/p>\n<b><p id=\"card4\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding-top: 3.3%; padding-bottom: 3.3%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 1.5%\"><b> Mean Number of Cases (per Million) per Month <\/b><\/p>\n<b><p id=\"card3\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding-top: 3.3%; padding-bottom: 3.3%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 1.5%\"><b> Mean Number of Deaths per Month <\/b><\/p>\n<b><p id=\"card2\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<div style=\"background-color: #FFFFFF; color: #4D4D4D; padding-top: 3.3%; padding-bottom: 3.3%; margin-left: 1.1%; width: 23.9%; text-align: center; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\">  \n<p style=\"margin: 0px; font-size: 10pt; padding: 1.5%\"><b> Mean Number of Deaths (per Million) per Month <\/b><\/p>\n<b><p id=\"card1\" style=\"margin: 0px; font-size: 40pt\">125K<\/p><\/b><\/div>\n\n<!-- ------------------------------- Charts -------------------------------- -->\n<div id=\"casechart\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; padding: 1.5%; margin-left: 0%; margin-top: 1.18%; width: 99%; height: 354px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\"> <\/div> \n<div id=\"casemillionchart\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; padding: 1.5%; margin-left: 0%; margin-top: 1.1%; width: 99%; height: 355px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\"> <\/div>\n<div id=\"casecmlchart\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; padding: 1.5%; margin-left: 0%; margin-top: 1.1%; width: 99%; height: 355px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\"> <\/div>\n<div id=\"deathchart\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; padding: 1.5%; margin-left: 0%; margin-top: 1.1%; width: 99%; height: 355px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\"> <\/div>\n<div id=\"deathmillionchart\" style=\"background-color: #FFFFFF; color: #4D4D4D; align: center; padding: 1.5%; margin-left: 0%; margin-top: 1.1%; margin-bottom: 1.1%; width: 99%; height: 355px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; float: left;\"> <\/div>\n\n\n\n<\/div>\n\n\n<div id=\"deathcmlchart\" style=\"background-color: #FFFFFF; color: #4D4D4D; padding: 1.1%; margin: 1%; margin-top: 0%; margin-bottom: 1.5%; width:98%; height: 355px; border-radius: 5px; box-shadow: 0 0 10px 5px #001400; display: inline-block;\"> <\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-content\/uploads\/sites\/220\/2021\/12\/Sponsor3-5-1024x210.png\" alt=\"\" class=\"wp-image-1087\" width=\"819\" height=\"168\" srcset=\"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-content\/uploads\/sites\/220\/2021\/12\/Sponsor3-5-1024x210.png 1024w, https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-content\/uploads\/sites\/220\/2021\/12\/Sponsor3-5-300x62.png 300w, https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-content\/uploads\/sites\/220\/2021\/12\/Sponsor3-5.png 1068w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Monkeypox in Africa The data of this work is collected from the World Health Organization. The dataset is freely available to copy, use, and redistribute for any purpose, even commercial, provided that authors are appropriately credited. How to cite Download full dataset (.csv): The first known human case of Mpox was reported in 1970 in [&hellip;]<\/p>\n","protected":false},"author":1071,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","ngg_post_thumbnail":0,"footnotes":""},"tags":[],"class_list":["post-3427","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"zahrania","author_link":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/author\/zahrania\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/pages\/3427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/users\/1071"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/comments?post=3427"}],"version-history":[{"count":320,"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/pages\/3427\/revisions"}],"predecessor-version":[{"id":4636,"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/pages\/3427\/revisions\/4636"}],"wp:attachment":[{"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/media?parent=3427"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yorku.ca\/science\/mathstats\/acadic\/wp-json\/wp\/v2\/tags?post=3427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}