{"id":719,"date":"2020-04-26T12:54:56","date_gmt":"2020-04-26T12:54:56","guid":{"rendered":"https:\/\/pir2.tk\/?page_id=719"},"modified":"2022-03-26T01:38:04","modified_gmt":"2022-03-26T01:38:04","slug":"covid-maps-data-and-api-calls","status":"publish","type":"page","link":"http:\/\/demo.max-drake.cc\/index.php\/covid-maps-data-and-api-calls\/","title":{"rendered":"Covid Maps, data and API calls"},"content":{"rendered":"\n<p>This is the initial Covid information panel I created, using Excel from Web to scrape the <strong><a href=\"https:\/\/www.health.govt.nz\/our-work\/diseases-and-conditions\/covid-19-novel-coronavirus\/covid-19-current-situation\/covid-19-current-cases\" target=\"_blank\" rel=\"noreferrer noopener\">Ministry of Health website<\/a><\/strong> for current data, then using Excel to create the webpage I cut\/passted column into a Text editor and saved the file. Go <strong><a rel=\"noreferrer noopener\" href=\"http:\/\/demo.max-drake.cc\/web\/data\/covid\/CovidMap.html\" target=\"_blank\">HERE<\/a><\/strong> for actual information page.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group alignfull\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"395\" src=\"http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-1024x395.jpg\" alt=\"\" class=\"wp-image-724\" srcset=\"http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-1024x395.jpg 1024w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-300x116.jpg 300w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-768x296.jpg 768w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-1536x592.jpg 1536w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-2048x789.jpg 2048w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-50x19.jpg 50w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-130x50.jpg 130w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-100x39.jpg 100w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-260x100.jpg 260w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-1661x640.jpg 1661w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-640x247.jpg 640w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-1993x768.jpg 1993w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-1920x740.jpg 1920w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_40_05-Transmission-Type-1200x462.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p>This site has the Map with more information if you hover the mouse over the map regions or dots, and also a Table from Google Charts &amp; a bar chart using amChart. The information is static, both on the right hand side. <\/p>\n\n\n\n<p>I had to daily go and activate the Excel sheet>data>refresh all to get the latest information from the site. If some of the tables expanded or were moved I had to rebuild part of the site, so prior to posting it I had to chek the data. <\/p>\n\n\n\n<p>The next iteration uses API data (<em>Application programming interface<\/em>) from several JSON files and displays summary data, a dynamic chart using Chart.js and a Datawrapper Table on the right and an Air quality widget and the central map that is all generated using JavaScript (vanilla) and JS Template literals as shown below. Go <strong><a href=\"http:\/\/demo.max-drake.cc\/web\/data\/covid\/CovidMapAPI.html\" target=\"_blank\" rel=\"noreferrer noopener\">HERE<\/a><\/strong> for actual web page. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-1024x451.jpg\" alt=\"\" class=\"wp-image-725\" srcset=\"http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-1024x451.jpg 1024w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-300x132.jpg 300w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-768x338.jpg 768w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-1536x677.jpg 1536w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-2048x902.jpg 2048w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-50x22.jpg 50w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-113x50.jpg 113w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-100x44.jpg 100w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-227x100.jpg 227w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-1452x640.jpg 1452w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-640x282.jpg 640w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-1743x768.jpg 1743w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-1920x846.jpg 1920w, http:\/\/demo.max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-27-12_46_20-Mozilla-Firefox-1200x529.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This page fetches the latest information from the API&#8217;s and generates it, so there is no requirement to manually update the information. But, because it is going and fetching the information, processing it and then rendering it, it is slower to render on screen. <\/p>\n\n\n\n<p>I was interested in generating the data, both pages are designed for Desktop screens and do not render well on Tablet or Mobile devices. If required, responsive pages can be developed. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the initial Covid information panel I created, using Excel from Web to scrape the Ministry of Health website for current data, then using Excel to create the webpage I cut\/passted column into a Text editor and saved the file. Go HERE for actual information page. This site has the Map with more information [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-full-width.php","meta":{"footnotes":""},"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"http:\/\/demo.max-drake.cc\/index.php\/wp-json\/wp\/v2\/pages\/719"}],"collection":[{"href":"http:\/\/demo.max-drake.cc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/demo.max-drake.cc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/demo.max-drake.cc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/demo.max-drake.cc\/index.php\/wp-json\/wp\/v2\/comments?post=719"}],"version-history":[{"count":5,"href":"http:\/\/demo.max-drake.cc\/index.php\/wp-json\/wp\/v2\/pages\/719\/revisions"}],"predecessor-version":[{"id":727,"href":"http:\/\/demo.max-drake.cc\/index.php\/wp-json\/wp\/v2\/pages\/719\/revisions\/727"}],"wp:attachment":[{"href":"http:\/\/demo.max-drake.cc\/index.php\/wp-json\/wp\/v2\/media?parent=719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}