Document Renderer as bokeh and Map Box Token. (#87)

Document that the `Renderer` must be `bokeh`.
Add explicit instructions and screenshots for adding the
`Map Box Token`.

Closes: #83
Closes: #84

Author: scottdangelo

README.md

@@ -66,7 +66,7 @@ Sign up for IBM's [Watson Studio](https://dataplatform.cloud.ibm.com/). By creat
 
 ### 3. Run the notebook
 
-> NOTE: See the points in the notebook where you will have to enter your [Mapbox Token](https://www.mapbox.com) to render the map.
+> NOTE: There are points in the notebook where you will have to enter your [Mapbox Token](https://www.mapbox.com) to render the map.
 
 When a notebook is executed, what is actually happening is that each code cell in
 the notebook is executed, in order, from top to bottom.

doc/source/images/choose-renderer-bokeh.png

@@ -428,11 +428,16 @@
     "\n",
     "With ther pixiedust helper library, we can display charts and graphs more easily, with the one-line `display()` method.\n",
     "  \n",
-    "#### 2.7.1 Select _DataFrame Table_ icon in the display widget to see the data in tabular form\n",
+    "#### 2.7.1 Make sure that the `Renderer` is set to `bokeh`:\n",
+    "\n",
+    "<img width=\"500\" src=\"https://raw.githubusercontent.com/IBM/visualize-data-with-python/master/doc/source/images/choose-renderer-bokeh.png\">\n",
+    "\n",
+    "\n",
+    "#### 2.7.2 Select _DataFrame Table_ icon in the display widget to see the data in tabular form\n",
     "\n",
     "<img width=\"500\" src=\"https://raw.githubusercontent.com/IBM/visualize-data-with-python/master/doc/source/images/selectDataFrameTableIcon.png\">\n",
     "\n",
-    "#### 2.7.2 Select the chart icon to pull down and choose `line chart`. Click the `Options` button, and then for `Keys` drag and drop `datetime` and for `Values` drag and drop `Discharge`. This will display the water discharge at this stream gauge in cubic feet per second.\n",
+    "#### 2.7.3 Select the chart icon to pull down and choose `line chart`. Click the `Options` button, and then for `Keys` drag and drop `datetime` and for `Values` drag and drop `Discharge`. This will display the water discharge at this stream gauge in cubic feet per second.\n",
     "\n",
     "<img width=\"500\" src=\"https://raw.githubusercontent.com/IBM/visualize-data-with-python/master/doc/source/images/selectLineChart.png\">\n",
     "\n",
@@ -453,9 +458,8 @@
       "filter": "{}",
       "handlerId": "lineChart",
       "keyFields": "datetime",
-      "mapboxtoken": "",
       "no_margin": "true",
-      "rendererId": "matplotlib",
+      "rendererId": "bokeh",
       "rowCount": "843",
       "timeseries": "true",
       "valueFields": "GuageHeight(feet)"
@@ -510,6 +514,15 @@
     "maxFlood"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "#### Insert your [Mapbox token](https://www.mapbox.com/) after running the cell below by clicking the `Options` button and adding it to the form.\n",
+    "\n",
+    "<img width=\"500\" src=\"https://raw.githubusercontent.com/IBM/visualize-data-with-python/master/doc/source/images/map-view-options-add-mapbox-token.png\">\n"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -580,7 +593,16 @@
    "metadata": {},
    "outputs": [],
    "source": [
-   "!wget https://raw.githubusercontent.com/IBM/visualize-data-with-python/master/data/streamGauges.geojson\n"
+    "!wget https://raw.githubusercontent.com/IBM/visualize-data-with-python/master/data/streamGauges.geojson\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "#### Add your `mapboxtoken` to the PixieApp:\n",
+    "\n",
+    "<img width=\"500\" src=\"https://raw.githubusercontent.com/IBM/visualize-data-with-python/master/doc/source/images/pixieapp-add-mapbox-token.png\">"
    ]
   },
   {
@@ -846,7 +868,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3.6",
    "language": "python",
    "name": "python3"
   },
@@ -860,7 +882,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.2"
+   "version": "3.6.8"
   }
  },
  "nbformat": 4,