在 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