File size: 5,293 Bytes
0bd62e5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
# 如何使用地图组件绘制图表
Related spaces:
Tags: PLOTS, MAPS
## 简介
本指南介绍如何使用 Gradio 的 `Plot` 组件在地图上绘制地理数据。Gradio 的 `Plot` 组件可以与 Matplotlib、Bokeh 和 Plotly 一起使用。在本指南中，我们将使用 Plotly 进行操作。Plotly 可以让开发人员轻松创建各种地图来展示他们的地理数据。点击[这里](https://plotly.com/python/maps/)查看一些示例。
## 概述
我们将使用纽约市的 Airbnb 数据集，该数据集托管在 kaggle 上，点击[这里](https://www.kaggle.com/datasets/dgomonov/new-york-city-airbnb-open-data)。我已经将其上传到 Hugging Face Hub 作为一个数据集，方便使用和下载，点击[这里](https://huggingface.co/datasets/gradio/NYC-Airbnb-Open-Data)。使用这些数据，我们将在地图上绘制 Airbnb 的位置，并允许基于价格和位置进行筛选。下面是我们将要构建的演示。 ⚡️
$demo_map_airbnb
## 步骤 1-加载 CSV 数据 💾
让我们首先从 Hugging Face Hub 加载纽约市的 Airbnb 数据。
```python
from datasets import load_dataset
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 = new_df["name"].tolist()
prices = new_df["price"].tolist()
text_list = [(names[i], prices[i]) for i in range(0, len(names))]
```
在上面的代码中，我们先将 CSV 数据加载到一个 pandas dataframe 中。让我们首先定义一个函数，这将作为 gradio 应用程序的预测函数。该函数将接受最低价格、最高价格范围和筛选结果地区的列表作为参数。我们可以使用传入的值 (`min_price`、`max_price` 和地区列表) 来筛选数据框并创建 `new_df`。接下来，我们将创建包含每个 Airbnb 的名称和价格的 `text_list`，以便在地图上使用作为标签。
## 步骤 2-地图图表 🌐
Plotly 使得处理地图变得很容易。让我们看一下下面的代码，了解如何创建地图图表。
```python
import plotly.graph_objects as go
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
),
)
```
上面的代码中，我们通过传入经纬度列表来创建一个散点图。我们还传入了名称和价格的自定义数据，以便在鼠标悬停在每个标记上时显示额外的信息。接下来，我们使用 `update_layout` 来指定其他地图设置，例如缩放和居中。
有关使用 Mapbox 和 Plotly 创建散点图的更多信息，请点击[这里](https://plotly.com/python/scattermapbox/)。
## 步骤 3-Gradio 应用程序 ⚡️
我们将使用两个 `gr.Number` 组件和一个 `gr.CheckboxGroup` 组件，允许用户指定价格范围和地区位置。然后，我们将使用 `gr.Plot` 组件作为我们之前创建的 Plotly + Mapbox 地图的输出。
```python
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)
```
我们使用 `gr.Column` 和 `gr.Row` 布局这些组件，并为演示加载时和点击 " 更新筛选 " 按钮时添加了事件触发器，以触发地图更新新的筛选条件。
以下是完整演示代码：
$code_map_airbnb
## 步骤 4-部署 Deployment 🤗
如果你运行上面的代码，你的应用程序将在本地运行。
如果要获取临时共享链接，可以将 `share=True` 参数传递给 `launch`。
但如果你想要一个永久的部署解决方案呢？
让我们将我们的 Gradio 应用程序部署到免费的 HuggingFace Spaces 平台。
如果你以前没有使用过 Spaces，请按照之前的指南[这里](/using_hugging_face_integrations)。
## 结论 🎉
你已经完成了！这是构建地图演示所需的所有代码。
链接到演示：[地图演示](https://huggingface.co/spaces/gradio/map_airbnb)和[完整代码](https://huggingface.co/spaces/gradio/map_airbnb/blob/main/run.py)（在 Hugging Face Spaces）
|