Vega Visualization

Vega lite visualizations.

from h2o_wave import data
spec = '''{  "description": "A simple bar plot with embedded data.",  "data": {    "values": [      {"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"}  }}'''
q.page['example'] = ui.form_card(box='1 1 2 4', items=[    ui.vega_visualization(        specification=spec,        data=data(fields=['a', 'b'], pack=True, rows=[            ["A", 10], ["B", 20], ["C", 30],            ["D", 40], ["E", 50], ["F", 60],            ["G", 70], ["H", 80], ["I", 90]        ]),    ),])

Check the full API at ui.vega_visualization.

With dimensions

In addition to the width attribute that is present on every form component, vega visualization also provides a way to control height via the height attribute, which defaults to 300px. It supports all the CSS units, however, % may not always work as you could expect so we advise using static units like px, rem etc. instead.

from h2o_wave import data
spec = '''{  "description": "A simple bar plot with embedded data.",  "data": {    "values": [      {"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"}  }}'''
q.page['example'] = ui.form_card(box='1 1 2 4', items=[    ui.vega_visualization(        width='200px',        height='200px',        specification=spec,        data=data(fields=['a', 'b'], pack=True, rows=[            ["A", 10], ["B", 20], ["C", 30],            ["D", 40], ["E", 50], ["F", 60],            ["G", 70], ["H", 80], ["I", 90]        ]),    ),])