from_json not same as vega-lite examples on official site #78
Description
alias VegaLite, as: Vl
Vl.from_json("""
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "An interactive scatter plot of global health statistics by country and year.",
"data": {"url": "https://vega.github.io/editor/data/gapminder.json"},
"width": 800,
"height": 500,
"layer": [
{
"transform": [
{"filter": {"field": "country", "equal": "Afghanistan"}},
{"filter": {"param": "year"}}
],
"mark": {
"type": "text",
"fontSize": 100,
"x": 420,
"y": 250,
"opacity": 0.06
},
"encoding": {"text": {"field": "year"}}
},
{
"transform": [
{
"lookup": "cluster",
"from": {
"key": "id",
"fields": ["name"],
"data": {
"values": [
{"id": 0, "name": "South Asia"},
{"id": 1, "name": "Europe & Central Asia"},
{"id": 2, "name": "Sub-Saharan Africa"},
{"id": 3, "name": "America"},
{"id": 4, "name": "East Asia & Pacific"},
{"id": 5, "name": "Middle East & North Africa"}
]
}
}
}
],
"encoding": {
"x": {
"field": "fertility",
"type": "quantitative",
"scale": {"domain": [0, 9]},
"axis": {"tickCount": 5, "title": "Fertility"}
},
"y": {
"field": "life_expect",
"type": "quantitative",
"scale": {"domain": [20, 85]},
"axis": {"tickCount": 5, "title": "Life Expectancy"}
}
},
"layer": [
{
"mark": {
"type": "line",
"size": 4,
"color": "lightgray",
"strokeCap": "round"
},
"encoding": {
"detail": {"field": "country"},
"order": {"field": "year"},
"opacity": {
"condition": {
"test": {"or": [
{"param": "hovered", "empty": false},
{"param": "clicked", "empty": false}
]},
"value": 0.8
},
"value": 0
}
}
},
{
"params": [
{
"name": "year",
"value": [{"year": 1955}],
"select": {
"type": "point",
"fields": ["year"]
},
"bind": {
"name": "Year",
"input": "range",
"min": 1955, "max": 2005, "step": 5
}
},
{
"name": "hovered",
"select": {
"type": "point",
"fields": ["country"],
"toggle": false,
"on": "pointerover"
}
},
{
"name": "clicked",
"select": {"type": "point", "fields": ["country"]}
}
],
"transform": [{"filter": {"param": "year"}}],
"mark": {"type": "circle", "size": 100, "opacity": 0.9},
"encoding": {"color": {"field": "name", "title": "Region"}}
},
{
"transform": [
{
"filter": {
"and": [
{"param": "year"},
{"or": [
{"param": "clicked", "empty": false},
{"param": "hovered", "empty": false}
]}
]
}
}
],
"mark": {
"type": "text",
"yOffset": -12,
"fontSize": 12,
"fontWeight": "bold"
},
"encoding": {
"text": {"field": "country"},
"color": {"field": "name", "title": "Region"}
}
},
{
"transform": [
{"filter": {"param": "hovered", "empty": false}},
{"filter": {"not": {"param": "year"}}}
],
"layer": [
{
"mark": {
"type": "text",
"yOffset": -12,
"fontSize": 12,
"color": "gray"
},
"encoding": {"text": {"field": "year"}}
},
{"mark": {"type": "circle", "color": "gray"}}
]
}
]
}
]
}
""")
I use the above script to generate an example in vega-lite site. I hope it can work as same as the official example. But it is not.
plot in livebook:
plot in official site:
important info like year is missing