In this article, we are going to make a dashboard using H2O Wave. We will be using the Credit Card Fraud Detection dataset from Kaggle and plot interactive visualisations. You can download the dataset from here.

H2O Wave is an open-source Python development framework that makes it fast and easy for data scientists, machine learning engineers, and software developers to develop real-time interactive AI apps with sophisticated visualizations.

H2o

Before we get started, have a look at what we are going to create in this article.

Let’s look at the code now.

Import all the necessary libraries first.

from h2o_wave import Q, main, app, ui,site,data
import pandas as pd 
import numpy as np
import matplotlib.pyplot as plt
import random
import h2o

H2O Wave allows you to make a page and then add insert cards onto the page. Each card can be a plot/graph used for analysis. This is what we are going to make in this article.

Lets import our dataset now. Create a function and read the csv file using pandas as shown below.

def load_data():
    data = pd.read_csv('application_data.csv')
    return data

df = load_data()

Now, to insert different cards we need to create a page first and save that page. You can do that with the below 2 lines. All your code will be inside these 2 lines.

page = site['/eda']

//Your code goes here

page.save()

When you run your python file, the url to view your data will be
https://localhost/10101/eda
because you have customized that in site[‘/eda’].

Lets make our first card now. We will make a header card to display what our dashboard is about.

To do so, add the following lines:

card = page.add('header', ui.header_card(
    box='1 1 5 2',
    title='Credit Card Fraud Detection Data Visualisation',
    subtitle='made by HackerShrine',
    icon='ExploreData',
))

Since, we need to add card, we are using the Wave .add() function with the page variable that we had created earlier. The parameters to this function is the name of the card, and an inbuilt header_card function inside the ‘ui’ library of wave, which we have already imported.

This header_card function takes multiple parameters to place the card onto the page. The box parameters tells us about the position as to where you want to place the card. ‘1 1 5 2’ indicates that the header card should be placed in the first row of the first column having a width of 5 and a height of 2.

‘1 1 5 2’ = ‘column row width height’

You can set the title and subtitle as per the information of your page. Here, it is Data Visualisation of Credit Card data.
The icon parameter allows you to put different icons onto the card. You can visit the documentation and choose relevant icons.

When you run the entire code above you should be able to see the card placed with the details mentioned.

This is how you make a card using H2O Wave.

Let’s make another one which will be a bar plot.

Look at the below lines of code

df_bar=  df.loc[:200,['NAME_INCOME_TYPE','AMT_INCOME_TOTAL','CODE_GENDER']]
v = page.add('bar_plot', ui.plot_card(
    box='6 3 4 4',
    title='Bar Plot',
    data=data(fields=df_bar.columns.tolist(),rows=df_bar.values.tolist()),
    plot=ui.plot(marks=[
        ui.mark(type='interval', 
        x='=NAME_INCOME_TYPE', y='=AMT_INCOME_TOTAL',
        color='=CODE_GENDER', dodge='auto')
    ])
))

Since, the data is huge, we are using the first 200 rows as our dataframe which is assigned to df_point.

Similar to a header card, we will be adding a plot_card instead and this function will be having different parameters with the box being the same.
Here, we need to add data as we have to plot it. To do so, in the data parameter, we convert the dataframe to a list.
Now comes the most important parameter which decides the type of plot we want. We use the ui.plot() function and mention the type as ‘interval’ for a bar plot.
The x= & y= & color= can be set as per requirement. When you run the code it will show the bar plot at the position mentioned in the box parameter.

Similarly, you can add more cards just like the image we saw at the start of the article.
For this article, only one card is shown but you can find the entire code on my GitHub.

GitHub

I have also made a video on H2O Wave. Do check it out !