(DOCSP-4936): Create geospatial heatmap and scatter chart tutorials (#561)

* Create geospatial heatmap and scatter chart tutorials

* Fix build error - icon not found

* Add new screenshots

* copy review 1

Author: davidhou17

source/chart-type-reference/geospatial-heatmap.txt

@@ -12,8 +12,8 @@ Geospatial Heatmap
    :depth: 1
    :class: singlecol
 
-Geospatial heatmap charts are useful for displaying how
-geographical areas of a map compare to one another based on a given
+You can use geospatial heatmap charts to visualize how
+geographic areas of a map compare to one another based on a given
 criterion.
 
 .. note::
@@ -24,14 +24,6 @@ criterion.
    :ref:`filter <charts-filter-documents>`. Otherwise, your chart may
    use incomplete or misleading data.
 
-To create a geospatial heatmap chart:
-
-1. On the chart editing screen, select :guilabel:`Geospatial` from
-   the :guilabel:`Chart Type` dropdown menu.
-
-#. Select :guilabel:`Heatmap` from the three available geospatial
-   chart types.
-
 Geospatial Heatmap Encoding Channels
 ------------------------------------
 
@@ -127,6 +119,183 @@ field, which contains arrays of latitude-longitude pairs. The
 :guilabel:`Intensity` field uses the ``monthly_price`` database field,
 which contains monthly rental rates for each property in the database.
 
+Tutorials
+---------
+
+See the following tutorials to build geospatial heatmap charts:
+
+- :ref:`create-heatmap-chart-geojson`
+
+- :ref:`create-heatmap-chart-numeric`
+
+Prerequisites
+~~~~~~~~~~~~~
+
+The tutorials on this page use the ``sample_airbnb.listingsAndReviews`` 
+and ``sample_geospatial.shipwrecks`` collections. Before starting, 
+you must load the sample data on your cluster. To learn how to load 
+the sample data provided by |service| into your
+cluster, see :atlas:`Load Sample Data </sample-data/>`.
+
+.. _create-heatmap-chart-geojson:
+
+Create a Geospatial Heatmap Chart Using GeoJSON Points
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+This tutorial demonstrates how to create a geospatial heatmap chart 
+with fields that are :manual:`GeoJSON Points </reference/geojson/>`. 
+The final chart displays a heatmap of average AirBnB prices in New York.
+
+.. note::
+
+   |charts-short| automatically determines if field types in your collection 
+   are :manual:`GeoJSON Points </reference/geojson/>` by displaying 
+   the :icon-charts:`geoglobe` icon. You can map these fields directly 
+   to a geopoint channel type in the Chart Builder. For more information,
+   see :ref:`Geopoint Channel Type <geopoint-channel>`.
+
+.. procedure::
+   :style: normal
+
+   .. step:: Add a geospatial heatmap chart to your dashboard.
+      
+      a. From the :guilabel:`Dashboards` page, select the dashboard 
+         where you want to add a new chart. For instructions on setting 
+         up a dashboard, see :doc:`Dashboards </dashboards>`.
+
+      #. Click :guilabel:`Add Chart`.
+
+      #. In the :guilabel:`Select Data Source` modal, click the 
+         :guilabel:`Project` tab. 
+         
+      #. In the cluster where you loaded the 
+         sample data, select the ``listingsAndReviews`` collection 
+         in the ``sample_airbnb`` database.
+
+      #. In the :guilabel:`Chart Type` dropdown, click :guilabel:`Geo Heatmap`.
+
+      For more details, see :ref:`create-new-chart`.
+
+   .. step:: Add fields to your chart.
+
+      a. Select the :guilabel:`Encode` tab. 
+
+      #. Navigate to the :guilabel:`Fields` pane on the left side of the 
+         Chart Builder. This section lists all available fields in the 
+         ``listingsAndReviews`` collection.
+      
+      #. Drag the ``location`` geopoint field nested in the ``address``
+         field to the :guilabel:`Coordinates` encoding channel.
+
+      #. Drag the ``price`` field to the :guilabel:`Intensity` encoding 
+         channel. Then, in the :guilabel:`Aggregate` dropdown that appears, 
+         set the aggregation method to :guilabel:`mean`.
+
+         |charts-short| displays the aggregated mean prices of 
+         AirBnB listings across the world. The color gradient to the right
+         represents the range of prices in the heatmap. A more intense 
+         gradation reflects higher prices in the area.
+
+         .. note::
+
+            To customize colors, click the :guilabel:`Customize` tab.
+            Under :guilabel:`General`, enable the 
+            :guilabel:`Custom Color Palette` and set your preferred 
+            colors. For more information, see
+            :ref:`color-palette-customization`.
+
+   .. step:: Filter your results.
+
+      a. Select the :guilabel:`Filter` tab.
+
+      #. Drag the ``market`` field nested in the ``address`` field
+         to the :guilabel:`Filter` encoding channel.
+
+      #. To filter your results to include only AirBnBs in New York, 
+         click :guilabel:`Deselect All` and then select ``New York``.
+
+   .. step:: Save the chart to your dashboard.
+      
+      a. Optionally, :guilabel:`Enter a title`
+         or :guilabel:`Enter a description` for your chart.
+         
+      #. Click :guilabel:`Save and Close` 
+         at the upper right of the chart builder view.
+
+.. _create-heatmap-chart-numeric:
+
+Create a Geospatial Heatmap Chart Using Numeric or Numeric Array Fields
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+This tutorial demonstrates how to create a geospatial heatmap chart 
+with numeric or numeric array fields. The final chart displays a 
+heatmap of shipwrecks across the world.
+
+.. procedure::
+   :style: normal
+
+   .. step:: Add a geospatial heatmap chart to your dashboard.
+      
+      a. From the :guilabel:`Dashboards` page, select the dashboard 
+         where you want to add a new chart. For instructions on setting 
+         up a dashboard, see :doc:`Dashboards </dashboards>`.
+
+      #. Click :guilabel:`Add Chart`.
+
+      #. In the :guilabel:`Select Data Source` modal, click the 
+         :guilabel:`Project` tab. 
+         
+      #. In the cluster where you loaded the 
+         sample data, select the ``shipwrecks`` collection 
+         in the ``sample_geospatial`` database.
+
+      #. In the :guilabel:`Chart Type` dropdown, click :guilabel:`Geo Heatmap`.
+
+      For more details, see :ref:`create-new-chart`.
+
+   .. step:: Add fields to your chart.
+
+      a. Select the :guilabel:`Encode` tab. 
+
+      #. Navigate to the :guilabel:`Fields` pane on the left side of 
+         the Chart Builder. This section lists all available fields in
+         the ``shipwrecks`` collection.
+      
+      #. Drag the ``coordinates`` numeric array field to the 
+         :guilabel:`Coordinates` encoding channel. 
+      
+         .. note:: 
+            
+            Alternatively, you can specify the latitude and longitude
+            coordinates separately. First, drag the ``latdec`` numeric field 
+            to the :guilabel:`Coordinates` encoding channel. Once the 
+            :guilabel:`Longitude` channel appears, drag the ``londec`` 
+            numeric field to the corresponding channel.
+
+      #. Drag the ``_id`` field to the :guilabel:`Intensity` encoding channel.
+         The aggregation method is set to :guilabel:`count` by default.
+
+         |charts-short| displays the aggregated count of shipwrecks 
+         across the world. The color gradient to the right
+         represents the range of count values in the heatmap. A more intense 
+         gradation suggests that more shipwrecks have occured in the area.
+
+         .. note::
+
+            To customize colors, click the :guilabel:`Customize` tab.
+            Under :guilabel:`General`, enable the 
+            :guilabel:`Custom Color Palette` and set your preferred 
+            colors. For more information, see
+            :ref:`color-palette-customization`.
+
+   .. step:: Save the chart to your dashboard.
+      
+      a. Optionally, :guilabel:`Enter a title`
+         or :guilabel:`Enter a description` for your chart.
+         
+      #. Click :guilabel:`Save and Close` 
+         at the upper right of the chart builder view.
+
 Limitations
 -----------