【Dash搭建可视化网站】项目10：疫情数据可视化大屏制作步骤详解

lys_828

已于 2023-01-11 10:33:33 修改

阅读量3k

点赞数 11

分类专栏： Dash玩转可视化网站文章标签： dash python BI大屏网站搭建

于 2023-01-09 21:27:10 首次发布

本文链接： https://blog.csdn.net/lys_828/article/details/128605640

版权

Dash玩转可视化网站专栏收录该内容

14 篇文章 68 订阅

订阅专栏

手动反爬虫：原博地址 https://blog.csdn.net/lys_828/article/details/128605640

 知识梳理不易，请尊重劳动成果，文章仅发布在CSDN网站上，在其他网站看到该博文均属于未经作者授权的恶意爬取信息

1 项目效果图

整个项目的页面包含四部分，由头部信息，卡片数据，多图表以及动态地图可视化组成，项目代码已上传个人Github仓库。

3 文件介绍和功能完善

3.1 assets文件夹介绍

assets文件夹中就是加载的样式和图片，样式这里可以使用之前已经下载好的bootstrap.min.css样式(也可以按照项目6.2bootstrap组件中的介绍下载其它的样式模板)，图片就是Covid的一个模型图片，对应如下。

3.2 app.py和index.py文件完善

主框架就是app.py项目初始化文件和index.py主程序运行文件，其中app.py文件中的信息较为简单，就是创建一个dash的应用，代码如下

from dash import Dash

app = Dash('__name__')

index.py文件中引入初始化后的应用，然后进行布局及运行初始化设置。

from app import app
import dash_bootstrap_components as dbc


from header import HeaderInfo
from cards import CardInfo
from indicators import IndicatorInfo
from piechart import PieInfo
from barlinechart import BarLineInfo
from mapchart import MapInfo


