Dash MATLAB Example: Iris Dataset App

Dash R, MATLAB, Julia Dash for MATLAB®
1

New to Dash MATLAB®? See:

Follow this link to see more examples and learn how to use Dash for MATLAB®!

We encorage you to ask any questions you may have about Dash for MATLAB®. We are here to help! You can also share your ideas with the community.

In this example you are going to make a Dash App to visualize the Iris dataset.

The app consist of a gscatter showing the data, and a slider to change the range of the petal width.

irisDataset

Create a new script called iris.m with the following code:

terminate(pyenv);
clearvars; % Removes all variables from the currently active workspace.

% Create initial graph.
ax = axes('Tag', 'scatter-plot');
graph = ui2dash(ax);
centerGraph = Html('Center', {graph});

% Slider title
sliderText = Html('H2', {'Petal Width'});

% Slider.
slider = uislider();
slider.UserData = struct(...
    'min', 0, 'max', 2.5, 'step', 0.1,...
    'marks', {{0, 2.5}},...
    'value', {{0.5, 2}});
uislider = ui2dash(slider, 'range-slider');

components = {centerGraph, sliderText, uislider};

% Define the callbacks.
args = {argsOut('scatter-plot', 'figure'), argsIn('range-slider','value')};
handle = 'update_figure';
callbackDat = {args, handle};

% Run the app.
startDash(components, 8057, callbackDat, 'DARKLY');

As you can see, we have three components in our app: the graph, an H2 Html component to show a title for the slider, and finally a uislider.

In this example we define our uislider using UserData. This way we can set two initial values in order to have a range slider.

The callback takes the slider values as input, and outputs the corresponding graph. Create a file for your callback function called update_figure.m:

function plotlyFig = update_figure(slider_range)
    irisData = readtable('https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv');
    low = slider_range{1};
    high = slider_range{2};

    rows = (irisData.petal_width > low & irisData.petal_width < high);
    subtab = irisData(rows,:);

    color = lines(3); % Generate color values

    gscatter(subtab.sepal_width, subtab.sepal_length,...
        categorical(subtab.species),... % Group
        color,... % Color
        '.', 40); % Symbol and size

    set(gca,'FontSize',14);
    xlabel(gca, 'sepal width');
    ylabel(gca, 'sepal length');

    fig = fig2plotly(gcf, 'offline', true, 'open', false, 'Visible', false);
    addtheme(fig, 'plotly_dark');
    
    plotlyFig1 = {struct('data', {fig.('data')}, 'layout', fig.('layout'))};
    plotlyFig = char(jsonencode(plotlyFig1));
end

This callback function takes a single argument, which happens to be an array with two values (low and high). We take the original dataset and filter the rows having petal_width between those values, and finally make the plot.

Feel free to change the values or filtering logic and see the changes!