# Visualization view #

With the  Decision Optimization experiment Visualization view, you can configure the graphical representation of input data and solutions for one or several scenarios\.

Quick links:

<!-- <ul> -->

 *  [Visualization view](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__section-dashboard)
 *  [Table search and filtering](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__section_tablefilter)
 *  [Visualization widgets syntax](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__section_widgetssyntax)
 *  [Visualization Editor](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__viseditor)
 *  [Visualization pages](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__vispages)

<!-- </ul> -->

The  Visualization view is common to all scenarios in a Decision Optimization  experiment\.

For example, the following image shows the default bar chart that appears in the solution tab for the example that is used in the tutorial [Solving and analyzing a model: the diet problem](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Notebooks/solveModel.html#task_mtg_n3q_m1b)\.

![Visualization panel showing solution in table and bar chart](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/images/Cloudvisualization.jpg)

The  Visualization view helps you compare different scenarios 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 as follows:

<!-- <ol> -->

1.  Click the chart widget and configure it by clicking the pencil icon\.
2.  In the Chart widget editor, 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\.
3.  In the Table field, select the  Solution data option and select  solution from the drop\-down list\.
4.  In the bar chart pane, 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\.
5.  Re\-edit the chart and select  @Scenario in the  Split by field of the Bar chart pane\. You then obtain both scenarios in the same bar chart:

<!-- </ol> -->

![Chart with two scenarios displayed in one chart\.](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/images/ChartVisu2Scen.png)\.

You can select many different types of charts in the Chart widget editor\.

Alternatively using the Vega Chart widget, you can similarly choose  Solution data>solution to display the same data, select value and name in both the x and y fields in the Chart section of the Vega Chart widget editor\. Then, in the Mark section, select @Scenario for the color field\. This selection gives you the following bar chart with the two scenarios on the same y\-axis, distinguished by different colors\.

![Vega chart showing 2 scenarios](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/images/VegaChart2Scen.jpg)\.

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:

![Vega charts showing 2 scenarios side by side\.](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/images/VegaChart2Scen2.jpg)

You can use many different types of charts that are 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 by using the JSON code\. A more advanced example of JSON code is provided in the [Vega Chart widget specifications](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__section_hdc_5mm_33b) section\.

The following widgets are available:

<!-- <ul> -->

 *  [**Notes widget**](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__section_edc_5mm_33b)
    
    Add simple text notes to the  Visualization view.
 *  [**Table widget**](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__section_fdc_5mm_33b)
    
    Present input data and solution in tables, with a search and filtering feature. See [Table search and filtering](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__section_tablefilter).
 *  **[Charts widgets](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__section_alh_lfn_l2b)**
    
    Present input data and solution in charts.
 *  [**Gantt chart widget**](https://dataplatform.cloud.ibm.com/docs/content/DO/DODS_Introduction/Visualization.html?context=cdpaas&locale=en#topic_visualization__section_idc_5mm_33b)
    
    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 that are modeled with the  Modeling Assistant. You can edit this Gantt chart or create and configure new Gantt charts for any problem even for those models that don't use the  Modeling Assistant.

<!-- </ul> -->

<!-- </article "role="article" "> -->