Update multiple data sources and add TSVB and Vega viz types

_dashboards/management/multi-data-sources.md

@@ -203,14 +203,15 @@ When the data source feature is enabled, you can navigate to **Search Relevance*
 
 After configuring multiple data sources, you can analyze the data from each source. Refer to the following resources for more information:
 
-- Learn about [managing index patterns]({{site.url}}{{site.baseurl}}/dashboards/management/index-patterns/) through OpenSearch Dashboards.
-- Learn about [indexing data using Index Management]({{site.url}}{{site.baseurl}}/dashboards/im-dashboards/index/) through OpenSearch Dashboards.
-- Learn about how to [connect OpenSearch and Amazon S3 through OpenSearch Dashboards]({{site.url}}{{site.baseurl}}/dashboards/management/S3-data-source/).
-- Learn about the [Integrations tool]({{site.url}}{{site.baseurl}}/integrations/index/), which gives you the flexibility to use various data ingestion methods and connect data from the Dashboards UI.
+- [Managing index patterns]({{site.url}}{{site.baseurl}}/dashboards/management/index-patterns/) through OpenSearch Dashboards.
+- [Indexing data using Index Management]({{site.url}}{{site.baseurl}}/dashboards/im-dashboards/index/) through OpenSearch Dashboards.
+- [Connect OpenSearch and Amazon S3 through OpenSearch Dashboards]({{site.url}}{{site.baseurl}}/dashboards/management/S3-data-source/).
+- [Integrations tool]({{site.url}}{{site.baseurl}}/integrations/index/), which gives you the flexibility to use various data ingestion methods and connect data from the OpenSearch Dashboards UI.
+- Creating [Vega]({{site.url}}{{site.baseurl}}/dashboards/visualize/vega/) and [TSVB]({{site.url}}{{site.baseurl}}/dashboards/visualize/tsvb/) visualizations.
 
 ## Limitations
 
 The following features are not supported when using multiple data sources:
 
 * Timeline visualization types
-* Some external plugins, such as the `gantt-chart` plugin
+* Certain external plugins, such as the `gantt-chart` plugin

_dashboards/visualize/area.md

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Using area charts
+title: Area charts
 parent: Building data visualizations
 nav_order: 5
 ---

_dashboards/visualize/gantt.md

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Using Gantt charts
+title: Gantt charts
 parent: Building data visualizations
 nav_order: 30
 redirect_from:
@@ -18,7 +18,7 @@ To create a Gantt chart, perform the following steps:
 1. In the visualizations menu, choose **Create visualization** and **Gantt Chart**.
 1. Choose a source for the chart (e.g. some log data).
 1. Under **Metrics**, choose **Event**. For log data, each log is an event.
-1. Select the **Start Time** and **Duration** fields from your data set. The start time is the timestamp for the beginning of an event. The duration is the amount of time to add to the start time.
+1. Select the **Start Time** and **Duration** fields from your dataset. The start time is the timestamp for the beginning of an event. The duration is the amount of time to add to the start time.
 1. Under **Results**, choose the number of events to display on the chart. Gantt charts sequence events from earliest to latest based on start time.
 1. Choose **Panel settings** to adjust axis labels, time format, and colors.
 1. Choose **Update**.

_dashboards/visualize/geojson-regionmaps.md

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Using coordinate and region maps
+title: Coordinate and region maps
 parent: Building data visualizations
 has_children: true
 nav_order: 15
