关键词
Python | Plotly | Dash | 绘图 | 图表 | 散点图 | Markdown | 仪表板 | 动画 | 回调 | 交互式 | 二维 | K均值 | 集群 | 时间序列 | Julia | 统计 | 概率 | 指纹 | 化学 | 分子 | 情感 | 聚类
🎯要点
🎯使用Jupyter Notebook执行Dash 应用，确定Dash输入输出，设计回调函数，Dash应用中包含函数。🎯使用Plotly绘图工具：配置图对象选项，将图转换为HTML、图像。使用数据集绘图，使用回调函数创建交互式图。🎯 使用Plotly express 图表，创建贫困数据集图表。
🎯使用条形图和下拉菜单交互式比较值，垂直和水平绘制条形图，链接条形图和下拉列表，显示多个条形图的不同方式（堆叠、分组、重叠和相对），使用构面将图表拆分为多个子图表 - 水平、垂直或环绕，下拉菜单的附加功能（允许多项选择、添加占位符文本等）。🎯使用散点图探索变量并使用滑块过滤子集。🎯使用 Markdown 探索地图并丰富仪表板，等值线地图，利用动画帧向绘图添加新图层，使用地图回调函数，创建 Markdown 组件，地图投影，用散点图绘图，Mapbox 地图，纳入交互式地图。🎯计算数据频率并构建交互式表格，创建直方图，修改直方图的 bin 和使用多个直方图来自定义直方图，向直方图添加交互性，创建 2D 直方图，创建数据表，控制表格的外观（单元格宽度、高度、文本显示等），将直方图和表格添加到应用程序。🎯创建交互式 K均值集群应用程序。🎯创建控制其他组件的组件，添加动态组件。🎯提取和解析URL，创建多页应用。
🎯创建交互式网络分析，机场交通交互式仪表板，动画散点图，自然语言处理可视化。🎯Python和Julia交互式调用接口。🎯统计可视化、推理和建模。🎯化学指纹相似度评分的概率分布。🎯绘制概率密度并进行分析。🎯时间序列分解绘图。🎯公共安全统计学可视化。🎯死亡率统计分析。🎯量化分子相似度。🎯网络情感仪表板。
🍇Plotly和Dash仪表板
Dash 是由plotly 创建的一个Python 框架，用于创建交互式Web 应用程序。 Dash 是在 Flask、Plotly.js 和 React.js 之上编写的。 使用 Dash，您无需学习 HTML、CSS 和 Javascript 来创建交互式仪表板，您只需要 Python。 Dash 是开源的，使用该框架构建的应用程序可以在 Web 浏览器上查看。
Dash 应用程序由 2 个构建块组成：
布局：布局描述了应用程序的外观和感觉，它定义了图形、下拉列表等元素以及这些元素的位置、大小、颜色等。 Dash 包含 Dash HTML 组件，我们可以使用 Python 创建 HTML 内容并设置其样式，例如标题、段落、图像等。 图形、下拉菜单、滑块等元素是使用 Dash Core 组件创建的。
回调：回调用于为仪表板应用程序带来交互性。例如，我们可以使用这些函数来定义单击按钮或下拉菜单时将发生的活动。
现在，让我们看看如何使用plotly Dash 创建基于Web 的布局。
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px
我们正在使用 dash 包初始化我们的 dash 应用程序。 然后，读取 2018 年至 2019 年不同公司的股价数据，创建 stock_prices 函数，该函数返回股价的折线图。
app = dash.Dash()
df = px.data.stocks()
def stock_prices():
fig = go.Figure([go.Scatter(x = df['date'], y = df['GOH'],\
line = dict(color = 'firebrick', width = 4), name = 'firm')
])
fig.update_layout(title = 'Prices over time',
xaxis_title = 'Dates',
yaxis_title = 'Prices'
)
return fig
app.layout = html.Div(id = 'parent', children = [
html.H1(id = 'H1', children = 'Styling using html components', style = {'textAlign':'center',\
'marginTop':40,'marginBottom':40}),
dcc.Graph(id = 'line_plot', figure = stock_prices())
]
)
在第 16 行，我们使用 html Div 组件设置布局，该组件是一种包装器，将在其中创建布局的元素（标题、图形）。 Div 组件包含 id（元素的唯一标识符）、style（用于设置宽度、高度、颜色等）和子元素（等于初始化布局元素的方括号）等参数。
在（html.Div 的）子组件内，我们使用 H1 函数在第 17 行创建 html H1 标题。 在函数内部，我们设置函数的唯一 id (id = 'H1')、children 属性，使用它设置标题的文本，将 style 属性设置为字典，在其中设置样式，例如居中对齐文本 ，将顶部和底部边距设置为 40 像素。 在第 21 行，我们使用 dash 核心组件 (dcc) 创建 graph ，在其中设置图形的 id 和figure 参数，该参数等于返回绘图图形对象的函数调用 (stock_pricest())。
为了查看我们的应用程序，我们需要像在 Flask 中一样运行我们的 Web 服务器。请记住，Dash 是构建在 Flask 之上的。
if __name__ == '__main__':
app.run_server()
运行应用程序时，您将看到该应用程序正在 http://127.0.0.1:8050/ 上运行，这是您的本地服务器。复制此网址并将其粘贴到您的浏览器中，您将看到以下可视化内容。
现在，让我们看看如何创建连接下拉列表和股价折线图的回调。
使用 @app.callback() 初始化回调，后面跟着函数定义。在此函数中，我们定义更改下拉列表的值时会发生什么。
from dash.dependencies import Input, Output
@app.callback(Output(component_id='line_plot', component_property= 'figure'),
[Input(component_id='dropdown', component_property= 'value')])
def graph_update(dropdown_value):
print(dropdown_value)
fig = go.Figure([go.Scatter(x = df['date'], y = df['{}'.format(dropdown_value)],\
line = dict(color = 'firebrick', width = 4))
])
fig.update_layout(title = 'Stock prices over time',
xaxis_title = 'Dates',
yaxis_title = 'Prices'
)
return fig
输入函数的组件属性，即下拉列表的“值”，作为函数 graph_update 中的参数。 在函数内部，我们创建散点图并返回图形对象Fig，该对象使用回调的Output函数传递给dcc.Graph的figure属性。
我们在下面的代码中组合布局、下拉菜单和回调：
import dash
import dash_html_components as html
import plotly.graph_objects as go
import dash_core_components as dcc
import plotly.express as px
from dash.dependencies import Input, Output
app = dash.Dash()
df = px.data.stocks()
app.layout = html.Div(id = 'parent', children = [
html.H1(id = 'H1', children = 'Styling using html components', style = {'textAlign':'center',\
'marginTop':40,'marginBottom':40}),
dcc.Dropdown( id = 'dropdown',
options = [
{'label':'Google', 'value':'GOOG' },
{'label': 'Apple', 'value':'AAPL'},
{'label': 'Amazon', 'value':'AMZN'},
],
value = 'GOOG'),
dcc.Graph(id = 'bar_plot')
])
@app.callback(Output(component_id='bar_plot', component_property= 'figure'),
[Input(component_id='dropdown', component_property= 'value')])
def graph_update(dropdown_value):
print(dropdown_value)
fig = go.Figure([go.Scatter(x = df['date'], y = df['{}'.format(dropdown_value)],\
line = dict(color = 'firebrick', width = 4))
])
fig.update_layout(title = 'Stock prices over time',
xaxis_title = 'Dates',
yaxis_title = 'Prices'
)
return fig
if __name__ == '__main__':
app.run_server()
下图显示了下拉列表值的变化如何更新我们的股价折线图。
