在 plotly subplots 中使用 Folium map 創建儀表板

Question

我有一個覆蓋幾座建築物的計划區域。 我想使用gdf.explore()方法在子圖中映射計划和建築物，該方法創建一個葉圖對象，然后使用 plotly 映射建築物年份直方圖的圖形。 然后將這兩個地塊並排放置。

我找不到在情節子圖中添加葉圖對象的方法。

這是我在代碼中需要的：

m = gdf.explore()
p = px.histogram()


# CODE THAT PUTS m AND p IN ONE GRAPH!

先感謝您！

Answer 1

您的問題不包含示例幾何或數據框。 合成了一些
根據評論plotly和folium是非常不同的庫，沒有集成
顯然，您可以使用HTML集成IFrame 。 已采取使用數據 URI將plotly和folium組件編碼為單個HTML文檔的方法

import shapely.geometry
import numpy as np
import geopandas as gpd
import pandas as pd
import plotly.express as px
from IPython.display import IFrame
from datauri import DataURI
from pathlib import Path

# create a folium map
m = gpd.GeoDataFrame(
    geometry=[
        shapely.geometry.MultiPoint(
            np.random.uniform(b, b + 1, size=(5, 2))
        ).convex_hull
        for b in range(4)
    ],
    data={"building": [f"building {b}" for b in range(4)]},
).explore(column="building")

# create a histogram
fig = px.histogram(
    pd.DataFrame(
        np.random.randint(1980, 2022, size=(100, 4)),
        columns=[f"b {b}" for b in range(4)],
    )
    .stack()
    .reset_index()
    .rename(columns={0: "year", "level_1": "b"}),
    x="year",
    color="b",
).update_layout(margin={"l": 0, "r": 0, "t": 0, "b": 0})

html = f"""<html>
<body>
    <div style="display:inline-block;width:1200">
        <iframe src='{DataURI.make("text/html", charset="us-ascii", base64=True, data=m._parent.render())}' 
            width="49%", align="left"></iframe>
        <iframe src='{DataURI.make("text/html", charset="us-ascii", base64=True, data=fig.to_html(include_plotlyjs="cdn"))}'
            width="49%", align="right"></iframe>
    </div>
</body>
</html>"""

# as a HTML file
with open(Path.cwd().joinpath("sample.html"), "w") as f:
    f.write(html)

# as jupyter output
IFrame(
    DataURI.make("text/html", charset="utf-8", base64=True, data=html),
    height=900,
    width=1200,
)

在 plotly subplots 中使用 Folium map 創建儀表板

問題描述

1 個解決方案

解決方案1
1 已采納 2022-05-11 21:26:56

在 plotly subplots 中使用 Folium map 創建儀表板

問題描述

1 個解決方案

解決方案1 1 已采納 2022-05-11 21:26:56

解決方案1
1 已采納 2022-05-11 21:26:56