Blog adds real-time data display of new coronavirus epidemic

With the prevalence of coronavirus and constant recharge during holidays, everyone is forced to stay at home. The new coronavirus COVID-19 epidemic real-time data has been added to the navigation station with nothing to do. The results are as follows:

The data comes from DXY, and the data api comes from: BlankerL

Add Method

Copy the following code to the location to be displayed (note the<? Php?> Tag), and then adjust the css style yourself.

 ?> <div class="row row-sm" style="position: relative;"> <div class="col-12"> <div class="card" style="color:#fff;background-color:#61adff"> <div class="card-body py-2"> <div class="d-flex flex-fill text-sm"> <span>New coronavirus data</span> <div class="flex-fill"></div> <div>Up to<span id="updateTime">0000-00-00 00:00:00</span></div> </div> </div> </div> </div> <div class="col-6 col-md-3"> <div class="card" style="color:#fff;background-color:#FF464D"> <div class="card-body py-3"> <div class="d-flex flex-fill text-md mb-4"> <span>Diagnosis</span> <div class="flex-fill"></div> <span class="text sm">Compared with yesterday:<span id="confirmedIncr">00</span></span> </div> <h1 id="confirmedCount" class="h2 m-0">000</h1> </div> </div> </div> <div class="col-6 col-md-3"> <div class="card" style="color:#fff;background-color:#FFA746"> <div class="card-body py-3"> <div class="d-flex flex-fill text-md mb-4"> <span>Suspected</span> <div class="flex-fill"></div> <span class="text sm">Compared with yesterday:<span id="suspectedIncr">00</span></span> </div> <h1 id="suspectedCount" class="h2 m-0">000</h1> </div> </div> </div> <div class="col-6 col-md-3"> <div class="card" style="color:#fff;background-color:#67727d"> <div class="card-body py-3"> <div class="d-flex flex-fill text-md mb-4"> <span>Death</span> <div class="flex-fill"></div> <span class="text sm">Compared with yesterday:<span id="deadIncr">00</span></span> </div> <h1 id="deadCount" class="h2 m-0">000</h1> </div> </div> </div> <div class="col-6 col-md-3"> <div class="card" style="color:#fff;background-color:#02B88C"> <div class="card-body py-3"> <div class="d-flex flex-fill text-md mb-4"> <span>Healing</span> <div class="flex-fill"></div> <span class="text sm">Compared with yesterday:<span id="curedIncr">00</span></span> </div> <h1 id="curedCount" class="h2 m-0">000</h1> </div> </div> </div> <div class="col-12 col-md-6 d-none d-md-block"> <div class="card" style=""> <div class="card-body py-3"> <h1 class="h5 mb-3">Virus information</h1> <div class="overflow-auto" style="height:100px"> <div id="bd_note"> <div class="text-sm mb-2"><i class="iconfont icon-point mr-2"></i><span id="note1"></span></div> <div class="text-sm mb-2"><i class="iconfont icon-point mr-2"></i><span id="note2"></span></div> <div class="text-sm mb-2"><i class="iconfont icon-point mr-2"></i><span id="note3"></span></div> </div> </div> <div class="d-flex flex-fill text-xs text-muted pt-2 mb-n2"> <span>Data source:<a href=“ https://ncov.dxy.cn/ncovh5/view/pneumonia "Target=" _blank "rel='external nofollow 'style=" color: # 6c757d ">Clove Garden</a></span> <div class="flex-fill"></div> <span><a href= " https://lab.isaaclin.cn/nCoV/ " target="_blank" rel='external nofollow' style="color:#6c757d">API</a></span> </div> </div> </div> </div> <div class="col-12 col-md-6"> <div class="card" style=""> <div class="card-body py-3"> <h1 class="h5 mb-3">Epidemic information</h1> <div class="overflow-auto" style="height:100px"> <div id="bd_news"> </div> </div> <div class="d-flex flex-fill text-xs text-muted pt-2 mb-n2"> <span>Data source:<a href=“ https://ncov.dxy.cn/ncovh5/view/pneumonia "Target=" _blank "rel='external nofollow 'style=" color: # 6c757d ">Clove Garden</a></span> <div class="flex-fill"></div> <span><a href= " https://lab.isaaclin.cn/nCoV/ " target="_blank" rel='external nofollow' style="color:#6c757d">API</a></span> </div> </div> </div> </div> <div id="bd-loading" class="ajax-loading text-center rounded" style="position:absolute;display:flex;width:100%;top:-1rem;bottom:.5rem;background:rgba(125,125,125,.5)"><div id="bd-success" class="col align-self-center"><i class="iconfont icon-loading icon-spin icon-2x"></i></div></div> </div> <script> let url = " https://lab.isaaclin.cn/nCoV/api/overall "; let newsurl = " https://lab.isaaclin.cn/nCoV/api/news "; $.getJSON(url,function(data,status){ let res = data["results"][0]; $("#confirmedCount").text(res["confirmedCount"]); $("# confirmedIncr"). text (res ["confirmedIncr"]? Res ["confirmedIncr"]: 'to be updated'); $("#suspectedCount").text(res["suspectedCount"]); $("# suspectedIncr"). text (res ["suspectedIncr"]? Res ["suspectedIncr"]: 'to be updated'); $("#curedCount").text(res["curedCount"]); $("# curedIncr"). text (res ["curedIncr"]? Res ["curedIncr"]: 'to be updated'); $("#deadCount").text(res["deadCount"]); $("# deadIncr"). text (res ["deadIncr"]? Res ["deadIncr"]: 'to be updated'); $("#note1").text(res["note1"]);  $("#note2").text(res["note2"]);  $("#note3").text(res["note3"]);  $("#updateTime").text(timestampToTime(res["updateTime"],1));  $("#bd-loading").hide(); }).fail(function () { $("# bd success"). html ('Blocked by the api server, please try again later. Note:<a href=“ https://lab.isaaclin.cn/nCoV/ " rel="external nofollow" target="_blank">API</a>');  }); $.getJSON(newsurl,function(data,status){ let res = data["results"][0]; let html = ''; for(let item of data['results']) { html += '<div class="text-sm mb-2">'+timestampToTime(item['pubDate'],1,true)+'<a class="ml-2" href="'+item['sourceUrl']+'" target="_blank" rel="external nofollow">'+item['title']+'</a></div>'; } $("#bd_news").html(html); }).fail(function () { $("# bd success"). html ('Blocked by the api server, please try again later. Note:<a href=“ https://lab.isaaclin.cn/nCoV/ " rel="external nofollow" target="_blank">API</a>');  }); function timestampToTime(timestamp,s,time = false) { var date = new Date(timestamp * s); Y = date.getFullYear() + '-'; M = (date.getMonth()+1 < 10 ? ' 0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; D = date.getDate() + ' '; h = date.getHours(); m = ':' + (date.getMinutes() < 10 ? ' 0'+(date.getMinutes()) : date.getMinutes()); s = ':' + (date.getSeconds() < 10 ? ' 0'+(date.getSeconds()) : date.getSeconds()); if(time) return h+m; else return Y+M+D+h+m+s; } </script> <? php

