Dash与Plotly开发Web端交互式可视化应用

作者 | AlperAydın

来源 | Medium

编辑 | 代码医生团队

原文链接：https://cloud.tencent.com/developer/article/1449666

Dash与plotly

交互式数据可视化对探索性数据分析具有重要影响。在将任何描述性或预测性算法应用于数据集之前，必须首先了解这些特征如何相互关联以及它们如何在内部分布。许多可视化库提供了满足此要求的多种类型的图表。但另一个显而易见的事情是，为每个功能执行相同的绘图工作并滚动每个图表以比较每个功能的结果是一项艰巨的任务。

Plotly是一家数据分析和可视化公司。在这篇文章中，对这家公司的两个python库感兴趣; plotly.py和dash。Plotly.py库为python应用程序提供交互式可视化。如网站所示，可以“在Python中创建交互式，D3和WebGL图表。matplotlib的所有图表类型等等。

dash与plotly开发文档：

https://plot.ly/python/

https://dash.plotly.com/

Dash也是同一家公司的另一个产品，为Python构建基于Web的应用程序提供了框架。如果正在与团队合作或只是想与他人分享工作，那么Web应用程序是最简单的方法，可以消除库版本或界面问题。

在这篇文章中，将了解这两个库如何成为探索性数据分析的良好解决方案。

一个简单的短跑应用程序

下面是一个简单的dash Web应用程序，由六行代码组成。只需将其写入.py文件并调用该文件，应用程序即可运行。

#this is the dash_test.py file

import dash

import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.H1('hello dash')

if __name__ == '__main__':

app.run_server(debug=True, port=8080)

使用文件的确切路径从命令提示符调用文件如下所示。将看到一个控制台窗口告诉服务器正在运行。

python "c:usersalperdocumentsdash_test.py"

现在可以打开Web浏览器并导航到具有给定端口号的localhost URL：127.0.0.1:8080。

在代码的前两行中，只需导入所需的dash库。第三行初始化dash应用程序，第四行使用将在页面上显示的标题标记准备页面布局，最后两行使用调试和端口选项运行服务器。

首先放置所需的元素。为此将修改app.layout并将一个按钮和一个标签元素插入到div中。请注意，这两个元素作为div元素的子元素放在列表中。Dash在dash_html_components库中存储html元素，可以在网站和github repo上找到整个列表。

https://dash.plot.ly/dash-core-components

https://github.com/plotly/dash-html-components/tree/master/src/components

app.layout = html.Div(

 [

  html.Button('create random number', id='button1'),

  html.Label('...', id='label1')

 ]

)

保存文件时，将在控制台窗口中看到一个带有新调试器引脚的新行。如果代码中存在问题，将看到错误消息。在这种情况下，需要再次调用该文件并刷新浏览器。

现在为插入的元素添加一些样式。可以使用样式属性接受css标记字典的元素添加样式。

  html.Button('create random number',

   id='button1',

   style={'display':'block', 'background-color':'#aabbcc'}

  ),

  html.Label('...',

   id='label1',

   style={'display':'inline-block', 'margin':'10'}

  )

现在是时候更进一步，增加一些响应能力。首先导入所需的库

from dash.dependencies import Input, Output

import random

然后添加callback decorator和功能，想在回调执行。

