async def serve(q: Q):
if q.client.plot_added: # Have we already added a plot?
example = q.page['example']
if q.args.to_log_scale:
# Change to log scale
example.title = 'Plot (Log Scale)',
example.specification = spec_log_scale
example.commands = [linear_scale_command]
else:
# Change to linear scale
example.title = 'Plot (Linear Scale)',
example.specification = spec_linear_scale
example.commands = [log_scale_command]
else: # Add a new plot
q.page['example'] = ui.vega_card(
box='1 1 2 4',
title='Plot (Linear Scale)',
specification=spec_linear_scale,
data=plot_data,
commands=[log_scale_command],
)
# Flag to indicate that we've added a plot
q.client.plot_added = True
await q.page.save()
# Plot / Altair
# Use Altair to create plot specifications for the Vega card.
# ---
import altair
from vega_datasets import data
from h2o_wave import site, ui
spec = altair.Chart(data.cars()).mark_circle(size=60).encode(
x='Horsepower',
y='Miles_per_Gallon',
color='Origin',
tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon'
]).properties(width='container',
height='container').interactive().to_json()
page = site['/demo']
page['example'] = ui.vega_card(
box='1 1 4 5',
title='Altair Example',
specification=spec,
)
page.save()
# Generate random datum between 1 and 100
def rnd():
return random.randint(1, 100)
# Get data rows for our plot.
# Typically, this data would be read from some external data source.
def poll():
return [["A", rnd()], ["B", rnd()], ["C", rnd()], ["D",
rnd()], ["E",
rnd()],
["F", rnd()], ["G", rnd()], ["H", rnd()], ["I", rnd()]]
vis = page.add(
'external',
ui.vega_card(
box='1 1 2 4',
title='Plot with external data',
specification=spec,
data=data(fields=["a", "b"], rows=poll()),
))
page.save()
while True:
time.sleep(1)
# Update the plot's data rows
vis.data = poll()
page.save()
{"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
{"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
{"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}
'''
page.add('embedded', ui.vega_card(
box='1 1 2 4',
title='Plot with embedded data',
specification=spec1,
))
# The following produces the same plot as above, but separates the
# Vega-lite spec from the data. This allows you to create a plot once
# and update data multiple times.
spec2 = '''
{
"description": "A simple bar plot with embedded data.",
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}
'''
plot_data = data(fields=["a", "b"], rows=[
["A", 28], ["B", 55], ["C", 43],
["D", 91], ["E", 81], ["F", 53],
["G", 19], ["H", 87], ["I", 52]
], pack=True)
page.add('top_left', ui.vega_card(
box='top_left',
title='Plot',
specification=plot_spec,
data=plot_data,
))
page.add('top_right', ui.vega_card(
box='top_right',
title='Plot',
specification=plot_spec,
data=plot_data,
))
page.add('bottom_left', ui.vega_card(
box='bottom_left',
title='Plot',
specification=plot_spec,
data=plot_data,
))
page.add('bottom_center', ui.vega_card(