(DOCSP-20983) Updated the movie details tutorial as part of the Charts brand refresh (#596)

* (DOCSP-20983) refreshed the movie details tutorial

* (DOCSP-20983) fixed a small error

* (DOCSP-20983) fixed another small error

* (DOCSP-20983) addressed copy feedback

* (DOCSP-20983) addressed feedback

* (DOCSP-20983) addressed tech feedback

* (DOCSP-20983) addressed tech feedback

Author: carriecwk

source/images/charts/movie-tutorial-dashboard-final.png

@@ -2,19 +2,22 @@ title: Click :guilabel:`Add Chart`.
 ref: bar-chart-add-chart
 level: 4
 ---
+title: Select the ``sample_mflix.movies`` data source.
 ref: awards-wins-select-source
-inherit:
-  file: steps-source-select-data-source.yaml
-  ref: sample-mflix-movies-data-source
+level: 4
+content: |
+  In the :guilabel:`Select Data Source` modal that appears:
+  
+  a. Click the :guilabel:`Sample` tab.
+
+  #. Click :guilabel:`Select` on the ``Sample Data: Movies`` data source.
 ---
 title: Select the Chart Type.
 ref: click-stacked-column
 level: 4
 content: |
    a. In the :guilabel:`Chart Type` dropdown menu, select
-      :guilabel:`Column`.
-   b. Select the panel labeled :guilabel:`Stacked` below
-      the :guilabel:`Chart Type` dropdown menu.
+      :guilabel:`Stacked Column`.
 ---
 title: Add the desired fields to the proper encoding channels.
 ref: bar-chart-add-fields
@@ -67,7 +70,7 @@ content: |
      
   a. Toggle :guilabel:`Limit Results` to :guilabel:`On`.
   
-  #. Set :guilabel:`Show` to ``10``.
+  #. Set the value of the adjacent numeric field to ``10``.
 
 ---
 title: Group awards by genre.

source/images/charts/tutorial2-directors-with-most-awards.png

@@ -5,19 +5,23 @@ content: |
   The :guilabel:`Add Chart` button is in the top right corner of the
   dashboard.
 ---
+title: Select the ``sample_mflix.movies`` data source.
 ref: grid-chart-select-source
-inherit:
-  file: steps-source-select-data-source.yaml
-  ref: sample-mflix-movies-data-source
+level: 4
+content: |
+  In the :guilabel:`Select Data Source` modal that appears:
+  
+  a. Click the :guilabel:`Sample` tab.
+
+  #. Click :guilabel:`Select` on the ``Sample Data: Movies`` data source.
 ---
 title: Select the Chart Type.
 ref: click-grid
 level: 4
 content: |
 
    a. In the :guilabel:`Chart Type` dropdown, select
-      :guilabel:`Grid`.
-   #. Select the :guilabel:`Scatter` panel below the dropdown menu. 
+      :guilabel:`Scatter`.
 ---
 title: Add the desired fields to the proper encoding channels.
 ref: grid-chart-add-fields
@@ -63,6 +67,12 @@ content: |
      here because it has low cardinality; there are only four possible
      values (``G``, ``PG``, ``PG-13``, and ``R``). Fields with higher
      cardinality may make the chart too noisy to read.
+
+  a. (Optional) In the :guilabel:`Fields` section, drag the ``title`` 
+     field to the :guilabel:`Tooltip Detail` encoding channel. You can 
+     now hover over each marker on your chart to view the title of the 
+     movie it represents.
+
 ---
 title: Title your chart.
 ref: bar-chart-add-title

source/images/charts/tutorial2-most-awards-by-rating.png

@@ -20,5 +20,26 @@ content: |
 
   |service| begins loading your sample data. This operation takes
   approximately 5 minutes to complete.
+---
+title: View your sample data.
+ref: view-sample-data
+level: 4
+content: |
+  To view your sample data, click :guilabel:`Browse Collections`. The 
+  sample data set that now appears in your {+database-deployment+} includes
+  the follow databases:
+
+  - ``sample_airbnb``
+  - ``sample_analytics``
+  - ``sample_geospatial``
+  - ``sample_guides``
+  - ``sample_mflix``
+  - ``sample_restaurants``
+  - ``sample_supplies``
+  - ``sample_training``
+  - ``sample_weatherdata``
+
+  For details on the collections and documents included in these
+  datasets, see :ref:`available-sample-datasets`.
 
 ...

source/includes/steps-column-chart-award-wins.yaml

@@ -8,18 +8,28 @@ Create a New Dashboard
 
 *Estimated Time to Complete: 2 minutes*
 
+Prerequisites
+-------------
+
+To complete this tutorial you will need a
+`MongoDB Atlas <https://www.mongodb.com/cloud/atlas>`_ cluster. Refer
+to the :atlas:`Create a Cluster </create-new-cluster/>` documentation
+for instructions on creating an |service| cluster.
+
 Instructions
 ------------
 
-Now that you have created your data source and linked it to the
-order data collection, create a :doc:`dashboard </dashboards>`
-to hold your visualizations:
+Create a :doc:`dashboard </dashboards>` to hold your visualizations:
+
+1. To navigate to |charts|, click :guilabel:`Charts` in the navigation bar.
 
-1. In |charts|, click :guilabel:`Dashboards` in the sidebar.
+#. If the :guilabel:`Dashboards` page not already displayed, click 
+   :guilabel:`Project` under :guilabel:`Dashboards` in the sidebar.
 
-#. Click the :guilabel:`New Dashboard` button.
+#. Click :guilabel:`Add Dashboard`.
 
-#. Copy the following into the :guilabel:`Title` input:
+#. In the :guilabel:`Add Dashboard` dialog, copy the following into 
+   the :guilabel:`Title` input:
 
    .. code-block:: none
 

source/includes/steps-grid-chart-award-wins.yaml

@@ -14,7 +14,7 @@ Visualizing Movie Details
 
 .. |dataset| replace:: ``test.movieDetails``
 
-*Total Estimated Time to Complete: 20-30 minutes*
+*Total Estimated Time to Complete: 15-20 minutes*
 
 Introduction
 ------------
@@ -25,6 +25,138 @@ a :doc:`data source </data-sources>` containing the ``Mflix``
 This sample data contains information on movies such as release year,
 cast, and reviews.
 
+The following is a sample document from the dataset:
+
+.. code-block:: json
+
+   {
+     "_id": {
+       "$oid": "573a1391f29313caabcd9637"
+     },
+     "plot": "The ancient vampire Count Dracula arrives in 
+       England and begins to prey upon the virtuous young Mina.",
+     "genres": [
+       "Horror"
+     ],
+     "runtime": {
+       "$numberInt": "85"
+     },
+     "rated": "APPROVED",
+     "cast": [
+       "Bela Lugosi",
+       "Helen Chandler",
+       "David Manners",
+       "Dwight Frye"
+     ],
+     "num_mflix_comments": {
+      "$numberInt": "1"
+     },
+     "poster": "https://m.media-amazon.com/images/M/MV5BZDY2ODZhZWQtNDk0ZS00OGE4LWE4NjAtZjE5MTJhMjExMTRjXkEyXkFqcGdeQXVyNjc1NTYyMjg@._V1_SY1000_SX677_AL_.jpg",
+     "title": "Dracula",
+     "fullplot": "After a harrowing ride through the Carpathian mountains in eastern Europe, 
+       Renfield enters castle Dracula to finalize the transferral of Carfax Abbey in London to 
+       Count Dracula, who is in actuality a vampire. Renfield is drugged by the eerily hypnotic 
+       count, and turned into one of his thralls, protecting him during his sea voyage to London. 
+       After sucking the blood and turning the young Lucy Weston into a vampire, Dracula turns his
+       attention to her friend Mina Seward, daughter of Dr. Seward who then calls in a specialist, 
+       Dr. Van Helsing, to diagnose the sudden deterioration of Mina's health. Van Helsing, 
+       realizing that Dracula is indeed a vampire, tries to prepare Mina's fiance, John Harker, 
+       and Dr. Seward for what is to come and the measures that will have to be taken to prevent 
+       Mina from becoming one of the undead.",
+     "languages": [
+      "English",
+      "Hungarian",
+      "Latin"
+     ],
+     "released": {
+      "$date": {
+        "$numberLong": "-1226966400000"
+      }
+     },
+     "directors": [
+      "Tod Browning"
+     ],
+     "writers": [
+      "Bram Stoker (by)",
+      "Hamilton Deane (from the play adapted by)",
+      "John L. Balderston (from the play adapted by)",
+      "Garrett Fort (play)"
+     ],
+     "awards": {
+      "wins": {
+        "$numberInt": "2"
+      },
+      "nominations": {
+        "$numberInt": "1"
+      },
+      "text": {
+        "2 wins & 1 nomination."
+      }
+     },
+     "lastupdated": "2015-08-28 00:30:04.660000000",
+     "year": {
+      "$numberInt": "1931"
+     },
+     "imdb": {
+      "rating": {
+        "$numberDouble": "7.6"
+      },
+      "votes": {
+        "$numberInt": "30184"
+      },
+      "id": {
+        "$numberInt": "21814"
+      }
+     },
+     "countries": [
+      "USA"
+     ],
+     "type": "movie",
+     "tomatoes": {
+      "viewer": {
+        "rating": {
+          "$numberDouble": "3.7"
+        },
+        "numReviews": {
+          "$numberInt": "44035"
+        },
+        "meter": {
+          "$numberInt": "82"
+        }
+      },
+      "dvd": {
+        "$date": {
+          "$numberLong": "998956800000"
+        }
+      },
+      "critic": {
+        "rating": {
+          "$numberDouble": "7.9"
+        },
+        "numReviews": {
+          "$numberInt": "45"
+        },
+        "meter": {
+          "$numberInt": "91"
+        }
+      },
+      "lastUpdated": {
+        "$date": {
+          "$numberLong": "1442516384000"
+        }
+      },
+      "consensus": "Bela Lugosi's timeless portrayal of Dracula in this creepy and 
+        atmospheric 1931 film has set the standard for major vampiric roles since.",
+      "rotten": {
+        "$numberInt": "4"
+      },
+      "production": "Universal Pictures",
+      "fresh": {
+        "$numberInt": "41"
+      }
+     }
+   }
+
 With this tutorial, you will learn how to use filters to refine a large
 result set down to an easily understandable chart, and use multi-series
 charts to gain further insight into the data.
@@ -50,19 +182,17 @@ chart and a scatter chart.
 Table of Contents
 -----------------
 
-- Step 1: :doc:`/tutorial/movie-details/prereqs-and-import-data`
-- Step 2: :doc:`/tutorial/movie-details/create-dashboard`
-- Step 3: :doc:`/tutorial/movie-details/column-chart-director-awards`
-- Step 4: :doc:`/tutorial/movie-details/scatter-chart-movies-ratings`
-- Step 5: :doc:`/tutorial/movie-details/arrange-charts`
+- Step 1: :doc:`/tutorial/movie-details/create-dashboard`
+- Step 2: :doc:`/tutorial/movie-details/column-chart-director-awards`
+- Step 3: :doc:`/tutorial/movie-details/scatter-chart-movies-ratings`
+- Step 4: :doc:`/tutorial/movie-details/arrange-charts`
 
 To get started, move ahead to the
-:doc:`/tutorial/movie-details/prereqs-and-import-data` page.
+:doc:`/tutorial/movie-details/create-dashboard` page.
 
 .. toctree::
    :titlesonly:
 
-   /tutorial/movie-details/prereqs-and-import-data
    /tutorial/movie-details/create-dashboard
    /tutorial/movie-details/column-chart-director-awards
    /tutorial/movie-details/scatter-chart-movies-ratings