Quick tutorial

Quick Start: A journey through the Iris dataset

Introduction

The Iris flower dataset is a multivariate dataset introduced by the British statistician and biologist Ronald Fisher in his paper "The use of multiple measurements in taxonomic problems" (September 1936) as an example of linear discriminant analysis. It consists of 50 samples from each of three species of Iris (Iris setosa, Iris virginica and Iris versicolor). Four features were measured from each sample: the length and the width of the sepals and petals, in centimeters. The Iris dataset is widely used in machine learning as a benchmark dataset for statistical classification algorithms. It is free and publicly available from the UCI Machine Repository.

The following tutorial illustrates the main Taipy Designer features using this dataset. Expected result is provided in the following project:

• iris_demo.py
• iris_demo_page.xprjson

1. Installing required Python packages

Begin by creating a file named requirements.txt to specify the packages required for the iris example: pandas, scikit-learn and plotly.

pandas==2.2.1
plotly==5.18.0
scikit_learn==1.4.0

Your final file should resemble the following: requirements.txt

After defining the requirements, install them using the command:

pip install -r requirements.txt

2. Creating an empty projet

To start, create a Python skeleton script named iris_demo.py and insert the following code:

from taipy.gui import Gui
from taipy.designer import Page

page = Page("iris_demo.xprjson")

gui = Gui()
gui.add_page("iris", page)
gui.run(design=True, run_browser=False, use_reloader=True)

Note that in gui.run() we set the parameter run_browser to False to prevent the creating of a new browser tab every time you run the script, and use_reloader to True so the script automatically reloads when you change its source file.
These make it easier to build the application at development time.

Next, execute the following command line:

python iris_demo.py

This command will initialize an empty project. It will also generate the corresponding iris_demo.xprjson project file, that will contain all your modifications made by the Designer.

Now open your browser at http://127.0.0.1:5000/iris

as illustrated below:

A Taipy Designer project, named iris_demo (as defined in the Page constructor) is now open in edit mode, with its root URL set to iris (as specified in the call to add_page()).

3. Loading dataset data

With this new project and the necessary Python packages installed, the next step is to load the Iris dataset from scikit-learn. To achieve this, add the following code snippet to your script, creating a variable named iris:

from sklearn import datasets

def load_dataset():
  iris = datasets.load_iris()
  return iris

iris = load_dataset()

4. Visualizing the dataset

To visualize the dataset, follow these steps:

Step1: Prepare the data

Begin by loading the dataset into a Pandas dataframe using the following code:

import pandas as pd

def create_dataframe(iris):
  df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
  df["target"] = iris.target
  target_names = {0: "Setosa", 1: "Versicolour", 2: "Virginica"}
  df['target'] = df['target'].map(target_names)
  return df

df = create_dataframe(iris)

Next add the following code to create the widgets that can represent and interact with the dataset:

import plotly.express as px

def plot_data(df):
  fig = px.scatter(df, x="sepal width (cm)", y="sepal length (cm)", color="target",
                   size='petal length (cm)', hover_data=['petal width (cm)'])
  return fig

fig = plot_data(df)

Step2: Prepare the dashboard

1. Click on the Widgets main tab, then navigate to the Plots category.

1. Add a Plotly generic widget to the dashboard editor: click on the corresponding icon or just perform a drag and drop.

Step3: bind variable to widget

1. Click on the pencil icon on the top-right corner of the widget to display the widget menu. Select then Bind widget as shown below:

2. A panel will then be displayed on the right-side of the screen. From the first binding dropdown, select the variable fig. Finally, click Save to validate the choices.

Step4: Preview the dashboard

A static preview of the figure is then provided. The widget can be moved or resized as needed. The *View* mode can be selected to start interactive visualization.

5. Interactive predictor with classifier training

The objective now is to utilize the previously trained classifier to predict Iris species based on petal and sepal width and length.

Classifier training

Begin by creating a variable named clf using the following code:

from sklearn.ensemble import RandomForestClassifier

def train_classifier(iris):
  clf = RandomForestClassifier()
  clf.fit(iris.data, iris.target)
  return clf
clf = train_classifier(iris)

Interactive predictor

Create a variable named input_data with the initial values for sepal and petal measurements:

input_data = {"sepal_length": 2.7, "sepal_width": 5.4, "petal_length": 3, "petal_width": 0.5}

Next, add an horizontal slider to control the values of "sepal_width". Navigate to the Widgets main tab, then select Basic Inputs & Controls.

Bind the slider to its corresponding feature as illustrated below:

Then, copy and paste the slider three times and bind each one to its corresponding feature to control the values of "sepal_length", "petal_length", and "petal_width".

Open the Dashboard aspect tab, select the four sliders, then click on the Align left then Spread Widgets Vertically icons to ensure a neat appearance:

Configure the sliders with a sliding step of 0.1 and set the minimum and maximum values according to the table below:

Feature	min	max
petal_length	1.0	6.9
petal_width	0.1	2.5
sepal_length	2.0	4.4
sepal_width	4.3	7.9

To adjust these properties, select the Graphical properties tab of each widget:

Add a variable named prediction with the following code:

prediction = '--'
def make_prediction(clf, input_data):
  df = pd.DataFrame(input_data, index=[0])
  prediction = clf.predict(df)
  return iris.target_names[prediction][0]

def on_change(state, var, val):
  if var == 'input_data':
    state.prediction = make_prediction(clf, val)

The on_change callback, handled by Taipy, allows to receive, in the state.prediction dictionary, the values that were set by the user in the Designer interface. See the section on Callbacks in Taipy's Knowledge Base for deeper information.

Next, go back to the Widgets main tab, open the Basic Displays tabset, and then add a KPI value widget:

Bind this widget to the prediction variable.

Switch to *View* mode. Use the sliders to change Iris features and view prediction result accordingly:

Note that computation will be triggered every time a slider is changed. The example can be extended to apply the slider changes only after a click on a validation button.

To preview the final page without the edition, click on the Preview button. The final result will appear as follow: