Data Format for Heatmaps

[mtanco]

If you've built heatmaps in other plotting libraries, you might have your data formatted in "heat map" shape like:

	Col 1	Col 2	Col 3	Col 4
1	0.1
2
3

The H2O Wave plot card, however is looking for the data in a different shape. You can read about the data() function to learn more. But here's a little snippet to format your pandas data appropriately. We use the melt function to create 3 columns: values for the x-axis, values for the y-axis, and values for the color of that specific x-y cell.

from h2o_wave import site, data, ui
import pandas as pd
import numpy as np

page = site['/test']

rows = []
for i in range(1, 3):
    rows.append([np.random.rand(), np.random.rand(), np.random.rand()])
df = pd.DataFrame(rows, columns=["Iran", "Iraq", "Columbia"])
print(df)

wave_format = df.reset_index().melt(id_vars=["index"], value_vars=df.columns.values)
wave_format["index"] = wave_format["index"].astype(str)
print(wave_format)

page['heatmap1'] = ui.plot_card(
    box='1 1 4 6',
    title='Product Profits by Country',
    data=data(fields=wave_format.columns.tolist(), rows=wave_format.values.tolist()),
    plot=ui.plot([
        ui.mark(
            type='polygon',
            x='=variable',
            y='=index',
            color='=value',
            color_range='#ffffff blue #000000'
        )
    ])
)
page.save()

[KishaniKandasamy]

Thanks a lot @mtanco and It would be much clearer to user , if this details are added to wave doc.