[DOC] Resizes and reformats images (#2825)

* Resize and reformat images

Signed-off-by: vagimeli <vagimeli@amazon.com>

---------

Signed-off-by: vagimeli <vagimeli@amazon.com>

_dashboards/maps-plugin.md

@@ -6,7 +6,7 @@ redirect_from:
   - /dashboards/maps/
 ---
 
-# Maps
+# Using the Maps plugin
 
 With OpenSearch Dashboards, you can create maps to visualize your geographical data. OpenSearch lets you construct map visualizations with multiple layers, combining data across different indexes. You can build each layer from a different index pattern. Additionally, you can configure maps to show specific data at different zoom levels. OpenSearch maps are powered by the OpenSearch maps service, which uses vector tiles to render maps. 
 

_dashboards/visualize/area.md

@@ -9,7 +9,7 @@ nav_order: 5
 
 An area chart is a line chart with the area between the line and the axis shaded with a color, and is a primary visualization type used to display time series data. You can create area charts in Dashboards using the Area visualization type or using the Time Series Visual Builder (TSVB), Vega, or VisBuilder visualization tools. For this tutorial, you'll use the Area visualization type.
 
-![Demonstration of the area chart tutorial steps]({{site.url}}{{site.baseurl}}/images/area-tutorial.gif)
+![Demonstration of the area chart tutorial steps]({{site.url}}{{site.baseurl}}/images/dashboards/area-tutorial.gif)
 
 # Try it: Create a simple aggregation-based area chart
 

_dashboards/visualize/geojson-regionmaps.md

@@ -30,6 +30,7 @@ You can use [geojson.io](https://geojson.io/#map=2/20.0/0.0) to extract GeoJSON
 >   * OpenSearch Dashboards Maps [`dashboards-maps`](https://github.com/opensearch-project/dashboards-maps) front-end plugin
 >   * OpenSearch [`geospatial`](https://github.com/opensearch-project/geospatial) backend plugin
 {: .note}
+
 ### Step 1: Creating a region map visualization
 
 To create your own custom vector map, upload a JSON file that contains GEO data for your customized regional maps. The JSON file contains vector layers for visualization.
@@ -40,10 +41,13 @@ To create your own custom vector map, upload a JSON file that contains GEO data
 1. Select **Region Map**.
 1. Choose a source. For example, **[Flights] Flight Log**.
 1. In the right panel, select **Import Vector Map**.
-1. In **Upload map**, select or drag and drop your JSON file.
-Enter **Map name prefix** (for example, `usa-counties`). Your map will have the prefix that you defined followed by the `-map` suffix (for example, `usa-counties-map`). <img src="{{site.url}}{{site.baseurl}}/images/import-geojson-file.png" alt="import a Geo .json file" width="340"/>
-1. Select the **Import file** button.
-Once the upload is successful, you will see a pop-up prompting you to refresh the map. Select the **Refresh** button. <img src="{{site.url}}{{site.baseurl}}/images/upload-success.png" alt="message upon a successful file upload" width="280"/>
+1. In **Upload map**, select or drag and drop your JSON file and then enter **Map name prefix** (for example, `usa-counties`). Your map will have the prefix that you defined followed by the `-map` suffix (for example, `usa-counties-map`), as shown in the following image: 
+
+   <img src="{{site.url}}{{site.baseurl}}/images/dashboards/import-geojson-file.png" alt="Importing a GeoJSON file" width="300"/>
+
+1. Select the **Import file** button and then select the **Refresh** button in the pop-up window confirming successful upload, as shown in the following image. 
+  
+  <img src="{{site.url}}{{site.baseurl}}/images/dashboards/upload-success.png" alt="Message confirming successful file upload" width="300"/>
 
 ### Step 2: Viewing the custom region map in OpenSearch Dashboards
 
@@ -51,10 +55,11 @@ After you upload a custom GeoJSON file, you need to set the vector map layer to
 
 1. From **Layer Options > Layer settings**, select **Custom vector map**.
 1. Under **Vector map**, select the name of the vector map that you just uploaded.
-2. Optional: Under **Style settings**, increase **Border thickness** to see the borders more clearly.
-3. Select the **Update** button.
-4. View your region map in the Dashboards. For example, the following image shows the Los Angeles and San Diego county regions:
-<img src="{{site.url}}{{site.baseurl}}/images/county-region-map.png" alt="view a custom GeoJSON region map" width="700"/>
+1. Optional: Under **Style settings**, increase **Border thickness** to see the borders more clearly.
+1. Select the **Update** button.
+1. View your region map in the Dashboards. For example, the following image shows the Los Angeles and San Diego county regions:
+
+  <img src="{{site.url}}{{site.baseurl}}/images/dashboards/county-region-map.png" alt="Custom GeoJSON region map" width="600"/>
 
 #### Example GeoJSON file
 

_dashboards/visualize/viz-index.md

@@ -5,133 +5,122 @@ nav_order: 40
 has_children: true
 ---
 
-# Visualize
+# Building data visualizations
 
 By visualizing your data, you translate complex, high-volume, or numerical data into a visual representation that is easier to process. OpenSearch Dashboards gives you data visualization tools to improve and automate the visual communication process. By using visual elements like charts, graphs, or maps to represent data, you can advance business intelligence and support data-driven decision-making and strategic planning.
 
-# Visualization types in OpenSearch Dashboards
+## Understanding the visualization types in OpenSearch Dashboards
 
 Dashboards has several visualization types to support your data analysis needs. The following sections provide an overview of the visualization types in Dashboards and their common use cases.
 
-## Area charts
+### Area charts
 
 Area charts depict changes over time, and they are commonly used to show trends. Area charts more efficiently identify patterns in log data, such as sales data for a time range and trends over that time. See [Using area charts]({{site.url}}{{site.baseurl}}/dashboards/visualize/area/) to learn more about how to create and use them in Dashboards.
 
- <img src="{{site.url}}{{site.baseurl}}/images/area-chart-1.png" alt="Example area chart in OpenSearch Dashboards" height="90%">
+ <img src="{{site.url}}{{site.baseurl}}/images/area-chart-1.png" width="600" height="600" alt="Example area chart in OpenSearch Dashboards">
 
-## Bar charts
+### Bar charts
 
-Bar charts, vertical or horizontal, compare categorical data and depict changes of a variable over a period of time. 
+Bar charts (vertical or horizontal) compare categorical data and depict changes of a variable over a period of time. 
 
-<table style="table-layout: fixed ; width: 100%;">
-<tbody>
-<tr style="text-align: center; vertical-align:center;">
-<td><img src="{{site.url}}{{site.baseurl}}/images/bar-chart-1.png" alt="Example vertical bar chart in OpenSearch Dashboards" height="100"></td>
-<td><img src="{{site.url}}{{site.baseurl}}/images/bar-horizontal-1.png" alt="Example horizontal bar chart in OpenSearch Dashboards" height="100"></td>
-</tr>
-<tr style="text-align: center; vertical-align:top; font-weight: bold; color: rgb(0,59,92)">
-<td>Vertical bar chart</td>
-<td>Horizontal bar chart</td>
-</tr>
-</tbody>
-</table>
+Vertical bar chart             |  Horizontal bar chart
+:-------------------------:|:-------------------------:
+<img src="{{site.url}}{{site.baseurl}}/images/dashboards/bar-chart-1.png" width="300" height="300" alt="Example vertical bar chart in OpenSearch Dashboards">  |  <img src="{{site.url}}{{site.baseurl}}/images/dashboards/bar-horizontal-1.png" width="300" height="300" alt="Example horizontal bar chart in OpenSearch Dashboards">
 
-## Controls
+### Controls
 
 Controls is a panel, instead of a visualization type, added to a dashboard to filter data. Controls gives users the capability to add interactive inputs to a dashboard. You can create two types of controls in Dashboards: **Options list** and **Range slider**. **Options list** is a dropdown options list that allows filtering of data by a terms aggregation, such as `machine.os.keyword`. **Range slider** allows filtering within specified value ranges, such as `hour_of_day`.  
 
-<img src="{{site.url}}{{site.baseurl}}/images/controls-1.png" alt="Example visualization using controls to filter data in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/controls-1.png" width="600" height="600" alt="Example visualization using controls to filter data in OpenSearch Dashboards">
 
-## Data tables
+### Data tables
 
 Data tables, or tables, show your raw data in tabular form. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/data-table-1.png" alt="Example data table in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/data-table-1.png" width="600" height="600" alt="Example data table in OpenSearch Dashboards">
 
-## Gantt charts
+### Gantt charts
 
 Gantt charts show the start, end, and duration of unique events in a sequence. Gantt charts are useful in trace analytics, telemetry, and anomaly detection use cases where you want to understand interactions and dependencies between various events in a schedule. **Gantt chart** is currently a plugin, instead of built-in, visualization type in Dashboards. See [Gantt charts]({{site.url}}{{site.baseurl}}/dashboards/visualize/gantt/) to learn how to create and use them in Dashboards.
 
-<img src="{{site.url}}{{site.baseurl}}/images/gantt-chart.png" alt="Example Gantt chart in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/gantt-chart.png" width="600" height="600" alt="Example Gantt chart in OpenSearch Dashboards">
 
-## Gauge charts
+### Gauge charts
 
 Gauge charts look similar to an analog speedometer that reads left to right from zero. They display how much there is of the thing you are measuring, and this measurement can exist alone or in relation to another measurement, such as tracking performance against benchmarks or goals. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/gauge-1.png" alt="Example gauge chart in OpenSearch Dashboards" width="90%">
+<img src="{{site.url}}{{site.baseurl}}/images/gauge-1.png" width="400" height="400" alt="Example gauge chart in OpenSearch Dashboards">
 
-## Heat maps
+### Heat maps
 
 A heat map is a view of a histogram (a graphical representation of the distribution of numerical data) over time. Instead of using bar height as a representation of frequency, as with a histogram, heat maps display data in a tabular form using colors to differentiate where values fall in a range. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/heat-map-1.png" alt="Example heat map in OpenSearch Dashboards" height="65">
+<img src="{{site.url}}{{site.baseurl}}/images/heat-map-1.png" width="600" height="600" alt="Example heat map in OpenSearch Dashboards">
 
-## Line charts
+### Line charts
 
 Line charts compare changes in measured values over a period of time, such as gross sales by month or gross sales and net sales by month. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/line-1.png" alt="Example line graph in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/line-1.png" width="600" height="600" alt="Example line graph in OpenSearch Dashboards">
 
-## Maps
+### Maps
 
-You can create two types of maps in Dashboards: Coordinate maps and Region maps. Coordinate maps show the difference between data values for each location by size. Region maps show the difference between data values for each location by varying shades of color.
+You can create two types of maps in Dashboards: Coordinate maps and Region maps. Coordinate maps show the difference between data values for each location by size. Region maps show the difference between data values for each location by varying shades of color. See [Using the Maps plugin]({{site.url}}{{site.baseurl}}/dashboards/maps-plugin/) to learn more about maps capabilities in Dashboards.
 
-### Coordinate maps
+#### Coordinate maps
 
 Coordinate maps show location-based data on a map. Use coordinate maps to visualize GPS data (latitude and longitude coordinates) on a map. For information about OpenSearch-supported coordinate field types, see [Geographic field types]({{site.url}}{{site.baseurl}}/opensearch/supported-field-types/geo-shape/) and [Cartesian field types]({{site.url}}{{site.baseurl}}/opensearch/supported-field-types/xy/).
 
-### Region maps
+#### Region maps
 
-Region maps show patterns and trends across geographic locations. A region map is one of the basemaps in Dashboards. For information about creating custom vector maps in Dashboards, see [Region map visualizations]({{site.url}}{{site.baseurl}}/dashboards/geojson-regionmaps/).
+Region maps show patterns and trends across geographic locations. A region map is one of the basemaps in Dashboards. For information about creating custom vector maps in Dashboards, see [Using coordinate and region maps]({{site.url}}{{site.baseurl}}/dashboards/visualize/geojson-regionmaps/) to learn how to create and use maps in Dashboards.
 
-See [Maps]({{site.url}}{{site.baseurl}}/dashboards/visualize/maps/) to learn how to create and use them in Dashboards. 
+<img src="{{site.url}}{{site.baseurl}}/images/map-1.png" width="600" height="600" alt="Example coordinate map in OpenSearch Dashboards">
 
-<img src="{{site.url}}{{site.baseurl}}/images/map-1.png" alt="Example coordinate map in OpenSearch Dashboards" height="100">
-
-## Markdown
+### Markdown
 
 Markdown is a the markup language used in Dashboards to provide context to your data visualizations. Using Markdown, you can display information and instructions along with the visualization. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/markdown-1.png" alt="Example coordinate map in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/dashboards/markdown.png" width="600" height="600" alt="Example coordinate map in OpenSearch Dashboards">
 
-## Metric values
+### Metric values
 
 Metric values, or number charts, compare values in different measures. For example, you can create a metrics visualization to compare two values, such as actual sales compared to sales goals. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/metric-chart-1.png" alt="Example metric chart in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/metric-chart-1.png" width="400" height="400" alt="Example metric chart in OpenSearch Dashboards">
 
-## Pie charts
+### Pie charts
 
 Pie charts compare values for items in a dimension, such as a percentage of a total amount. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/pie-1.png" alt="Example pie chart in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/pie-1.png" width="600" height="600" alt="Example pie chart in OpenSearch Dashboards">
 
-## TSVB
+### TSVB
 
 The time-series visual builder (TSVB) is a data visualization tool in Dashboards used to create detailed time-series visualizations. For example, you can use TSVB to build visualizations that show data over time, such as flights by status over time or flight delays by delay type over time. Currently, TSVB can be used to create the following Dashboards visualization types: Area, Line, Metric, Gauge, Markdown, and Data Table. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/TSVB-1.png" alt="Example TSVB in OpenSearch Dashboards" height=100>
+<img src="{{site.url}}{{site.baseurl}}/images/TSVB-1.png" width="600" height="600" alt="Example TSVB in OpenSearch Dashboards">
 
-## Tag cloud
+### Tag cloud
 
 Tag (or word) clouds are a way to display how often a word is used in relation to other words in a dataset. The best use for this type of visual is to show word or phrase frequency. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/word-cloud-1.png" alt="Example Tag cloud in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/word-cloud-1.png" width="600" height="600" alt="Example Tag cloud in OpenSearch Dashboards">
 
-## Timeline
+### Timeline
 
 Timeline is a data visualization tool in Dashboards that you can use to create time-series visualizations. Currently, Timeline can be used to create the following Dashboards visualization types: Area and Line. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/timeline-1.png" alt="Example Timeline in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/timeline-1.png" width="600" height="600" alt="Example Timeline in OpenSearch Dashboards">
 
 ## VisBuilder
 
 VisBuilder is a drag-and-drop data visualization tool in Dashboards. It gives you an immediate view of your data without the need to preselect the data source or visualization type output. Currently, VisBuilder can be used to create the following Dashboards visualization types: Area, Bar, Line, Metric, and Data Table. See [VisBuilder]({{site.url}}{{site.baseurl}}/dashboards/visualize/visbuilder/) to learn how to create and use drag-and-drop visualizations in Dashboards.
 
-<img src="{{site.url}}{{site.baseurl}}/images/drag-drop-generated-viz.png" alt="Example Timeline in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/dashboards/vis-builder-2.png" width="600" height="600" alt="Example VisBuilder in OpenSearch Dashboards">
 
 ## Vega
 
 [Vega](https://vega.github.io/vega/) and [Vega-Lite](https://vega.github.io/vega-lite/) are open-source, declarative language visualization grammars for creating, sharing, and saving interactive data visualizations. Vega visualizations give you the flexibility to visualize multidimensional data using a layered approach in order to build and manipulate visualizations in a structured manner. Vega can be used to create customized visualizations using any Dashboards visualization type.
 
-<img src="{{site.url}}{{site.baseurl}}/images/vega-1.png" alt="Example Vega visualization with JSON specification in OpenSearch Dashboards" height="100">
+<img src="{{site.url}}{{site.baseurl}}/images/vega-1.png" width="600" height="600" alt="Example Vega visualization with JSON specification in OpenSearch Dashboards">