[Python+Flask+Echarts] Visualization exercises-COVID-19 World Vaccination Data (Statistical Rose Chart of Vaccine Type Usage)



data set

The data source of this article is https://www.kaggle.com/gpreda/covid-world-vaccination-progress
Insert picture description here
Main information:
Country -this is the country that provides vaccination information;
Country ISO code -Country ISO code;
Date -Data Enter the date; for some dates, we only have daily vaccinations, for other days, only the (cumulative) total;
total number of vaccinations -this is the absolute value of the country
's total number of vaccinations; total number of people vaccinated -according to different immunization schedules , A person will be vaccinated with one or more (usually 2) vaccines; at a certain moment, the number of vaccinations may be greater than the number of people;
the total number of people who have been fully vaccinated -this is to receive the whole set according to the immunization plan (usually 2 times) The number of people immunized; at a certain moment, a certain number of people may be vaccinated with the vaccine, while another (smaller) group of people are vaccinated with all the vaccines in the plan;
daily vaccination (primitive) -for Specific data input, the number of vaccinations in the date/country;
daily vaccination -for some data input, the number of vaccinations in the date/country;
the total number of vaccinations/number of vaccinations as of the date in the country and the total population Percentage between populations (percentage) ;
total number of people vaccinated per hundred -population immunization, the ratio of the total population to the date in the country (percentage) ; total number of
people per hundred vaccinations -the population is fully immunized, the total population reaches the date of being in the country Ratio (percentage);
number of vaccinations per day-The number of vaccinations
per day for that day and the country/region; the number of vaccinations per million days -the ratio (ppm) between the number of vaccinations on the current day of the country and the total population;
the vaccines used in the country-the number used in the country Total number of vaccines (latest);
source name -information source (national competent authority, international organization, local organization, etc.);
source website -information source website;

Back to top


demand

Insert picture description here

This data set is the latest COVID-19 vaccination statistics. For some reasons, many specific information in the data set are missing. After some browsing, I observed that the column of vaccines used in this country has relatively high data integrity. So just use this column to make statistics on the use of all vaccine types and countries to understand the most widely used types of vaccines.

The main idea is:

  • Extract the two valid columns of the country and the vaccines used in the country
  • De-duplicate the extracted data, because what is needed is 国家->使用疫苗类型the key-value pair form data
  • Group and aggregate vaccine types
  • Flask framework transmits data
  • HTML rendering visualization

Back to top


Code

① Python data preprocessing

import pandas as pd
from flask import Flask,render_template

# 读取数据集
data = pd.read_csv("G:\Projects\pycharmeProject-C\Flask\dataset\country_vaccinations.csv")
data.columns = ['国家','国家代码','日期','疫苗接种总数','接种的总人数','已完全接种疫苗的总人数','每日疫苗接种(原始)','每日疫苗接种','截至该国日期为止的总疫苗接种量/接种人数与总人口之间的百分率(百分比)','总人数每百接种疫苗','人每百全接种总数','每百万日接种量','该国使用的疫苗','来源名称','来源网站']

# 填补缺失值
data.fillna(0,inplace=True)

# 统计各国使用的疫苗种类
data_use = data[['国家','该国使用的疫苗']].drop_duplicates()
# 统计不同疫苗的在不同国家的使用情况
count = data_use['该国使用的疫苗'].value_counts()
# counts = data_use.groupby('该国使用的疫苗').agg(count=('该国使用的疫苗','count')).reset_index()

list = count.reset_index().values.tolist()

② The Flask framework transmits data

# 可视化
app = Flask(__name__)
@app.route("/")
def index():
    sheets = list
    return render_template("country_vaccinations02.html",sheet = sheets)
if __name__ == '__main__':
    app.run(debug=True)

③ HTML rendering

<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height:100%">
<div style="height:100%" id="container"></div>
<script type="text/javascript" src="../static/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);

    var data = [{
     
     % for item in sheet %}'{
     
     { item.0 }}',{
     
     % endfor %}];
    var data1 = [{
     
     % for item in sheet %}{
     
     {
     
      item.1 }},{
     
     % endfor %}];

    var option = null;
    option = {
     
     
        title:{
     
     
           text:'不同类型疫苗使用占比图',
        },
        tooltip:{
     
     
           trigger:'item',
           formatter:'{a}</br>{b}:{c}({d}%)'
        },
        legend:{
     
     
           show:true,
           left:'5%',
           top:'5%',
           orient:'vertical'
        },
        series:[
           {
     
     
               name:'疫苗使用情况',
               type:'pie',
               roseType:'area',
               radius:['10%','50%'],
               center:['50%','50%'],
               data:[
                   {
     
     name:data[0],value:[data1[0]]},
                   {
     
     name:data[1],value:[data1[1]]},
                   {
     
     name:data[2],value:[data1[2]]},
                   {
     
     name:data[3],value:[data1[3]]},
                   {
     
     name:data[4],value:[data1[4]]},
                   {
     
     name:data[5],value:[data1[5]]},
                   {
     
     name:data[6],value:[data1[6]]},
                   {
     
     name:data[7],value:[data1[7]]},
                   {
     
     name:data[8],value:[data1[8]]},
               ],
               emphasis: {
     
     
                    itemStyle: {
     
     
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
               }
           }
        ]
    };
    if (option && typeof option == "object"){
     
     
       myChart.setOption(option);
    }
</script>
</body>
</html>

Back to top


Visual display

Insert picture description here

Back to top


Guess you like

Origin blog.csdn.net/qq_45797116/article/details/113415122