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

本文主要是介绍使用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 htmlapp = 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 pddf = 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 pdapp = 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函数即可。