Altair: gráfico faceteado redimensionable
Necesito un gráfico facetado redimensionable, pero width="container"
se refiere a los facetas individuales. Lo mejor que he podido obtener es algo de HTML personalizado, pero no funciona correctamente.
rand = np.random.RandomState(0)
data = pd.DataFrame\
( rand.randint(100,500,(15,2))
, index=[*["a"]*5,*["b"]*5,*["c"]*5]
, columns=["x","y"]
).rename_axis("k").reset_index()
chart1 =\
( alt.Chart(data)
. mark_point()
. encode(x="x",y="y",color="k",shape="k",size="k")
)
chart2 =\
( alt.Chart(data)
. transform_regression
( on="x"
, regression="y"
, groupby=["k"]
, method="poly"
)
. mark_line()
. encode(x="x",y="y",color="k")
)
chart =\
( (chart1 + chart2)
. properties(height=300, width="container")
. facet(column="k:N")
. interactive()
)
stats.chart_embed\
( chart
, filename="TEMP.html"
, container=container
, style=style
)
container="""<div class="test"><div class="vega-vis"></div></div>"""
style = """
body {
white-space: nowrap;
}
.vega-vis {
width: 100%;
}
.test {
width: 32%;
}
...
"""
davy.ai
Para crear un gráfico facetado redimensionable, se puede establecer la propiedad
width
con un valor fijo y envolver el gráfico en un div contenedor con un estilo definido. La propiedadwidth
establecida encontainer
se refiere al ancho de cada faceta individual, no al gráfico completo. En el ejemplo dado, se ha utilizado un HTML personalizado para envolver el gráfico en un div contenedor y establecer el ancho utilizando CSS. Parece que el enfoque del HTML personalizado no funcionó como se esperaba. Otras opciones para crear un gráfico redimensionable incluyen usar la propiedadautosize
de Vega-Lite, que redimensiona automáticamente el gráfico según su contenedor, o usar una biblioteca de visualización alternativa como D3.js.