Skip to main content

Plot / Vega-lite / Flex

Place Vegalite plots in a flexible layout.

from h2o_wave import site, ui, data

page = site['/demo']
page.drop()

page['meta'] = ui.meta_card(box='', layouts=[
ui.layout(
breakpoint='xs',
width='100%',
zones=[
ui.zone('top', size='350px', direction=ui.ZoneDirection.ROW, zones=[
ui.zone('top_left', size='75%'),
ui.zone('top_right', size='1'),
]),
ui.zone('bottom', size='350px', direction=ui.ZoneDirection.ROW, zones=[
ui.zone('bottom_left', size='1'),
ui.zone('bottom_center', size='2'),
ui.zone('bottom_right', size='3'),
]),
]
)
])

plot_spec = '''
{
"description": "A simple bar plot with embedded data.",
"mark": "bar",
"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(
box='bottom_center',
title='Plot',
specification=plot_spec,
data=plot_data,
))
page.add('bottom_right', ui.vega_card(
box='bottom_right',
title='Plot',
specification=plot_spec,
data=plot_data,
))

page.save()