Open tpellet opened 1 year ago
Thanks for the report; I think you are correct that it is related to the parameters being lifted to top level. You can run the following to see which spec altair creates:
print(
alt.Chart.from_json(
'''{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"name": "values"},
"width": 400,
"height": 300,
"encoding": {"x": {"field": "date", "type": "temporal"}},
"layer": [
{
"encoding": {
"color": {"field": "symbol", "type": "nominal"},
"y": {"field": "price", "type": "quantitative"}
},
"layer": [
{"mark": "line"},
{
"transform": [{"filter": {"param": "hover", "empty": false}}],
"mark": "point"
}
]
},
{
"transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
"mark": "rule",
"encoding": {
"opacity": {
"condition": {"value": 0.3, "param": "hover", "empty": false},
"value": 0
},
"tooltip": [
{"field": "GOOGL", "type": "quantitative"},
{"field": "AAPL", "type": "quantitative"}
]
},
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["date"],
"nearest": true,
"on": "mouseover",
"clear": "mouseout"
}
}
]
}
],
"datasets": {
"values": [
{"date": "2023-09-14T00:00:00+00:00", "price": 138.1, "symbol": "GOOGL"},
{"date": "2023-09-15T00:00:00+00:00", "price": 137.4, "symbol": "GOOGL"},
{"date": "2023-09-18T00:00:00+00:00", "price": 138.21, "symbol": "GOOGL"},
{"date": "2023-09-19T00:00:00+00:00", "price": 138.04, "symbol": "GOOGL"},
{"date": "2023-09-20T00:00:00+00:00", "price": 133.74, "symbol": "GOOGL"},
{
"date": "2023-09-21T00:00:00+00:00",
"price": 130.89999389648438,
"symbol": "GOOGL"
},
{"date": "2023-09-14T00:00:00+00:00", "price": 175.74, "symbol": "AAPL"},
{"date": "2023-09-15T00:00:00+00:00", "price": 175.01, "symbol": "AAPL"},
{"date": "2023-09-18T00:00:00+00:00", "price": 177.97, "symbol": "AAPL"},
{"date": "2023-09-19T00:00:00+00:00", "price": 179.07, "symbol": "AAPL"},
{"date": "2023-09-20T00:00:00+00:00", "price": 175.49, "symbol": "AAPL"},
{
"date": "2023-09-21T00:00:00+00:00",
"price": 174.6428985595703,
"symbol": "AAPL"
}
]
}
}'''
).to_json()
)
output:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"view": {
"continuousHeight": 300,
"continuousWidth": 300
}
},
"data": {
"name": "values"
},
"datasets": {
"values": [
{
"date": "2023-09-14T00:00:00+00:00",
"price": 138.1,
"symbol": "GOOGL"
},
{
"date": "2023-09-15T00:00:00+00:00",
"price": 137.4,
"symbol": "GOOGL"
},
{
"date": "2023-09-18T00:00:00+00:00",
"price": 138.21,
"symbol": "GOOGL"
},
{
"date": "2023-09-19T00:00:00+00:00",
"price": 138.04,
"symbol": "GOOGL"
},
{
"date": "2023-09-20T00:00:00+00:00",
"price": 133.74,
"symbol": "GOOGL"
},
{
"date": "2023-09-21T00:00:00+00:00",
"price": 130.89999389648438,
"symbol": "GOOGL"
},
{
"date": "2023-09-14T00:00:00+00:00",
"price": 175.74,
"symbol": "AAPL"
},
{
"date": "2023-09-15T00:00:00+00:00",
"price": 175.01,
"symbol": "AAPL"
},
{
"date": "2023-09-18T00:00:00+00:00",
"price": 177.97,
"symbol": "AAPL"
},
{
"date": "2023-09-19T00:00:00+00:00",
"price": 179.07,
"symbol": "AAPL"
},
{
"date": "2023-09-20T00:00:00+00:00",
"price": 175.49,
"symbol": "AAPL"
},
{
"date": "2023-09-21T00:00:00+00:00",
"price": 174.6428985595703,
"symbol": "AAPL"
}
]
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
}
},
"height": 300,
"layer": [
{
"encoding": {
"color": {
"field": "symbol",
"type": "nominal"
},
"y": {
"field": "price",
"type": "quantitative"
}
},
"layer": [
{
"mark": "line"
},
{
"mark": "point",
"transform": [
{
"filter": {
"empty": false,
"param": "hover"
}
}
]
}
]
},
{
"encoding": {
"opacity": {
"condition": {
"empty": false,
"param": "hover",
"value": 0.3
},
"value": 0
},
"tooltip": [
{
"field": "GOOGL",
"type": "quantitative"
},
{
"field": "AAPL",
"type": "quantitative"
}
]
},
"mark": "rule",
"transform": [
{
"groupby": [
"date"
],
"pivot": "symbol",
"value": "price"
}
]
}
],
"params": [
{
"name": "hover",
"select": {
"clear": "mouseout",
"fields": [
"date"
],
"nearest": true,
"on": "mouseover",
"type": "point"
},
"views": []
}
],
"width": 400
}
The params section looks the same in the output, but it is is lifted out from the layer to the top level. I am not sure what an action here would be but @ChristopherDavisUCI or @mattijn might have an idea.
Thank you for your response @joelostblom. It is a neat way of seeing what is going on!
Hi all!
I have been using Altair to turn Vega-Lite specifications into html charts. I have an issue with some interactive chart templates from the Vega-Lite example library. Specifically, specifications that render proper html files in the Vega-Lite editor cannot be saved properly to html using altair.chart.save(). The issue looks similar to vega/vega-lite#7854.
For example, here is an interactive graph that I have been trying to save as html using Altair.
When I use exactly the same dictionary specification in Altair (up to boolean caps due to Python) and try:
the resulting html file cannot be read and I get the following error message:
For reference, the html file saved using Altair looks like this: