使用Dash开发交互式数据可视化网页--响应式编程

交互性

后续的操作前,需要安装如下Python包

pip install dash==0.20.0  # The core dash backend
pip install dash-renderer==0.11.2  # The dash front-end
pip install dash-html-components==0.8.0  # HTML components
pip install dash-core-components==0.18.1  # Supercharged components
pip install plotly --upgrade  # Plotly graphing library used in examples

第一部分
完成了整体布局，但是基本都是静态图形，无法体现dash交互性数据探索特性。这一部分则是让图形能够动起来，对我们的操作有所回应。

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='my-id', value='initial vale', type='text'),
    html.Div(id='my-div')
])

@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'you\'ve entered "{}"'.format(input_value)

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

运行之后会的界面只有一个dcc.Input提供的输入框，但是这个输入框是输入后，是可以改变页面中的文字。那么这个是如何实现的呢？

我们的应用界面的输入和输出是通过app.callback装饰器进行声明。

在Dash中，应用的输入输出其实就是某个组件的属性(properties)。因此，Output(component_id='my-div', component_property='children')就可以解释为，将值输出到ID为my-div的HTML组件的children的参数中，而[Input(component_id='my-id', component_property='value')]则表明输入时来自于ID为my-id的value参数。

随着输入的值的改变，装饰器会调用函数update_output_div生成新值。这其实有点像Excel，当你写好一个函数后，修改原来值会产生新的值，这种编程方法叫做"Reactive Programming"，应该可以翻译为响应式编程吧.

让我们更进一步，看看使用Slider组件加上响应式编程后，图片是如何动起来. 数据和之前使用的一致，之前是展示了所有年份，不同洲的国家的GDP分布情况。而这里则可以使用滑动栏的方式，逐年查看。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

df = pd.read_csv(
    'https://raw.githubusercontent.com/plotly/'
    'datasets/master/gapminderDataFiveYear.csv')

app = dash.Dash()

app.layout = html.Div([
    dcc.Graph(id = 'graph-with-slider'),
    dcc.Slider(
        id = 'years-slider',
        min = df['year'].min(),
        max = df['year'].max(),
        value = df['year'].min(),
        step = None,
        marks = {str(year): str(year) for year in df['year'].unique()}
    )
])

@app.callback(
    dash.dependencies.Output(component_id = 'graph-with-slider', component_property = "figure"),
    [dash.dependencies.Input('years-slider', 'value')]
)
def update_figure(selected_year):
    filtered_df = df[df.year == selected_year]
    traces = []
    for i in filtered_df.continent.unique():
        df_by_continent = filtered_df[filtered_df['continent'] == i]
        traces.append(go.Scatter(
            x = df_by_continent['gdpPercap'],
            y = df_by_continent['lifeExp'],
            text = df_by_continent['country'],
            mode = 'markers',
            opacity = 0.7,
            marker = {
                'size': 15,
                'line': {'width':0.5, 'color':'white'}
            },
            name = i
        ))
    return {
        'data': traces,
        'layout': go.Layout(
            xaxis = {'type':'log', 'title':'GDP Per Capita'},
            yaxis = {'title':'Life Expectancy', 'range':[20,90]},
            margin = {'l':40, 'b':40, 't':10, 'r':10},
            legend = {'x':0, 'y':1},
            hovermode = 'closest'
        )
    }

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

首先是在布局中设置了两个占位组件，这两个占位组件一个用于提供年份用于筛选，一个用于则是展示输出。然后update_figure接受值返回对应的图形对象，最后展示到浏览器中。

Dash应用在启动的时候会加载数据，因此当用户访问应用的时候，数据已经在内存中，随后用户的交互操作就能得到及时的响应。当然callback函数不会修改原始数据，它仅仅是在内存中创建新的拷贝而已。

多个输入值

上一节只是单个输入单个输出，在Dash中，每个Output，都可以由多个Input。这一部分则是介绍通过加入更多调节组件多角度地展示数据。这里用到了五个调节组件，为2个Dropdown, 2个RadioItems和1个Slider。

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash()

df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/'
    'cb5392c35661370d95f300086accea51/raw/'
    '8e0768211f6b747c0db42a9ce9a0937dafcbd8b2/'
    'indicators.csv')

available_indicators = df['Indicator Name'].unique()

app.layout = html.Div([
    html.Div([
        html.Div([
            dcc.Dropdown(
                id='xaxis-column',
                options=[{'label':i, 'value':i} for i in available_indicators],
                value = 'Fertility rate, total(births per woman)'
                ),
            dcc.RadioItems(
                id = 'xaxis-type',
                options = [{'label':i, 'value':i} for i in ['Liner','Log']],
                value = 'Liner',
                labelStype={'display':'inline-block'}
            )
        ],
        style = {'width':'48%', 'display':'inline-block'}),
        html.Div([
            dcc.Dropdown(
                id = 'yaxis-column',
                options = [{'label':i, 'value':i} for i in available_indicators],
                value = 'Life expectancy at birth, total(year)'
            ),
            dcc.RadioItems(
                id = 'yaxis-type',
                options = [{'label':i, 'value':i} for i in ['Liner','Log']],
                value = 'Liner',
                labelStyle={'display':'inline-block'}
            )
        ], style={'width':'48%','float':'right','display':'inline-block'})
    ]),
    dcc.Graph(id='indicator-graphic'),
    dcc.Slider(
        id='year-slider',
        min=df['Year'].min(),
        max=df['Year'].max(),
        value=df['Year'].max(),
        step=None,
        marks={str(year): str(year) for year in df['Year'].unique()}
    )
])

@app.callback(
    Output('indicator-graphic','figure'),
    [Input('xaxis-column','value'),
     Input('yaxis-column','value'),
     Input('xaxis-type','value'),
     Input('yaxis-type','value'),
     Input('year-slider','value')
    ]
)
def update_graph(xaxis_column_name, yaxis_column_name,
                 xaxis_type, yaxis_type,
                 year_value):
    dff = df[df['Year'] == year_value]
    return {
        'data':[go.Scatter(
            x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
            y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
            text=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],
            mode = 'markers',
            marker = {
                'size': 15,
                'opacity': 0.5,
                'line':{'width':0.5, 'color':'white'}
            }
        )],
        'layout':go.Layout(
            xaxis={
                'title':xaxis_column_name,
                'type':'linear' if xaxis_type == 'Liner' else 'log'
            },
            yaxis={
                'title': yaxis_column_name,
                'type': 'linear' if yaxis_type == 'Liner' else 'log'
            },
            margin={'l':40, 'b':40,'t':10,'r':0},
            hovermode='closest'
        )
    }

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

和单个输入区别不大，就是输入多了，要写的代码多了，写代码的时候可能会写错而已。如果有多个输出的需求，只要定义多个callback函数即可。

第二部分小节

Dash应用使用装饰器callback进行响应式编程。回调函数根据component_id和component_property从不同组件中获取输入值，然后其所装饰的函数进行计算后，将值返回装饰器，最后将计算结果输出到指定组件中。