[v11.0.x] docs: update heatmap visualization and add play links (#86514)

docs: update heatmap visualization and add play links (#85926)

* docs: update heatmap visualization

* docs: add state timeline and status history play shortcodes

* Apply suggestions from code review

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

* docs: add heatmap video

---------

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
(cherry picked from commit 8373fc3544)

Co-authored-by: Marie Cruz <mdcruz@users.noreply.github.com>

docs/sources/panels-visualizations/visualizations/heatmap/index.md

@@ -19,14 +19,52 @@ weight: 100
 
 # Heatmap
 
-Heatmaps allow you to view histograms over time. For more information about histograms, refer to [Introduction to histograms and heatmaps][].
+Heatmaps allow you to view [histograms](https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/histogram/) over time. While histograms display the data distribution that falls in a specific value range, heatmaps allow you to identify patterns in the histogram data distribution over time. For more information about heatmaps, refer to [Introduction to histograms and heatmaps](https://grafana.com/docs/grafana/latest/fundamentals/intro-histograms/).
 
-![A heatmap visualization](/static/img/docs/v43/heatmap_panel_cover.jpg)
+For example, if you want to understand the temperature changes for the past few years, you can use a heatmap visualization to identify trends in your data:
 
-## Calculate from data
+{{< figure src="/static/img/docs/heatmap-panel/temperature_heatmap.png" max-width="1025px" alt="A heatmap visualization showing the random walk distribution over time" >}}
 
-This setting determines if the data is already a calculated heatmap (from the data source/transformer), or one that should be
-calculated in the panel.
+You can use a heatmap visualization if you need to:
+
+- Visualize a large density of your data distribution.
+- Condense large amounts of data through various color schemes that are easier to interpret.
+- Identify any outliers in your data distribution.
+- Provide statistical analysis to see how values or trends change over time.
+
+## Configure a heatmap visualization
+
+Once you’ve created a [dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/), the following video shows you how to configure a heatmap visualization:
+
+{{< youtube id="SGWBzQ54koE" >}}
+
+## Supported data formats
+
+Heatmaps support time series data.
+
+### Example
+
+The table below is a simplified output of random walk distribution over time:
+
+| Time                | Walking (km) |
+| ------------------- | ------------ |
+| 2023-06-25 21:13:09 | 10           |
+| 2023-08-25 21:13:10 | 8            |
+| 2023-08-30 21:13:10 | 10           |
+| 2023-10-08 21:13:11 | 12           |
+| 2023-12-25 21:13:11 | 14           |
+| 2024-01-05 21:13:12 | 13           |
+| 2024-02-22 21:13:13 | 10           |
+
+The data is converted as follows:
+
+{{< figure src="/static/img/docs/heatmap-panel/heatmap.png" max-width="1025px" alt="A heatmap visualization showing the random walk distribution over time" >}}
+
+## Heatmap options
+
+### Calculate from data
+
+This setting determines if the data is already a calculated heatmap (from the data source/transformer), or one that should be calculated in the panel.
 
 ### X Bucket
 

docs/sources/panels-visualizations/visualizations/histogram/index.md

@@ -25,7 +25,7 @@ Histograms calculate the distribution of values and present them as a bar chart.
 
 For example, if you want to understand the distribution of people's heights, you can use a histogram visualization to identify patterns or insights in the data distribution:
 
-{{< figure src="/static/img/docs/histogram-panel/histogram-example-v8-0.png" max-width="625px" alt="A histogram visualization showing the distribution of people's heights" >}}
+{{< figure src="/static/img/docs/histogram-panel/histogram-example-v8-0.png" max-width="1025px" alt="A histogram visualization showing the distribution of people's heights" >}}
 
 You can use a histogram visualization if you need to:
 
@@ -61,7 +61,7 @@ The following tables are examples of the type of data you need for a histogram v
 
 The data is converted as follows:
 
-{{< figure src="/static/img/docs/histogram-panel/histogram-example-time-series.png" max-width="1025px" alt="A histogram visualization showing the walk distribution from random people over time." >}}
+{{< figure src="/static/img/docs/histogram-panel/histogram-example-time-series.png" max-width="1025px" alt="A histogram visualization showing the random walk distribution." >}}
 
 #### Basic numerical table
 

docs/sources/panels-visualizations/visualizations/state-timeline/index.md

@@ -35,6 +35,8 @@ The state timeline visualization is useful when you need to monitor and analyze
 
 {{< youtube id="a9wZHM0mdxo" >}}
 
+{{< docs/play title="Grafana State Timeline & Status History" url="https://play.grafana.org/d/qD-rVv6Mz/6-state-timeline-and-status-history?orgId=1s" >}}
+
 ## Supported data formats
 
 The state timeline visualization works best if you have data capturing the various states of entities over time, formatted as a table. The data must include:

docs/sources/panels-visualizations/visualizations/status-history/index.md

@@ -41,6 +41,8 @@ Once you've [created a dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERS
 
 {{< youtube id="a9wZHM0mdxo" >}}
 
+{{< docs/play title="Grafana State Timeline & Status History" url="https://play.grafana.org/d/qD-rVv6Mz/6-state-timeline-and-status-history?orgId=1s" >}}
+
 ## Supported data formats
 
 The status history visualization works best if you have data capturing the various status of entities over time, formatted as a table. The data must include: