衡水提供网站制作公司报价,平湖专业网站制作,有没有学室内设计的学校,平面设计作品欣赏#x1f3af;要点
#x1f3af;使用Jupyter Notebook执行Dash 应用#xff0c;确定Dash输入输出#xff0c;设计回调函数#xff0c;Dash应用中包含函数。#x1f3af;使用Plotly绘图工具#xff1a;配置图对象选项#xff0c;将图转换为HTML、图像。使用数据集绘图…要点
使用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_idline_plot, component_property figure),[Input(component_iddropdown, 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, Outputapp 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_idbar_plot, component_property figure),[Input(component_iddropdown, 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()下图显示了下拉列表值的变化如何更新我们的股价折线图。
参阅一计算思维
参阅二亚图跨际
