Plot / Plotly
Use plotly to create plots. Also demonstrates how to provide live control over plots.
import numpy as np
from plotly import graph_objects as go
from plotly import io as pio
from h2o_wave import ui, main, app, Q
np.random.seed(19680801)
@app('/demo')
async def serve(q: Q):
if not q.client.initialized: # First visit
q.client.initialized = True
q.client.points = 25
q.client.plotly_controls = False
q.page['controls'] = ui.form_card(
box='1 1 4 2',
items=[
ui.slider(name='points', label='Points', min=5, max=50, step=1, value=q.client.points, trigger=True),
ui.toggle(name='plotly_controls', label='Plotly Controls', trigger=True),
]
)
q.page['plot'] = ui.frame_card(box='1 3 4 5', title='', content='')
if q.args.points is not None:
q.client.points = q.args.points
if q.args.plotly_controls is not None:
q.client.plotly_controls = q.args.plotly_controls
n = q.client.points
# Create plot with plotly
fig = go.Figure(data=go.Scatter(
x=np.random.rand(n),
y=np.random.rand(n),
mode='markers',
marker=dict(size=(8 * np.random.rand(n)) ** 2,
color=np.random.rand(n)),
opacity=0.8,
))
_ = fig.update_layout(
margin=dict(l=10, r=10, t=10, b=10),
paper_bgcolor='rgb(255, 255, 255)',
plot_bgcolor='rgb(255, 255, 255)',
)
config = {'scrollZoom': q.client.plotly_controls,
'showLink': q.client.plotly_controls,
'displayModeBar': q.client.plotly_controls}
html = pio.to_html(fig, validate=False, include_plotlyjs='cdn', config=config)
q.page['plot'].content = html
# Save page
await q.page.save()