专栏首页相约机器人使用Dash和Plotly进行交互式可视化

使用Dash和Plotly进行交互式可视化

作者 | AlperAydın

来源 | Medium

编辑 | 代码医生团队

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

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

https://plot.ly/python/

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:\users\alper\documents\dash_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/

交互式数据可视化应用程序已准备好60行代码。

资源:

https://dash.plot.ly/

本文分享自微信公众号 - 相约机器人(xiangyuejiqiren)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python 线程 - 多线程

    Devops海洋的渔夫
  • SAP UI5日期字段关于时区GMT的处理

    关于处理时区那部分,昨天不知道后台也是按GMT的时区来存时间的,我重新整理补充一下:

    Jerry Wang
  • Centos7 安装python3、pip3、ipython3

    直接下载安装包如下: wget "https://www.python.org/ftp/python/3.7.1/Python-3.7.1.tgz"

    Devops海洋的渔夫
  • python基础项目实战:制作一个简易的GUI界面浏览器

    今天为大家介绍一个非常简单的TK第三方库来做的一个GUI界面浏览器,并需要你注册账号,密码方可登陆网站,这也是一个小小的权限控制,各位小可爱可以学一学,说实话还...

    一墨编程学习
  • python3 virtualenv virtualenvwrapper

    安装虚拟环境包装器的目的是使用更加简单的命令来管理虚拟环境。 pip3 install virtualenvwrapper

    Devops海洋的渔夫
  • 遇到需要的登录的网站怎么办?学好python,用这3招轻松搞定!

    一墨编程学习
  • 记Python中一个编码的错误

    字符串在进行unicode的时候,要使用什么编码格式进行转换呢?utf-8?gb2312?utf-16?这个时候就要根据 sys.getdefaultencod...

    魔王卷子
  • Python 正则表达式(贪婪和非贪婪模式)- 匹配颜值美女图片URL

    Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪),总是尝试匹配尽可能多的字符;

    Devops海洋的渔夫
  • Python 正则表达式(r的作用)- 一个关于反斜杠转义的故事

    与大多数编程语言相同,正则表达式里使用"\"作为转义字符,这就可能造成反斜杠困扰。 假如你需要匹配文本中的字符"\",那么使用编程语言表示的正则表达式里将需要...

    Devops海洋的渔夫
  • 用python爬取 20w 表情包之后,感叹我族人是多么强大!

    https://fabiaoqing.com/biaoqing/lists/page/1.html

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券