Visualization view (Decision Optimization)
The Visualization view allows you to configure the graphical representation of input data and solutions for one or several scenarios.
In this section:
The Visualization view is common to all scenarios in a Decision Optimization experiment.
For example, the following shows the default bar chart that appears in the solution tab for the example used in the tutorial Solving and analyzing a model: the diet problem (Decision Optimization).
The Visualization view helps you compare the different scenarios you have created in order to validate models and business decisions.
For example, to show the two scenarios solved in this diet example tutorial, you can add another bar chart by clicking the chart widget. Configure it by clicking the pencil icon. In the Chart Widget Editor you can select Add scenario and choose scenario 1 (assuming that your current scenario is scenario 2) so that you have both scenario 1 and scenario 2 listed. In the Table field select the Solution data option and select solution from the drop-down list. In the bar chart pane on the left, select Descending for the Category order, Y-axis for the Bar type and click OK to close the Chart Widget Editor. A second bar chart is then displayed showing you the solution results for scenario 2. If you re-edit the chart and select @Scenario in the Split by field of the Bar chart pane, you then obtain the following bar chart showing both scenarios in the one chart:
.
There are many different types of charts you can select in the Chart Widget Editor.
Alternatively using the Vega Chart widget, you can similarly chose Solution data>solution to display the same data, select value and name in the x and y fields respectively in the Chart section of the Vega Chart Widget Editor. Then in the Mark section, select @Scenario for the color field. This gives you the following bar chart with the two scenarios on the same y-axis distinguished by different colors.
.
If you re-edit the chart and select @Scenario for the column facet you obtain the two scenarios in separate charts side-by-side as follows:
There are many different types of charts available in the Mark field of the Vega Chart Widget Editor.
You can also select the JSON tab in all the widget Editors and configure your charts using the JSON code. A more advanced example of JSON code is provided in the Vega Chart widget specifications section.
The following widgets are available:
- Notes
widget
Add simple text notes to the Visualization view.
-
Present input data and solution in tables, with a search and filtering feature. See Table search and filtering.
- Charts widgets
Present input data and solution in charts.
- Gantt chart
widget
Display the solution to a scheduling problem (or any other type of suitable problem) in a Gantt chart.
This widget is used automatically for scheduling problems modeled with the Modeling Assistant. You can edit this Gantt chart or create and configure new Gantt charts for any problem even for those that don't use the Modeling Assistant.
You can edit the widgets in the Visualization Editor by clicking the Configure widget (pencil) icon in a widget. You can then customize it either in the Editor or by editing the JSON code. The Editor allows you to easily change the name of your widget and select the source of the data you want to display in your Visualization view. The JSON editor gives you more advanced editing possibilities. As you make changes to a widget in the Visualization Editor a preview is also displayed showing you your changes. You can then choose to save your changes by clicking OK which will close the Visualization Editor Or you can select Cancel to abandon your changes.
For more information about the JSON widget syntax, refer to the following section: Visualization widgets syntax.
You can download your Visualization view as a JSON file, containing the definitions and the data, making it easier for you to share your findings with your collaborators.
Visualization pages
You can create different pages for different scenarios or combine scenarios on the same page.
You can add pages by double-clicking the plus sign. You can then customize what is displayed on each page. To edit a page, click the Edit (pencil) icon. In the Visualization Editor you can edit the page name, reorder and add pages. Clicking OK in the Visualization Editor saves your updates and closes the editor. Or you can select Cancel to abandon your changes. To delete a page, click the page tab and a delete button appears in the tab.
Table search and filtering
You can filter tables (in both Prepare data
view and the Visualization view) by clicking the search icon and entering a value
to search on. You can also specify a column name, colon and a value. For example, if you enter
food:hot
in the diet_food_nutrients
table search field, the table
will be filtered to display only the rows that contain the food "hot". In this example you will
obtain just one row that contains the food Hotdog
. You can also enter the prefix of
a column name, for example fo:hot
will obtain the same result as
food:hot
. The column name is optional, so you can also just enter
hot
in this case. If the column name is not specified, all columns are searched and
the corresponding rows are obtained. For example if you enter 0, in the
diet_food_nutrients
table you obtain 4 rows which contain this value in one of the
columns. You can also filter using numeric values as follows:
Enter in search field | Result: rows displayed containing column values |
---|---|
column_name:12 | equal to 12 |
column_name:10.. | greater than or equal to 10 |
column_name:..10 | less than or equal to 10 |
column_name:15..25 | between 15 and 25 |
Visualization widgets syntax
This section provides you with an introduction to the widget syntax which can be useful for customizing widgets beyond the functionality provided by the JSON editor.
The basic widget syntax is as follows:
{
"name": "Widget Title",
"type": "WidgetType",
"props": {}
}
Description | |
---|---|
|
Defines the widget title, which is displayed in the widget header. |
|
Defines the widget type. |
|
Defines the properties of the widget. The properties vary depending on the |
The basic widget syntax for widgets connected to data, such as tables and charts, is as follows:
{
"name": "Table Cars",
"type": "Table",
"props": {
"container": "",
"data": "cars",
"spec": {},
"search": ""
}
}
Description | |
---|---|
|
You usually specify |
|
You usually leave |
container |
Optionally specify
To aggregate all the scenarios contained in a Decision Optimization experiment, use The rows of the listed scenarios are concatenated in a single table, with an additional column
|
|
Saves the content of the search text field. |
Notes widget specifications
The Notes widget can be styled as a post-it note, as shown in the following code sample:
{
"name": "Notes",
"type": "Notes",
"props": {
"notes": "My post-it note",
"style": {
"background": "#ffe"
},
"headerStyle": {
"background": "#ffe"
}
}
}
This style example is applicable to other widgets.
Table widget specifications
Table widget specifications are composed of a list of columns following this syntax:
{
"name": "Table Cars",
"type": "Table",
"property": "Acceleration",
"label": "Acceleration",
"type": "Number",
"visible": true,
"width": 100,
"style": {}
}
Description | |
---|---|
|
Key property to access data in a given row. |
|
Required to have a proper search and filter feature as numbers are not searched like strings. |
|
Allows you to easily display or hide any column without completely removing its definition. |
|
Defines the column headings. |
|
Allows you to style tables by adding CSS properties in camelCase. For example, if you want to
specify the alignment of text in a table, use |
You can customize the rendering of tables using the following elements:
Description | |
---|---|
|
Displays row numbers. |
|
Reduces row height. |
|
Set |
|
Set |
There is a search and filtering feature available in tables. To search content in a table, click
the search icon . You can limit your search to a specific column by adding a prefix to your search as
follows: "column heading":"search"
, for example name:chevrolet
. To
search values ranging from x to x, use 10..20
. You can also search values greater
than x, for example 10..
, and values less than x, for example
..20
. For more information about table filtering, see Table search and filtering.
Charts widgets
There are two types of chart widgets: Vega Charts and Charts. Different types of charts are available when you open these Chart widget editors.
Vega Chart widget specifications
The Vega Chart widget uses Vega-Lite specifications to create different types of chart (bar
charts, point charts, etc.). If you leave spec
empty, a simple bar chart is
automatically generated with the first string column in x-axis and the first number in y-axis.
Vega-Lite enables data filtering and transformation. For example, strings can be transformed into dates.
To learn more about Vega-Lite, see Vega-Lite - A High-Level Visualization Grammar.
The following is an advanced example of a grouped bar chart based on a population data table. This example shows how to filter data and how to compute a virtual column:
{
"name": "Population Grouped Bar Chart",
"type": "Chart",
"props": {
"data": "population",
"spec": {
"transform": [
{
"filter": "datum.year == 2000"
},
{
"calculate": "datum.sex == 2 ? 'Female' : 'Male'",
"as": "gender"
}
],
"mark": "bar",
"encoding": {
"column": {
"field": "age",
"type": "ordinal"
},
"y": {
"aggregate": "sum",
"field": "people",
"type": "quantitative",
"axis": {
"title": "population",
"grid": false
}
},
"x": {
"field": "gender",
"type": "nominal",
"scale": {
"rangeStep": 12
},
"axis": {
"title": ""
}
},
"color": {
"field": "gender",
"type": "nominal",
"scale": {
"range": [
"#EA98D2",
"#659CCA"
]
}
}
},
"config": {
"facet": {
"cell": {
"strokeWidth": 0
}
},
"axis": {
"domainWidth": 1
}
}
}
}
}
Gantt chart widget
Gantt charts are automatically created to display the solution for scheduling problems created with the Modeling Assistant. You can, however, edit, create and configure Gantt charts for any data where it is meaningful, using the Gantt widget. Use the JSON editor for this, by clicking the pencil icon and selecting the JSON pane.
data
field value $cognitive-gantt
here dynamically enables the
Gantt widget to connect to the Modeling Assistant
solution. This dynamic loading can also imply that it might take a moment for the Gantt chart to
appear.
{
"name": "",
"type": "Gantt",
"props": {
"container": "",
"data": "$cognitive-gantt",
"spec": {},
"search": ""
}
}
resources
, activities
and
reservations
data, as
follows: "data": [
"resourcesTableName",
"activitiesTableName",
"reservationsTableName"
],
spec
section to define these tables, as follows. The
parent
fields are optional but all other fields are
mandatory. "resources": {
"data": "resourcesTableName",
"id": "id",
"parent": "parent",
"name": "name"
},
"activities": {
"data": "activitiesTableName",
"id": "id",
"name": "name",
"start": "start",
"end": "end",
"parent": "parent"
},
"reservations": {
"data": "reservationsTableName",
"activity": "activity",
"resource": "resource"
},
Another mandatory field that you must also define in the specification is the
dateFormat
so that all the common date formats can get converted into real
dates. Some common date formats are for example 'yyyy-MM-dd
', 'yyyy-MM-dd
HH:mm:ss
', and so on. You can also use 'S' for milliseconds for Epoch time, for example,
"dateFormat": "S"
. The dateFormat
must match the
"start"
and "end"
fields of the "activity"
table.
The error message No time window defined is displayed until you define the
activity
table, with start
and end
fields that
use the specified dateFormat
.
-
resourceQuantity allows you to configure the quantity column in the resources table to enable the Gantt chart to get the necessary information to populate a Load Resource Chart for you. You can set this as follows:
"resourceQuantity": "quantity"
- You can also set the type of Gantt chart that you need:
ActivityChart
orScheduleChart
. You can set this as follows:"type": "ActivityChart",
. You can also omit this and the default taken will beScheduleChart
. If you choose to have anActivityChart
, you must provide more information concerning the constraints table name and the mapping for this table:"constraints": { "data": "constraintsTableName", "from": "from", "to": "to", "type": "type" },
The "from' and "to" values are the column names in your constraints table that define the order of precedence of tasks. The type values here correspond to the gantt-chart library values 0 to 3:
For example, if your "to" task starts after the end of your "from" task select 1 as the type value.START_TO_START: 0, START_TO_END: 2, END_TO_END: 3, END_TO_START: 1,
ScheduleChart
example{
"name": "",
"type": "Gantt",
"props": {
"container": "",
"data": [
"resources",
"activities",
"reservations"
],
"spec": {
"resources": {
"data": "resources",
"id": "id",
"parent": "parent",
"name": "name"
},
"activities": {
"data": "activities",
"id": "id",
"name": "name",
"start": "start",
"end": "end",
"parent": "parent"
},
"reservations": {
"data": "reservations",
"activity": "activity",
"resource": "resource"
},
"dateFormat": "S",
"resourceQuantity": "quantity"
},
"search": ""
}
}
ActivityChart
example{
"name": "",
"type": "Gantt",
"props": {
"container": "",
"data": [
"resources",
"activities",
"reservations",
"constraints"
],
"spec": {
"type": "ActivityChart",
"resources": {
"data": "resources",
"id": "id",
"parent": "parent",
"name": "name"
},
"activities": {
"data": "activities",
"id": "id",
"name": "name",
"start": "start",
"end": "end",
"parent": "parent"
},
"constraints": {
"data": "constraints",
"from": "from",
"to": "to",
"type": "type"
},
"reservations": {
"data": "reservations",
"activity": "activity",
"resource": "resource"
},
"dateFormat": "S",
"resourceQuantity": "quantity"
},
"search": ""
}
}
The error message No time window defined is displayed until you define the
activity
table, with start
and end
fields that
use the specified dateFormat
.