使用Dash开发交互式数据可视化网页--响应式编程-阿里云开发者社区

开发者社区> 徐洲更> 正文

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

简介: 交互性 后续的操作前,需要安装如下Python包 pip install dash==0.20.0 # The core dash backend pip install dash-renderer==0.
+关注继续查看

交互性

后续的操作前,需要安装如下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-idvalue参数。

随着输入的值的改变,装饰器会调用函数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_idcomponent_property从不同组件中获取输入值,然后其所装饰的函数进行计算后,将值返回装饰器,最后将计算结果输出到指定组件中。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Windows10 UWP开发 - 响应式设计
原文:Windows10 UWP开发 - 响应式设计   Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率、宽高比的Windows10 Universal App布局时的可行方式与小技巧。
1271 0
使用W“.NET技术”CF实现SOA面向服务编程——简单的WCF开发实例
  前面为大家介绍过WCF的特点,现在再讲解一下WCF基础概念。   在WCF里,各个Application之间的通信是由EndPoint来实现的,EndPoint是WCF实现通信的核心要素。一个WCF Service可由多个EndPoint集合组成,每个EndPoint只能有一种绑定,就是说EndPoint就是通信的入口,客户端和服务端通过 EndPoint交换信息。
690 0
使用WCF实现SOA面向服务编程——使用AJAX+WCF服务“.NET技术”页面开发
  在上一篇讲到,如果将BLL层的每一个类都转化为*.svc,这是一个不实在的想法。它会使服务变化复杂,难于管理。   这时候,我们第一时间想到的是23个简单开发模式中的Factory,在这里,Factory正好派上用场。
869 0
首次曝光 | 阿里数万名开发者都在使用的数据库开发工具到底长什么样?
数据管理DMS(Data Management Service)是阿里巴巴自研图形化的数据库开发工具,已服务阿里巴巴及阿里云上几十万开发者实现安全便捷的数据库访问开发工作。用户可以通过DMS实现25种常见数据库的访问研发。
906 0
首次曝光 | 阿里数万名开发者都在使用的数据库开发工具到底长什么样?
数据管理DMS(Data Management Service)是阿里巴巴自研图形化的数据库开发工具,已服务阿里巴巴及阿里云上几十万开发者实现安全便捷的数据库访问开发工作。用户可以通过DMS实现25种常见数据库的访问研发。
1346 0
+关注
徐洲更
生信媛公众号编辑、生信必修课之软件安装课程作者
284
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载