app.layout = dbc.Col(
    [
        dbc.Row([HeaderInfo()]),
        dbc.Row([CardInfo()]),
        dbc.Row([IndicatorInfo(),PieInfo(),BarLineInfo()]),
        dbc.Row([MapInfo()]),
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)

对应的index.py文件截图如下。

然后在对应的文件中创建函数，搭建基本的框架，各文件的基础信息如下。

3.3 header.py文件完善

项目的头部信息包含了三个部分，可以按照一行三列的布局设置，第一列放置图片居左，第二列放置标题居中，第三列放置更新时间居右。

import dash_bootstrap_components as dbc

def HeaderInfo():
    return dbc.Row(
        [
            dbc.Col([None]),
            dbc.Col([None]),
            dbc.Col([None]),
        ]
    )

其中图片的加载和位置设置，以及标题文字的大小及距离的设置相对简单，最主要解决第三列更新时间的问题，首先给定一个今天的时间作为样例，后续根据接口数据获取的具体时间再更换，在api.ipynb文件中将时间转化为目标样式的代码如下。

import pandas as pd

today = pd.to_datetime('today').strftime('%B %d %Y')
today

输出结果为：

将上述代码复制粘贴到api.py文件中并通过语句导入到header.py文件，完善此文件的信息，代码如下。

import dash_bootstrap_components as dbc
from dash import html
from api import today

def HeaderInfo():
    return dbc.Row(
        [
            dbc.Col(
                [
                    html.Img(src='assets/corona-logo-1.jpg',height='100px',width='100px')
                ],style = {'textAlign':'left','paddingLeft':'6rem','paddingTop':'1rem'}
            ),
            dbc.Col(
                [
                    html.H1('Covid - 19'),
                    html.H6('Track Covid - 19 Cases',className='p-2')
                ],style = {'textAlign':'center','paddingTop':'1rem'}
            ),
            dbc.Col(
                [
                    html.H5(f'Last Updated: {today} (UTC)'),
                ],style = {'textAlign':'right','paddingRight':'6rem','paddingTop':'3rem'}
            ),
        ]
    )

保存修改后，回到index.py文件执行，并刷新网址：http://127.0.0.1:8050/。此时界面输出内容如下：

左右两侧的距离浏览器的距离也太远了，问题就在于最开始使用了dbc.Container()容器，在默认加载css样式中，导致添加的内容自动居中，因此可以把容器调整为html.Div()，修改后的index.py文件中的代码内容如下：

保存后刷新网址，此时左右两侧的内容距离浏览器的距离正常了。

3.6 indicators文件完善

该文件中主要是由Dropdown组件搭配着Indicators图像构成，搭建主体框架，使之满足正常功能。先把第三部分的布局完善，该部分可以分为1行3列，在三个函数中均输入如下内容，查看是否水平排列。

保存文件修改后，刷新网页，此时界面上输出结果如下。

此时本应三列的内容，变成三行输出了，因此需要在index.py文件中修改一下配置，在第三部分添加一个行设置，如下

此时保存文件后再刷新网址，发现布局样式满足一行三列的排布。

布局解决后，开始处理indicators.py文件中的功能完善，基础先把文字和Dropdown组件信息设置出来，由于indicators图像是回调产生，因此只设置一个容器增加id即可，后续设置回调函数即可。

首先获取Dropdown组件的标签信息，此处选择的是国家或者地区，因此可以在covid_data中获取Country/Region字段的唯一值。特别要注意标签信息不能包含None值，不然程序会报错，所以在构建Dropdown组件时，特别留意列表中不包含None值。

然后把这部分代码复制粘贴到api.py文件中，再导入到indicators.py文件中。完善Dropdown组件和文字信息，代码如下

import dash_bootstrap_components as dbc
from dash import html,Input,Output,dcc
from api import country_ls,updata_time

def IndicatorInfo():
    return dbc.Col(
        [
            html.H6('Select Country:'),
            dcc.Dropdown(
                country_ls,
                'China',
                id = 'dpd'
            ),
            html.H6(f'New cases: {updata_time}'),
            dcc.Graph(id='fig1')

        ],width=3,style={'textAlign':'center'}
    )

保存文件后，刷新网页，此时页面显示结果如下

正常显示后，可以设置回调函数，输出Indicators图形，比如先以中国的确诊数据为例，绘制出对比数据更新日期当天的indicator图形（即今天相对于昨天的涨跌指标图），借鉴官方的示例代码。

有了图像示例代码后，就需要构建数据接口，在api.ipynb文件中获取每个国家/地区每天的疫情信息，代码及输出结果如下。

以中国为例，数据更新之日的新增确诊数据和较昨日新增的确诊数据获取方式如下。

today_new_add = covid_data_2[covid_data_2['Country/Region'] == 'China'].iloc[-1]['confirmed'] - covid_data_2[covid_data_2['Country/Region'] == 'China'].iloc[-2]['confirmed'] 
yesterday_new_add = covid_data_2[covid_data_2['Country/Region'] == 'China'].iloc[-2]['confirmed'] - covid_data_2[covid_data_2['Country/Region'] == 'China'].iloc[-3]['confirmed'] 
print('今日新增：{},昨日新增{},indicator指标{}'.format(today_new_add,yesterday_new_add,today_new_add-yesterday_new_add))

输出结果如下。

进一步将获取的过程封装为函数indicator()，传入国家country和covid数据类型type，最后函数返回就是要绘制的figure对象。先把获取每个国家/地区每天的信息covid_data_2变量复制粘贴到api.py文件汇总，然后导入到indicators.py文件里。

此时indicators.py文件中的代码如下。

import dash_bootstrap_components as dbc
from dash import html,Input,Output,dcc
from api import country_ls,updata_time,covid_data_2
import plotly.graph_objects as go
from app import app

def IndicatorInfo():
    return dbc.Col(
        [
            html.H6('Select Country:'),
            dcc.Dropdown(
                country_ls,
                'China',
                id = 'dpd'
            ),
            html.H6(f'New cases: {updata_time}'),
            dcc.Graph(id='confirmed'),
            dcc.Graph(id='death'),
            dcc.Graph(id='recovered'),
            dcc.Graph(id='active'),

        ],width=3,style={'textAlign':'center'}
    )

def indicator(country,type):
    today_new_add = covid_data_2[covid_data_2['Country/Region'] == country].iloc[-1][type] - covid_data_2[covid_data_2['Country/Region'] == country].iloc[-2][type] 
    yesterday_new_add = covid_data_2[covid_data_2['Country/Region'] == country].iloc[-2][type] - covid_data_2[covid_data_2['Country/Region'] == country].iloc[-3][type] 

    return go.Figure(go.Indicator(
                title = {'text': f'New {type}'},
                mode = "number+delta",
                value = today_new_add,
                delta = {'position': "bottom", 'reference': yesterday_new_add},
                domain = {'x': [0, 1], 'y': [0, 1]}))

@app.callback(
    [Output('confirmed','figure'),Output('death','figure'),Output('recovered','figure'),Output('active','figure')],
    [Input('dpd','value')]
)
def update(value):
    return (
        indicator(value,'confirmed'),
        indicator(value,'death'),
        indicator(value,'recovered'),
        indicator(value,'active'),
    )

保存文件后刷新网址，界面运行结果如下。（此时三个indicator图像均可以正常加载，点击下拉菜单可以实现数据更新，但是样式和大小需要进一步调整）

对于两个数值的大小和位置，可以通过number和delta两个参数进行控制。

修改后保存，刷新网址，此时界面显示出数值的大小适合，但是标题太小了，因此需要再修改一下标题样式。

标题颜色也需要进行修改，因此需要在indicator()函数中添加一个color参数。此次修改的地方如下：

对于indictors图形容器和后面回调的Output的内容存在了重复，可以考虑列表推导式简化
然后对于颜色参数可以添加到字体和数值中
图像的高度也需要调整

import dash_bootstrap_components as dbc
from dash import html,Input,Output,dcc
from api import country_ls,updata_time,covid_data_2
import plotly.graph_objects as go
from app import app

ls = ['confirmed','death','recovered','active']

def IndicatorInfo():
    return dbc.Col(
        [
            html.H6('Select Country:',style={'paddingTop':20}),
            dcc.Dropdown(
                country_ls,
                'China',
                id = 'dpd'
            ),
            html.H6(f'New cases: {updata_time}',style={'paddingTop':20}),
            html.Div(
                [
                    dcc.Graph(id=type,config={'displayModeBar': False}) for type in ls
                ],
            )
        ],width=3,style={'textAlign':'center','paddingLeft':45,'paddingRight':45}
    )

def indicator(country,type,color):
    today_new_add = covid_data_2[covid_data_2['Country/Region'] == country].iloc[-1][type] - covid_data_2[covid_data_2['Country/Region'] == country].iloc[-2][type] 
    yesterday_new_add = covid_data_2[covid_data_2['Country/Region'] == country].iloc[-2][type] - covid_data_2[covid_data_2['Country/Region'] == country].iloc[-3][type] 

    fig = go.Figure(go.Indicator(
                title = {'text': f'New {type}','font': {'size': 15,'color':color}},
                mode = "number+delta",
                number = {'valueformat': ',',
                    'font': {'size': 15,'color':color}},
                value = today_new_add,
                delta = {'position': "right", 'reference': yesterday_new_add,'valueformat': ',',
                    'relative': False,
                    'font': {'size': 15}},
                domain = {'x': [0, 1], 'y': [0, 1]}))
                    
    fig.update_layout(
        height = 75  #这个地方卡了很久，如果添加weight属性就不会居中，所以直接去掉就可
    )
    return fig

@app.callback(
    [Output(type,'figure') for type in ls],
    [Input('dpd','value')]
)
def update(value):
    return (
        indicator(value,'confirmed','orange'),
        indicator(value,'death','red'),
        indicator(value,'recovered','green'),
        indicator(value,'active','black')
        )

保存文件后，刷新网址，界面显示内容如下。

3.7 piechart.py文件完善

此文件功能就是对Dropdown组件选中的标签，进行疫情四项指标的占比输出。主要的问题在于获取各项指标数据，由于各指标名称和字段名称是相同的，所以还是使用列表推导式的方式进行简化代码。构建pie图核心参数一个是values，还有一个names，这两参数都与四个指标相关，最终的代码如下。

import dash_bootstrap_components as dbc
from dash import html,Input,Output,dcc
from app import app
from api import covid_data_2
import plotly.express as px

ls = ['confirmed','death','recovered','active']
def PieInfo():
    return dbc.Col(id = 'pie',width=4,
    style={'textAlign':'center','paddingTop':20})

@app.callback(
    Output('pie','children'),
    [Input('dpd','value')]
)
def update(value):
    lastest_record = covid_data_2[covid_data_2['Country/Region'] == value].iloc[-1]
    fig = px.pie(values=[lastest_record[i] for i in ls],names=ls)
    fig.update_layout(
        legend={
            'orientation':'h',
            'xanchor':'center',
            'yanchor':'bottom',
            'x':0.5,
            'y':-0.15
            },
        margin=dict(
            t=25,
            b=125
        )
    )
    return [
        html.H6(f'Total Cases: {value}'),
        dcc.Graph(figure=fig,config={'displayModeBar': False})
    ]

保存修改后，刷新网址，此时界面中输出的内容如下。（费时间的地方在于pie图的位置和legend的位置放置，需要慢慢调整参数，达到自己满意的一个样式）

3.8 barlinechart.py文件完善

该文件的功能是按照Dropdown组件选取的标签，绘制对应国家/地区的最近30天的疫情确诊数据，以及近七天的平滑数据曲线。首先在api.ipynb文件中获取最近30天的疫情确诊数据，以中国为例。

先提取中国确诊的疫情数据，并借助shift(1)方法，求解每日新增的确诊数量。

然后借rolling(7)方法获取数据7日曲线数据。

最后就是对最后30条数据进行切片即可获取对应的数据。把此过程封装为函数get_30_days_data()，然后保存在api.py文件中，方便调用。

数据都准备完毕后，开始完善barlinechart.py文件。其中go.Figure()中可以绘制多个图形，图形之间用列表存放；还有重点关于交互图中的hover_text的设置，此处可以根据自己需要任意设定显示信息，比如这里显示的有日期、数量和国家，扩宽了数据的可视化的角度；此外还有y轴相关信息的设置，同理x轴的设置也是同理，该文件中全部的代码如下。

import dash_bootstrap_components as dbc
from dash import html,Input,Output,dcc
from app import app
from api import get_30_days_data
import plotly.graph_objects as go

def BarLineInfo():
    return dbc.Col(id='barline',style={'textAlign':'center','paddingTop':20})

@app.callback(
    Output('barline','children'),
    [Input('dpd','value')]
)
def update(value):

    covid_data_30 = get_30_days_data(value)

    fig = go.Figure([
                go.Bar(
                    x = covid_data_30['date'].tail(30),
                    y = covid_data_30['confirmed new add'].tail(30),
                    name='Daily Confirmed Cases',
                    marker = {'color':'orange'},
                    hoverinfo='text',
                    hovertext=
                    '<b>Date</b>: ' + covid_data_30['date'].tail(30).astype(str)+'<br>' +
                    '<b>Daily Confirmed Cases</b>:' + [f'{i:.0f}' for i in covid_data_30['confirmed new add'].tail(30)]+'<br>' +
                    '<b>Country</b>: ' + covid_data_30['Country/Region'].tail(30).astype(str) + '<br>'
                ),
                go.Scatter(
                    x=covid_data_30['date'].tail(30),
                    y=covid_data_30['Rolling Ave.'].tail(30),
                    mode='lines',
                    name='Rolling Average of the last 7 days - Daily Confirmed Cases',
                    marker={'color': 'pink'},
                    hoverinfo='text',
                    hovertext=
                    '<b>Date</b>: ' + covid_data_30['date'].tail(30).astype(str) + '<br>' +
                    '<b>Rolling Ave.</b>:' + [f'{i:.0f}' for i in covid_data_30['Rolling Ave.'].tail(30)] + '<br>'
                )
            ]
    )
    fig.update_layout(
        legend={
            'orientation':'h',
            'xanchor':'center',
            'yanchor':'bottom',
            'x':0.5,
            'y':-0.25
            },
        margin=dict(
            t=25,
            b=150,
            l=0,
            r=70
        ),
        yaxis={
                'title': '<b>Daily Confirmed Cases</b>',
                'color': 'black',
                'showline': True,
                'showgrid': True,
                'showticklabels': True,
                'linecolor': 'white',
                'linewidth': 1,
                'ticks': 'outside',
                'tickfont': {
                    'family': 'Aerial',
                    'color': 'white',
                    'size': 12
                }
            }
    )

    return [
        html.H6(f'Last 30 Days Confirmed Cases: {value}'),
        dcc.Graph(
            figure=fig,config={'displayModeBar': False}
        )
    ]

保存文件后刷新网页，界面中显示的内容如下。

3.9 mapchart.py文件完善

该文件的功能实现各国家地区确诊数据随着时间变化的地图可视化。关于地图可视化，可以参考官方示例代码。由于地理数据是属于面数据（区别于具体的点数据），因此可以采用px.choropleth()方法绘制。

现在关键点落到地理信息的匹配上，获取的数据中虽然有国家/区域信息，但是和px.choropleth()方法绘制地图时需要的地理数据不一致，因此需要将目前手上的数据通过某一特定标识进行转化。

px.choropleth()方法中的location参数指定的iso_alpha就可以作为参考，国家/地区的iso编码都是唯一的，因此可以用过地理位置信息。而所有国家的iso编码信息，项目中提供iso编码.txt文件，如下。

从中提取iso编码（对应第一列）、国家/地区名称（英文是倒数第二列，中文是倒数第一列），代码如下。

经过仔细观察后发现，获取的数据库中的疫情数据对应的国家/地区，与iso编码中的国家/地区并不完全匹配。

可以创建一个替换字典，将国家/地区名称化为一致，然后借助replace()方法进行数据替换。

核实数据是否替换成功。以韩国，朝鲜为例，数据清洗完毕。

接着就是把iso数据和疫情数据进行合并，合并的依据，一个是以Country/Region字段，一个是以country字段，合并的代码和输出结果如下

至此把绘制地图可视化的数据准备完毕，接着就是把以上处理数据的代码转移到api.py文件中，并把最终的geo_data变量导入到mapchart.py文件汇总。在实际测试的过程中发现针对演示的时间字段也需要进行处理，只提取数据的年月，并把数据转化为字符串格式（原来时间的格式是datetime数据格式）

然后把这两行代码更新到api.py中，然后完善mapchart.py文件，全部代码如下

from dash import html,Input,Output,dcc
from app import app
from api import geo_data
import plotly.express as px

def MapInfo():

    #考虑到测试计算机的性能，可以指定数据采样，比如只取十分之一的数据进行演示
    geo_data_resample = geo_data.sample(frac = 0.1)

    fig = px.choropleth(geo_data_resample.sort_values('date_play'),               
                                locations="iso",               
                                color="confirmed",
                                hover_name="Country/Region",  
                                animation_frame="date_play",    
                                color_continuous_scale='amp',  
                                height=600)

    fig.update_layout(
        margin=dict(
            l=0,
            r=0,
            b=0,
            t=25,
            pad=0
        )
    )
    return dcc.Graph(
            figure= fig
    )

保存文件后，刷新网址，页面输出结果如下。（受限于测试计算机的性能，使用所有的数据量会导致演示地图稍微卡顿，项目中设置了一个采样方法，这里使用了十分之一的数据量。此外还发现在地图的动态演示中，发现格陵兰岛的数据始终空白）

可以考虑补充这部分数据，假定都是以0进行填充。（这里是实现某一地区数据缺失时的处理方式，如果有真实数据，直接用真实数据按照此方法填补即可），在api.py文件中添加格陵兰岛的数据，并把数据合并到geo_data变量中，如下

此时保存文件后，刷新网页，动态演示过程中，格陵兰岛的颜色不再是灰白色了，数据值为0。

4 样式修改

4.1 整体样式的修改

在assets文件夹下新建一个setting.css文件，设置整体风格。最后一行的overflow-y设置是参照实战7中3.4 table.py文件完善部分防止全部全局撑开后网页抖动的设置，具体介绍可以参考实战7。背景设置为一种蓝色调，字体颜色设置为白色。

setting.py文件中的全部代码如下。（其中只有两个属性是项目9中没有的属性，div_container属性控制四部分的整体布局，card_container属性用于控制组件的样式）

html,body{ 
    background:#0d0247;
    color: white;
    overflow-y:scroll;} 

.div_container{
    text-align: center;
    margin:  20px;
    padding: 20px;
    margin-top: 5px;
}

.card_container{
    border-radius: 5px;
    background-color: #182757;
    margin: 16px;
    padding: 20px;
    position: relative;
    box-shadow: 2px 2px 2px #1e294e;
}   

 /* width */
 ::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
  }


/* Track */
::-webkit-scrollbar-track {
    background: #232c37 !important;
    border-radius: 10px !important;
    display: block !important;
    }
    
/* Handle */
::-webkit-scrollbar-thumb {
background: #363535 !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: white !important;
}

#dpd * {
    background-color: #182757 !important;
    color: #7f9ab4 !important;
    font-size: 10px !important;
}

.Select-control{
    border: 3px solid #323844 !important;
}

.Select-menu-outer{
    overflow: hidden !important;
    border-color: #36425e !important;
}