python - 使用 Plotly 的 Slider 交互式绘图
问题描述
如何使用 Plotly 在 Python 中重新创建以下交互式绘图?
我的简单示例绘制了一个条形图,其中一列 x 和另一列 1-x。
来自 Mathematica 的 GIF:
滑块允许在 0 和 1 之间变化 x。
数学代码:
Manipulate[BarChart[{x, 1 - x}, PlotRange -> {0, 1}],
{{x, 0.3, "Level"}, 0, 1, Appearance -> "Open"}]
更新
这是我不喜欢的解决方案:
import plotly.graph_objs as go
from plotly.offline import init_notebook_mode, iplot
init_notebook_mode(connected=True)
import ipywidgets as widgets
绘图:
def update_plot(x):
data = [go.Bar(
x=['1', '2'],
y=[x, 1-x]
)]
iplot(data, show_link=False)
x = widgets.FloatSlider(min=0, max=1, value=0.3)
widgets.interactive(update_plot, x=x)
这方面的问题:
- 移动滑块时绘图会闪烁
- 滑块错位
- 增量不够细化
- 我自己无法指定精确值
解决方案
plotly
下面的代码在和中创建一个交互式绘图Dash
。它需要两个输入:滑块和文本框。当下面的代码保存为 ' .py
' 并且文件在终端中运行时,它应该在终端中运行本地服务器。接下来,* Running on http://
从该服务器复制地址并将其粘贴到浏览器中以打开绘图。很可能是这样http://127.0.0.1:8050/
。资源:1、2、3。( Python 3.6.6
)
重要提示:请注意,要使滑块正常工作,必须将文本框值重置为“ 0
”(零)。
导入库
import numpy as np
import pandas as pd
from plotly import __version__
import plotly.offline as pyo
import plotly.graph_objs as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
创建 Dash 应用程序
app = dash.Dash()
app.layout = html.Div(
html.Div([
html.Div([html.H5("Level"),
dcc.Slider(id='slider_input',
min=0,
max=1,
step=0.005,
value=0.1,
)],style={'width': '200'}
),
html.Div(style={'height': '10'}),
html.Div(dcc.Input( id='text_input',
placeholder='Enter a value...',
type='text',
value=0.0
),style={'width': '50'}),
dcc.Graph(id='example',
figure={'data':[{'x':[1,2],
'y':[0,1],
'type':'bar',
'marker':dict(color='#ffbf00')
}],
'layout': go.Layout(title='Plot',
#xaxis = list(range = c(2, 5)),
yaxis=dict(range=[0, 1])
)
})
], style={'width':'500', 'height':'200','display':'inline-block'})
)
# callback - 1 (from slider)
@app.callback(Output('example', 'figure'),
[Input('slider_input', 'value'),
Input('text_input', 'value')])
def update_plot(slider_input, text_input):
if (float(text_input)==0.0):
q = float(slider_input)
else:
q = float(text_input)
figure = {'data': [go.Bar(x=[1,2],
y=[q, 1-q],
marker=dict(color='#ffbf00'),
width=0.5
)],
'layout': go.Layout(title='plot',
#xaxis = list(range = c(2, 5)),
yaxis=dict(range=[0, 1])
)
}
return figure
运行服务器
if __name__ == '__main__':
app.run_server()
输出
编辑 - 1 ....................
仅使用滑块绘图
下面的代码使用不带破折号的情节。该图与滑块交互。请注意,此代码没有用于更改绘图的文本输入(如上)。但是,下面的图应该使用滑块更新,而无需“释放”滑块来查看更新。在该图中,为绘图创建了单独的轨迹。
导入库
import pandas as pd
import numpy as np
from plotly import __version__
%matplotlib inline
import json
import plotly.offline as pyo
import plotly.graph_objs as go
from plotly.tools import FigureFactory as FF
import cufflinks as cf
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
init_notebook_mode(connected=True)
init_notebook_mode(connected=True)
cf.go_offline()
创建跟踪
traces = []
q = np.linspace(0,1, 100)
for i in range(0,len(q)):
trace = dict(
type = 'bar',
visible = False,
x=[1, 2],
y=[q[i], 1 - q[i]],
marker=dict(color='#ffbf00'),
width=0.5
)
traces.append(trace)
traces[0]['visible'] = 'True'
创建滑块
steps=[]
for i in range(len(traces)):
step = dict(
method = 'restyle',
args = ['visible', [False] * len(traces)],
label=""
)
step['args'][1][i] = True # Toggle i'th trace to "visible"
steps.append(step)
sliders = [dict(
active = 10,
currentvalue = {"prefix": "Level: "},
#pad = {"t": 50},
steps = steps
)]
创建布局
layout = go.Layout(
width=500,
height=500,
autosize=False,
yaxis=dict(range=[0, 1])
)
layout['sliders'] = sliders
绘图图
fig = go.Figure(data=traces, layout=layout)
#pyo.iplot(fig, show_link=False) # run this line to view inline in Jupyter Notebook
pyo.plot(fig, show_link=False) # run this line to view in browser
推荐阅读
- java - 从Java运行exe只是..不会
- sqlite - 批量编辑 Firefox 书签
- android - 如何从片段中的画廊获取图像(jetpack 导航组件)
- amazon-textract - 在 Amazon Textract 中调用 GetDocumentTextDetection 时,作业 ID 获取无效参数异常 400 错误代码
- http - 为什么我的 HTTP POST multipart/form-data 错误?
- javascript - 如何隐藏没有产品reactjs的字符
- sql - 更新两列
- bash - 打印用 grep 找到的正则表达式字符串
- ios - 分页 UICollectionView 图像滑块 - 在末尾减慢滚动/使用弹簧阻尼曲线
- r - ggplot2 轴的主题 - x 和 y 轴之间的间隙