Resize / crop / style images in tooltips? #998
Description
Hello! It would be cool to be able to manipulate images in tooltips.
data = alt.Data(values=[
{
"code": c,
"image": f"https://http.cat/{c}.jpg",
"image2": f'<img src="https://http.cat/{c}.jpg" width="200">'
}
for c in [202, 301, 404]
])
alt.Chart(data).mark_bar().encode(
x="code:Q",
y="code:N",
tooltip=[alt.Tooltip("image:N")]
)
I can see how this might be awkward to write in a JSON. Might there be other ways?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json",
"config": {"view": {"continuousHeight": 300, "continuousWidth": 300}},
"data": {
"values": [
{
"code": 202,
"image": "https://http.cat/202.jpg",
"image2": "<img src=\"https://http.cat/202.jpg\" width=\"200\">"
},
{
"code": 301,
"image": "https://http.cat/301.jpg",
"image2": "<img src=\"https://http.cat/301.jpg\" width=\"200\">"
},
{
"code": 404,
"image": "https://http.cat/404.jpg",
"image2": "<img src=\"https://http.cat/404.jpg\" width=\"200\">"
}
]
},
"encoding": {
"tooltip": [{"field": "image", "type": "nominal"}],
"x": {"field": "code", "type": "quantitative"},
"y": {"field": "code", "type": "nominal"}
},
"mark": {"type": "bar"},
"usermeta": {"embedOptions": {}}
}