@app.callback(

 Output(component_id=’label1', component_property=’children’),

 [Input(component_id=’button1', component_property=’n_clicks’)]

)

def update_output(input_value):

 return random.random()

update_output函数只生成一个随机数并将其作为结果返回。

@ app.callback decorator将按钮单击事件绑定到update_output函数，并将函数的结果绑定到label1元素。这是响应能力的核心部分。

添加简单图表

由于已经足够介绍了交互性，现在是时候添加一些图表了。首先将保持简单，并在每个按钮点击上放置一个带有随机值的条形图。因此需要在布局中添加图形对象：

app.layout = html.Div(

    [

        html.Button(‘create random number’,

            id=’button1',

            style={‘display’:’block’, ‘padding’:’5', ‘background-color’:’#aabbcc’}),

        html.Label(‘…’,

            id=’label1',

            style={‘display’:’inline-block’, ‘margin’:’10'} ),

        dcc.Graph(id=’graph1') # this is the graph we add

    ]

)

需要修改回调函数来生成图表：

@app.callback(

    Output(component_id='graph1', component_property='figure'),

    [Input(component_id='button1', component_property='n_clicks')]

)

def update_output(input_value):

    random_x = [i for i in range(5)]

    random_y = [random.random() for _ in range(5)]

    figure = {

        'data': [

            {'x':random_x, 'y':random_y, 'type':'bar', 'name': 'Series1'}

        ],

        'layout': {

            'title': 'Dash Data Visualization'

        }

    }

return figure

在callback decorator中，首先用最近添加到布局中的图形对象替换Output语句中的标签。然后在函数内部为图表和图形对象创建x和y值。结果是浏览器中的交互式条形图。

更复杂一些

如果上面的图表对你来说不够用，请不要担心，这是另一个例子，深入一些。

它太快了吗？好吧看看代码。

import random

import pandas as pd

import dash

from dash.dependencies import Input, Output

import dash_html_components as html

import dash_core_components as dcc

import plotly.graph_objs as go

app = dash.Dash(__name__)

names = [‘sepal-length’, ‘sepal-width’, ‘petal-length’, ‘petal-width’, ‘class’]

data = pd.read_csv(‘https://archive.ics.uci.edu/ml/machine-learning-databases/iris/iris.data', names=names)

app.layout = html.Div(

    [

        html.Div([

            dcc.Dropdown(

                id=’ddl_x’,

                options=[{‘label’: i, ‘value’: i} for i in names],

                value=’sepal-width’,

                style={‘width’:’50%’}

            ),

            dcc.Dropdown(

                id=’ddl_y’,

                options=[{‘label’: i, ‘value’: i} for i in names],

                value=’petal-width’,

                style={‘width’:’50%’}

            ),

        ],style={‘width’:’100%’,’display’:’inline-block’}),

        html.Div([

            dcc.Graph(id=’graph1')

        ],style={‘width’:’100%’,’display’:’inline-block’})

    ]

)

@app.callback(

    Output(component_id=’graph1', component_property=’figure’),

    [

        Input(component_id=’ddl_x’, component_property=’value’),

        Input(component_id=’ddl_y’, component_property=’value’)

    ]

)

def update_output(ddl_x_value, ddl_y_value):

    figure={

        ‘data’: [

            go.Scatter(

                x=data[data[‘class’] == cls][ddl_x_value],

                y=data[data[‘class’] == cls][ddl_y_value],

                mode=’markers’,

                marker={ ‘size’: 15 },

                name=cls

            ) for cls in data[‘class’].unique()

        ],

        ‘layout’: [

            go.Layout(

                height= 350,

                hovermode= ‘closest’,

                title=go.layout.Title(text=’Dash Interactive Data Visualization’,xref=’paper’, x=0)

            )

        ]

    }

    return figure

if __name__ == ‘__main__’:

app.run_server(debug=True, port=8080)

代码结构与前一个完全相同。初始化应用程序后，

• 添加了两行数据读取。
• 在app.layout部分中，添加了两个下拉列表，并使用数据列循环填充选项。
• 在@ app.callback decorator中，将这两个下拉列表添加为输入组件
• 在update_output函数中，绘制一个散点图，其中包含下拉列表选择的数据和列。这里有一个棘手的部分。绘制每个类的散点图。在go.Scatter（）函数的末尾和'data'列表中有一个for循环。这个for循环（也称为列表推导）返回Scatter（）对象n次，其中n是数据“类”列中唯一记录的数量。以下行是图表的布局属性。

代码已准备好运行。

• 将其保存到扩展名为.py的文件中， - > “c:…dash_test.py”
• 使用python - > python “c:…dash_test.py”通过命令提示符调用它
• 打开浏览器并导航到应用程序 - >http://localhost:8080/