be careful

Icon of the message list above <i class="iconfont icon-point mr-2"></i> Please reset according to your theme

API author's instructions

To researchers and API users

1. This project is solely for public welfare purposes, and API is free to use for non-commercial purposes. If it is used for commercial purposes in the future or causes any unnecessary copyright disputes, this project will not bear any responsibility;
2. This project only obtains the epidemic data of DXY Garden and stores it as a time series. The ownership of the data belongs to DXY Garden. I cannot authorize any individual or group to use this data in scientific research or commercial projects. If necessary, I hope you can contact DXY Garden and obtain permission;

3. If you are not familiar with the use of API and simply need data for scientific research, you can move to data warehouse , directly download the csv file convenient for statistics/data analysis software;
4. Any changes to the project will be notified on the GitHub homepage of the project. If you have any questions, please give priority to the GitHub homepage. If you can't find satisfactory answers, you can directly send an Issue in GitHub for discussion. Otherwise, I need to reply to the same questions several times a day;
5. If you have any difficulty in obtaining data, please contact me at my GitHub personal homepage Find my contact information in;

6. The first data acquisition time is later than the data recording time of DXY Garden, so there is systematic error in the first data update time of Area API, but it can ensure that the error between the update time of subsequent data and the data update time of DXY Garden is kept within 1 minute;
7. From 17:15 on January 30, 2019, the total number of API uses was counted, not the use frequency of a single IP;
8. At present, it is found that some time series data in Zhejiang Province/Hubei Province have data anomalies, which may be due to the data input error of DXY Garden manually. The crawler of this project only obtains and stores data from the data disclosed by DXY Garden, and will not judge and handle the outliers. Therefore, if this data is used for scientific research purposes, please clean the data yourself. At the same time, welcome to move here I will regularly check and deal with potential abnormal data feedback.

to update

The original api address may be slow to obtain data due to the server principle problem. You can use the GitHub database warehouse address of the anti proxy author to replace the URL address (below) of lines 100 and 101 in the above code. Warehouse address

 let url = " https://i.iowen.cn/BlankerL/DXY-COVID-19-Data/master/json/DXYOverall.json "; let newsurl = " https://i.iowen.cn/BlankerL/DXY-COVID-19-Data/master/json/DXYNews.json ";

Note: The GitHub database warehouse has a data delay of about one hour, but the acquisition speed is stable.