Create docs for 3.13.0 + fix requirements.txt (#2811)

* Create docs + fix bug

* Changelog

CHANGELOG.md

@@ -19,9 +19,10 @@ These links are a more secure and scalable way to create shareable demos!
 
 ## Bug Fixes:
 * Allows `gr.Dataframe()` to take a `pandas.DataFrame` that includes numpy array and other types as its initial value, by [@abidlabs](https://github.com/abidlabs) in [PR 2804](https://github.com/gradio-app/gradio/pull/2804) 
+* Add `altair` to requirements.txt by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2811](https://github.com/gradio-app/gradio/pull/2811)
 
 ## Documentation Changes:
-No changes to highlight.
+* Fixed some typos in the "Plot Component for Maps" guide by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2811](https://github.com/gradio-app/gradio/pull/2811)
 
 ## Testing and Infrastructure Changes:
 * Fixed test for IP address by [@abidlabs](https://github.com/abidlabs) in [PR 2808](https://github.com/gradio-app/gradio/pull/2808) 

guides/05_tabular_data_science_and_plots/plot_component_for_maps.md

@@ -9,17 +9,16 @@ This guide explains how you can use Gradio to plot geographical data on a map us
 
 ## Overview 
     
-We will be using the New York City Airbnb dataset, which is hosted on kaggle [here](https://www.kaggle.com/datasets/dgomonov/new-york-city-airbnb-open-data). I've uploaded it to the Hugging Face Hub as a dataset [here](https://huggingface.co/datasets/gradio/NYC-Airbnb-Open-Data) for easier use and download. Using this data we will plot Airbnb locations on a map output and allow filtering based on price and location. Below is the demo that we will be buiding. ⚡️
-
-<gradio-app space="gradio/NYC-Airbnb-Map"> </gradio-app>
+We will be using the New York City Airbnb dataset, which is hosted on kaggle [here](https://www.kaggle.com/datasets/dgomonov/new-york-city-airbnb-open-data). I've uploaded it to the Hugging Face Hub as a dataset [here](https://huggingface.co/datasets/gradio/NYC-Airbnb-Open-Data) for easier use and download. Using this data we will plot Airbnb locations on a map output and allow filtering based on price and location. Below is the demo that we will be building. ⚡️
 
+$demo_map_airbnb
 
 ## Step 1 - Loading CSV data 💾
 
 Let's start by loading the Airbnb NYC data from the Hugging Face Hub.
 
 ```python
-import pandas as pd
+from datasets import load_dataset
 
 dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
 df = dataset.to_pandas()
@@ -27,12 +26,12 @@ df = dataset.to_pandas()
 def filter_map(min_price, max_price, boroughs):
     new_df = df[(df['neighbourhood_group'].isin(boroughs)) & 
             (df['price'] > min_price) & (df['price'] < max_price)]
-    names = df["name"].tolist()
-    prices = df["price"].tolist()
+    names = new_df["name"].tolist()
+    prices = new_df["price"].tolist()
     text_list = [(names[i], prices[i]) for i in range(0, len(names))]
 ```
 
-In the code above, we first load the csv data into a pandas dataframe. Let's begin by defining a function that we will use as the prediction fuction for the gradio app. This function will accept the minimum price and maximum price range as well as the list of boroughs to filter the resulting map. We can use the passed in values (`min_price`, `max_price`, and list of `boroughs`) to filter the dataframe and create `new_df`. Next we will create `text_list` of the names and prices of each Airbnb to use as labels on the map.
+In the code above, we first load the csv data into a pandas dataframe. Let's begin by defining a function that we will use as the prediction function for the gradio app. This function will accept the minimum price and maximum price range as well as the list of boroughs to filter the resulting map. We can use the passed in values (`min_price`, `max_price`, and list of `boroughs`) to filter the dataframe and create `new_df`. Next we will create `text_list` of the names and prices of each Airbnb to use as labels on the map.
  
 ## Step 2 - Map Figure 🌐
 
@@ -93,63 +92,7 @@ We layout these components using the `gr.Column` and `gr.Row` and wel also add e
 
 This is what the full demo code looks like:
 
-```python
-import os
-import gradio as gr
-import pandas as pd
-import plotly.graph_objects as go
-
-dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
-df = dataset.to_pandas()
-
-def filter_map(min_price, max_price, boroughs):
-
-    new_df = df[(df['neighbourhood_group'].isin(boroughs)) & 
-          (df['price'] > min_price) & (df['price'] < max_price)]
-    names = df["name"].tolist()
-    prices = df["price"].tolist()
-    text_list = [(names[i], prices[i]) for i in range(0, len(names))]
-    fig = go.Figure(go.Scattermapbox(
-            customdata=text_list,
-            lat=new_df['latitude'].tolist(),
-            lon=new_df['longitude'].tolist(),
-            mode='markers',
-            marker=go.scattermapbox.Marker(
-                size=6
-            ),
-            hoverinfo="text",
-            hovertemplate='<b>Name</b>: %{customdata[0]}<br><b>Price</b>: $%{customdata[1]}'
-        ))
-
-    fig.update_layout(
-        mapbox_style="open-street-map",
-        hovermode='closest',
-        mapbox=dict(
-            bearing=0,
-            center=go.layout.mapbox.Center(
-                lat=40.67,
-                lon=-73.90
-            ),
-            pitch=0,
-            zoom=9
-        ),
-    )
-
-    return fig
-
-with gr.Blocks() as demo:
-    with gr.Column():
-        with gr.Row():
-            min_price = gr.Number(value=250, label="Minimum Price")
-            max_price = gr.Number(value=1000, label="Maximum Price")
-        boroughs = gr.CheckboxGroup(choices=["Queens", "Brooklyn", "Manhattan", "Bronx", "Staten Island"], value=["Queens", "Brooklyn"], label="Select Boroughs:")
-        btn = gr.Button(value="Update Filter")
-        map = gr.Plot()
-    demo.load(filter_map, [min_price, max_price, boroughs], map)
-    btn.click(filter_map, [min_price, max_price, boroughs], map)
-
-demo.launch()
-```
+$code_map_airbnb
 
 ## Step 4 - Deployment 🤗
 If you run the code above, your app will start running locally.
@@ -163,4 +106,4 @@ If you haven't used Spaces before, follow the previous guide [here](/using_huggi
 ## Conclusion 🎉
 And you're all done! That's all the code you need to build a map demo.
 
-Here's a link to the demo [Map demo](https://huggingface.co/spaces/gradio/NYC-Airbnb-Map) and [complete code](https://huggingface.co/spaces/gradio/NYC-Airbnb-Map/blob/main/app.py) (on Hugging Face Spaces)
+Here's a link to the demo [Map demo](https://huggingface.co/spaces/gradio/map_airbnb) and [complete code](https://huggingface.co/spaces/gradio/map_airbnb/blob/main/run.py) (on Hugging Face Spaces)

requirements.txt

@@ -1,4 +1,5 @@
 aiohttp
+altair
 h11<0.13,>=0.11
 fastapi
 ffmpy