# User Interface

CanvasXpress is a Java-Script library designed for Data Analytics with full audit capabilities and a sophisticated user interface. The interface is fitted with unobtrusive widgets designed for simple graph configuration, audit trail, and straightforward user interaction included in every visualizations.

The canvasXpress user interface has different widgets with embedded functions in the visualizations:

# Toolbar

• Located discreetly at the top of the visualization and configured to appear only when a user hovers the mouse over that area.
• Opens up different user interface options by clicking on the different icons.

Each of the icons allows for the execution of various functions:

1. Camera icon: Designed for saving an image in PNG format. SVG and JSON are also available options. For these options, use the File menu, accessible through the ‘Context Menus’ interface
2. Audit icon: Used to reproduce the original graph and the user's programmatic modifications
3. Move icon: This option allows for moving the Canvas
4. Table icon: Offers a toggle switch for viewing information as a table or a graph
5. Funnel icon: The funnel is built to allow the user to open Data Filters as well as a Data Table simultaneously
6. Lasso icon: : A designated switch for selecting data points in scatter plots
7. Tools icon: Used to open the Data Explorer
8. Resize icon: Maximize or Restore the visualization size to fill the browser window size

# Menus

To show the menus, click on any white space within the graph. This brings up different types of content depending on the type of graph. There are various options, such as menus for bar graphs, scatter plots, etc.

Moving Menus

To navigate menus which have several layers, move and reposition the menus by dragging.

1. Right-click to open the context menu
2. Grab the menu by left-clicking on any non-terminal node
3. Drag the menu to the desired position.
4. Select the intended parameter.

Pining Menus

Pin the menus to the primary toolbar.

1. Right-click to open the context menu and move your mouse to any sub menu.
2. Left-clicking on the submenu reveals a pop-up that will prompt the user to pin a particular level to the main toolbar.
3. Open the toolbar to reveal the various custom items and to allow access to any desired parameters.
4. Removing any of the custom menus from the toolbar can be done by right-clicking on it and following the prompts.

# Configurator

Double-clicking on any white space in the graph brings up the configurator, a widget used for searching for the parameter needed. It is designed to show the various available parameters as the user types them in, which is followed by selecting and changing the value of any specific parameter.

# Data Explorer

This option is for the configuration of the visualization. It works by a drag-and-drop function, through which the user can access many customizations.

The Data Explorer has three sections:

• The top section contains clickable icons to change various parameters and target icons that receive input from the other two sections using drag and drop
• The middle section comprises variables and their metadata
• The bottom section contains samples and their metadata

# Data Filters

Data filters can be automatically configured, depending on the type of metadata included in the visualization. This can be either numeric (continuous) or discrete (categorical).

The filter might appear as a checkbox, or a searchable drop-down menu with multiple sections, depending on the number of categories available. With the numerical filters, the user can toggle between both the log and the normal space.

A crossed icon on top is designed for resetting all the filters when or if necessary.

# Data Table

Use this widget to view both the data as well as the metadata included in the visualization.