@@ -12,7 +12,7 @@ redirect_from:
 
 OpenSearch has a standard set of GeoJSON files that provide a vector map with each region map. OpenSearch Dashboards also provides basic map tiles with a standard vector map to create region maps. You can configure the base map tiles using [Web Map Service (WMS)](https://www.ogc.org/standards/wms). For more information, see [Configuring WMS in OpenSearch Dashboards]({{site.url}}{{site.baseurl}}/dashboards/maptiles/). 
 
-For air gapped environments, OpenSearch Dashboards provides a self-host maps server. For more information, see [Using the self-host maps server]({{site.url}}{{site.baseurl}}/dashboards/selfhost-maps-server/)
+For air-gapped environments, OpenSearch Dashboards provides a self-host maps server. For more information, see [Using the self-host maps server]({{site.url}}{{site.baseurl}}/dashboards/selfhost-maps-server/)
 
 While you can't configure a server to support user-defined vector map layers, you can configure your own GeoJSON file and upload it for this purpose. 
 {: .note}
@@ -35,7 +35,7 @@ You can use [geojson.io](https://geojson.io/#map=2/20.0/0.0) to extract GeoJSON
 
 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.
 
-1. Prepare a JSON file to upload. Make sure the file has either a .geojson or .json extension.
+1. Prepare a JSON file to upload. Make sure the file has either a `.geojson` or `.json` extension.
 1. On the top menu bar, go to **OpenSearch Dashboards > Visualize**.
 1. Select the **Create Visualization** button.
 1. Select **Region Map**.

_dashboards/visualize/maps-stats-api.md

@@ -3,7 +3,7 @@ layout: default
 title: Maps Stats API
 nav_order: 20
 grand_parent: Building data visualizations
-parent: Using coordinate and region maps 
+parent: Coordinate and region maps 
 has_children: false
 ---
 

_dashboards/visualize/maps.md

@@ -2,7 +2,7 @@
 layout: default
 title: Using maps 
 grand_parent: Building data visualizations
-parent: Using coordinate and region maps
+parent: Coordinate and region maps
 nav_order: 10
 redirect_from:
   - /dashboards/maps/

_dashboards/visualize/maptiles.md

@@ -2,7 +2,7 @@
 layout: default
 title: Configuring a Web Map Service (WMS)
 grand_parent: Building data visualizations
-parent: Using coordinate and region maps
+parent: Coordinate and region maps
 nav_order: 30
 redirect_from:
   - /dashboards/maptiles/

_dashboards/visualize/selfhost-maps-server.md

@@ -1,14 +1,14 @@
 ---
 layout: default
-title: Using the self-host maps server
+title: Using self-host maps servers
 grand_parent: Building data visualizations
-parent: Using coordinate and region maps
+parent: Coordinate and region maps
 nav_order: 40
 redirect_from:
   - /dashboards/selfhost-maps-server/
 ---
 
-# Using the self-host maps server
+# Using self-host maps servers
 
 The self-host maps server for OpenSearch Dashboards allows users to access the default maps service in air-gapped environments. OpenSearch-compatible map URLs include a map manifest with map tiles and vectors, the map tiles, and the map vectors.
 

_dashboards/visualize/tsvb.md

@@ -0,0 +1,69 @@
+---
+layout: default
+title: TSVB
+parent: Building data visualizations
+nav_order: 45
+---
+
+# TSVB
+
+The Time-Series Visual Builder (TSVB) is a powerful data visualization tool in OpenSearch Dashboards that allows you to create detailed time-series visualizations. One of its key features is the ability to add annotations or markers at specific time points based on index data. This feature is particularly useful for making connections between multiple indexes and building visualizations that display data over time, such as flight status, delays by type, and more. TSVB currently supports the following visualization types: Area, Line, Metric, Gauge, Markdown, and Data Table.
+
+## Creating TSVB visualizations from multiple data sources
+Introduced 2.14
+{: .label .label-purple }
+
+Before proceeding, ensure that the following configurations are enabled. These can be found in `config/opensearch_dasboards.yaml`:
+
+```yaml
+data_source.enabled: true
+vis_type_timeseries.enabled: true
+```
+{% include copy-curl.html %}
+
+**Step 1: Connect data sources**
+
+Once you have configured your YAML file, open OpenSearch Dashboards and follow these steps:
+
+1. From the **Home** page, select **Add sample data** and then select the **Add data** button for the **Sample web logs** dataset, as shown in the following GIF.
+
+  <img src="{{site.url}}{{site.baseurl}}/images/dashboards/tsvb.png" alt="TSVB pop-up screen" width="700"/>
+
+2. Select **Dashboards Management** from the main menu.
+3. Select **Data sources** from the left-side menu and then select the **Create data source** button.
+4. From the **Create data source** page, enter the connection details and endpoint URL, as shown in the following GIF:
+
+  ![Configuring and connecting data sources]({{site.url}}{{site.baseurl}}/images/dashboards/Add_datasource.gif)
+
+**Step 2: Specify data sources**
+
+TSVB uses your default index pattern to initialize the visualization. To change the index pattern or configure settings, follow these steps:
+
+1. From the **Create** window, select **Panel options**.
+2. Select the OpenSearch cluster from which to pull data from the **Data source** dropdown menu. In this case, choose `Source A`.
+3. Enter `opensearch_dashboards_sample_data_logs` in the **Index name** field.
+4. Select `@timestamp` from the **Time field** dropdown menu. This setting specifies the time range for rendering the visualization.
+
+The following GIF shows these steps. 
+
+  ![Specifying data sources demo]({{site.url}}{{site.baseurl}}/images/dashboards/make_tsvb.gif)
+
+The following image shows the TSVB visualization.
+
+  <img src="{{site.url}}{{site.baseurl}}/images/dashboards/tsvb-viz.png" alt="TSVB visualization" width="700"/>
+
+**(Optional) Step 3: Add annotations**
+
+Annotations are markers that can be added to time-series visualizations. Follow these steps to add annotations:
+
+1. On the upper-left of the page, select **Time Series**.
+2. Select the **Annotations** tab and then **Add data source**.
+3. In the **Index** name field, specify the appropriate index. In this case, continue using the same index from the previous steps, that is, `opensearch_dashboards_sample_data_logs`.
+4. From **Time** field, select `@timestamp`.
+5. In **Fields**, enter timestamp.
+6. In **Row** template, enter timestamp.
+
+The automatically updates to display your annotations, as shown in the following image.
+
+  <img src="{{site.url}}{{site.baseurl}}images/dashboards/tsvb-with-annotations.png" alt="TSVB visualization with annotations" width="700"/>
+

_dashboards/visualize/vega.md

@@ -1,13 +1,15 @@
 ---
 layout: default
-title: Using Vega
+title: Vega
 parent: Building data visualizations
-nav_order: 45
+nav_order: 50
 ---
 
-# Using Vega
+# Vega
 
-[Vega](https://vega.github.io/vega/) and [Vega-Lite](https://vega.github.io/vega-lite/) are open-source, declarative language visualization tools that you can use to create custom data visualizations with your OpenSearch data and [Vega Data](https://vega.github.io/vega/docs/data/). These tools are ideal for advanced users comfortable with writing OpenSearch queries directly. Enable the `vis_type_vega` plugin in your `opensearch_dashboards.yml` file to write your [Vega specifications](https://vega.github.io/vega/docs/specification/) in either JSON or [HJSON](https://hjson.github.io/) format or to specify one or more OpenSearch queries within your Vega specification. By default, the plugin is set to `true`. The configuration is shown in the following example. For configuration details, refer to the `vis_type_vega` [README](https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/vis_type_vega/README.md).
+[Vega](https://vega.github.io/vega/) and [Vega-Lite](https://vega.github.io/vega-lite/) are open-source, declarative language visualization tools that you can use to create custom data visualizations with your OpenSearch data and [Vega Data](https://vega.github.io/vega/docs/data/). These tools are ideal for advanced users comfortable with writing OpenSearch queries directly. Enable the `vis_type_vega` plugin in your `opensearch_dashboards.yml` file to write your [Vega specifications](https://vega.github.io/vega/docs/specification/) in either JSON or [HJSON](https://hjson.github.io/) format or to specify one or more OpenSearch queries within your Vega specification. By default, the plugin is set to `true`. 
+
+Enable the following configuration to use Vega visualizations in OpenSearch Dashboards. For configuration details, refer to the `vis_type_vega` [README](https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/vis_type_vega/README.md).
 
 ```
 vis_type_vega.enabled: true
@@ -17,13 +19,15 @@
 
 <img src="{{site.url}}{{site.baseurl}}/images/dashboards/vega-2.png" alt="Map created using Vega visualization in OpenSearch Dashboards">
 
-## Querying from multiple data sources
+## Visualizing data from multiple data sources
+Introduced 2.13
+{: .label .label-purple }
 
 If you have configured [multiple data sources]({{site.url}}{{site.baseurl}}/dashboards/management/multi-data-sources/) in OpenSearch Dashboards, you can use Vega to query those data sources. Within your Vega specification, add the `data_source_name` field under the `url` property to target a specific data source by name. By default, queries use data from the local cluster. You can assign individual `data_source_name` values to each OpenSearch query within your Vega specification. This allows you to query multiple indexes across different data sources in a single visualization.
 
 The following is an example Vega specification with `Demo US Cluster` as the specified `data_source_name`:
 
-```
+```json
 {
   $schema: https://vega.github.io/schema/vega/v5.json
   config: {
@@ -190,3 +194,122 @@
 }
 ```
 {% include copy-curl.html %}
+
+## Creating Vega visualizations with OpenSearch Dashboards
+
+Before proceeding, ensure that the following configuration is enabled in your `opensearch_dashboards.yml` file:
+
+```yml
+vis_type_vega.enabled: true
+```
+
+### Step 1: Set up and connect data sources
+
+Open OpenSearch Dashboards and follow these steps:
+
+1. From the **Home** page, select **Add sample data**. For this tutorial, select **Sample web logs**.
+2. From the left-side menu, navigate to **Dashboards Management** and select **Data sources**. 
+3. Select **Create data source connection** and then add your data source.
+4. From the **Data source** dropdown menu, select the data source you created.
+
+### Step 2: Create the visualization
+
+1. From the left-side menu, select **Visualize**.
+2. From the **Visualizations** page, select **Create Visualization** and then select **Vega** from the pop-up window, as shown in the following images.
+
+    <img src="{{site.url}}{{site.baseurl}}/images/vega.png" alt="Visualizations selection menu" width="700">
+
+### Step 3: Add the Vega specification
+
+1. Verify that the data source you created is specified under `data_source_name`.
+2. Copy the following Vega specification.
+
+```json
+{
+  $schema: https://vega.github.io/schema/vega-lite/v5.json
+  data: {
+    url: {
+      %context%: true
+      %timefield%: @timestamp
+      index: opensearch_dashboards_sample_data_logs
+      data_source_name: YOUR_DATA_SOURCE_TITLE
+      body: {
+        aggs: {
+          1: {
+            date_histogram: {
+              field: @timestamp
+              fixed_interval: 3h
+              time_zone: America/Los_Angeles
+              min_doc_count: 1
+            }
+            aggs: {
+              2: {
+                avg: {
+                  field: bytes
+                }
+              }
+            }
+          }
+        }
+        size: 0
+      }
+    }
+    format: {
+      property: aggregations.1.buckets
+    }
+  }
+  transform: [
+    {
+      calculate: datum.key
+      as: timestamp
+    }
+    {
+      calculate: datum[2].value
+      as: bytes
+    }
+  ]
+  layer: [
+    {
+      mark: {
+        type: line
+      }
+    }
+    {
+      mark: {
+        type: circle
+        tooltip: true
+      }
+    }
+  ]
+  encoding: {
+    x: {
+      field: timestamp
+      type: temporal
+      axis: {
+        title: @timestamp
+      }
+    }
+    y: {
+      field: bytes
+      type: quantitative
+      axis: {
+        title: Average bytes
+      }
+    }
+    color: {
+      datum: Average bytes
+      type: nominal
+    }
+  }
+}
+```
+
+3. Select the **Update** button in the lower-right corner to visualize your data, as shown in the following GIF.
+
+    <img src="{{site.url}}{{site.baseurl}}images/make_vega.gif" alt="Visualizations selection menu">
+
+## Resources
+
+The following resources provide additional information about Vega visualizations in OpenSearch Dashboards:
+
+- [Improving ease of use in OpenSearch Dashboards with Vega visualizations](https://opensearch.org/blog/Improving-Dashboards-usability-with-Vega/)

_dashboards/visualize/visbuilder.md

@@ -1,13 +1,13 @@
 ---
 layout: default
-title: Using VisBuilder
+title: VisBuilder
 parent: Building data visualizations
 nav_order: 100
 redirect_from:
   - /dashboards/drag-drop-wizard/
 ---
 
-# Using VisBuilder
+# VisBuilder
 
 VisBuilder is an experimental feature and shouldn't be used in a production environment. For updates on its progress, or if you want to leave feedback that helps improve the feature, see the [GitHub issue](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2280).
 {: .warning}
@@ -22,7 +22,7 @@ You can use the VisBuilder visualization type in OpenSearch Dashboards to create
 
 ## Try VisBuilder in the OpenSearch Dashboards playground
 
-If you'd like to try out VisBuilder without installing OpenSearch locally, you can do so in the [Dashboards playground](https://playground.opensearch.org/app/vis-builder#/). VisBuilder is enabled by default.
+If you'd like to try out VisBuilder without installing OpenSearch locally, you can do so in the [OpenSearch Dashboards playground](https://playground.opensearch.org/app/vis-builder#/). VisBuilder is enabled by default.
 
 ## Try VisBuilder locally