Coder Social home page Coder Social logo

covid19's Introduction

Covid19 可视化

结果展示

https://covid19.atomse.net/

项目方案

我们选择了提供

  • 各国在一定时间段内的每日新增确诊/死亡病例,累计确诊/死亡数据查询与可视化
  • 最新各个国家每日新增确诊/死亡病例,累计确诊/死亡数据的占比
  • 最新各个国家每日新增确诊/死亡病例,累计确诊/死亡数据的列表显示

具体的设计如下:

数据源

数据源选择WHO提供的数据

地址:https://covid19.who.int/table

数据清理

我们发现,WHO给出的数据质量足够高,只需要对其标题清除空格即可

df = pd.read_csv("WHO-COVID-19-global-data.csv")
df.columns = [_.strip() for _ in df.columns.values]

数据库

  • Covid19:
    • 每天每个国家的数据
    • keys: date, country, country_code, who_region, new_cases, cumulative_cases, new_deaths, cumulative_deaths
  • Covid19Country:
    • 所有的国家名称、国家的代号
    • keys: country, country_code
  • Covid19Latest:
    • 所有的国家最近一次的数据
    • keys: country, country_code, who_region, new_cases, cumulative_cases, new_deaths, cumulative_deaths
  • Covid19Date:
    • covid19数据日期的起止
    • keys: min_date, max_date

后端

后端使用Django构架,Sqlite3作为数据库,使用Restful接口,给出的资源有

  • /api/v1/allCountries
    • 所有国家的名称,GET
    • 获取Covid19Country的数据
  • /api/v1/dateRange
    • 日期的最大、最小值,GET
    • 获取Covid19Date的数据
  • /api/v1/covid19
    • Covid19 数据
    • 获取Covid19的数据
    • params = {country: "country", startDate: "startDate", endDate: "endDate"}
  • /api/v1/covid19LatestNumbers
    • Covid19 各国最新数据
    • 获取Covid19Latest的数据
    • params = {'topN': 只显示top N的数据, 其他作为Others求和}

前端

vue-element-admin的基础上修改,完成了三个功能,包括:

  • 各国在一定时间段内的每日新增确诊/死亡病例,累计确诊/死亡数据查询与可视化
  • 最新各个国家每日新增确诊/死亡病例,累计确诊/死亡数据的占比
  • 最新各个国家每日新增确诊/死亡病例,累计确诊/死亡数据的列表显示

各个国家的新冠数据可视化

使用国家的选项卡、开始(结束)日期的选项卡,使用echarts折线图进行可视化。

  • 对国家选项卡,首先抓取/api/v1/allCountries的数据,并加载到el-option。使用el-radio-groupel-option实现国家的选择。
  • el-date-picker实现日期的选择,通过获取/api/v1/dateRange得到日期的最大、最小值,利用el-date-picker自带的pickerOptions时间非法日期的屏蔽。
  • 对于echarts模块,由于累计确诊病例数量较多,因此使用左坐标轴,而对于新增确诊病例累计死亡新增死亡,由于其数量较少,远远少于累计确诊病例,因此使用右坐标轴。对于累计确诊病例新增确诊病例,我们使用折线,而对于累计死亡新增死亡,我们使用条形图

将数据传入echarts,数据格式为:

{
    "xData" : ["2020-01-01", "2020-01-02"],
    "yData" : {
        "New_cases" : [100, 200],
        "New_deaths": [1, 2],
        "Cumulative_cases" : [200, 300],
        "Cumulative_deaths" : [50, 100],
    },
    "titleString": "Covid 19 Visualization"
}

echarts读取相关的数据并绘图,其中x轴数据较多,使用

  axisLabel: {
    interval: 10,
    show: true,
    rotate: 60
  },

使得x轴每10个数据显示1次,并旋转60度,从而保证x轴数据的间隔,更加美观。

最新各个国家各个项目的占比

使用el-radio用于选择类型,包括每日新增确诊/死亡病例,累计确诊/死亡数据和top N,使用echarts饼图提供可视化,

最新各个国家的列表显示

使用<img>显示各个国家的国旗,使用WHO的国旗图片

前后端结合

使用nginx进行前后端结合,将api相关的请求进行转发,关键部分配置为

    location /prod-api
    {
        proxy_pass http://localhost:8080;
    }

更新

另外,我们加入了更新命令

执行

python3 $DJANGO_PATH/manage.py shell -c 'import covid19.update; covid19.update.update_covid19()'

其中$DJANGO_PATH/manage.py 为 django项目中的manage.py的绝对路径,如果需要定时更新,可以使用crontab即可,将

0 * * * * python3 $DJANGO_PATH/manage.py shell -c 'import covid19.update; covid19.update.update_covid19()'

加入crontab -e

covid19's People

Contributors

atomsos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.