I am using an example of the Vega-lite's site, this one and I want to create a search bar, like this one. My charts appears as it should, but the search bar doesn't work.
This is my code. The search bar should have appeared, just like in the second example. What I am missing? I have declared in the params object my search_input. I've added the condition, just like the second example. But an error pops: Unrecognized signal name: "search_input".
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "An interactive visualization of connections among major U.S. airports in 2008. Based on a U.S. airports example by Mike Bostock.",
"layer": [
{
"mark": {
"type": "geoshape",
"fill": "#ddd",
"stroke": "#fff",
"strokeWidth": 1
},
"data": {
"url": "data/us-10m.json",
"format": {"type": "topojson", "feature": "states"}
}
},
{
"mark": {"type": "rule", "color": "#000", "opacity": 0.35},
"data": {"url": "data/flights-airport.csv"},
"transform": [
{"filter": {"param": "org", "empty": false}},
{
"lookup": "origin",
"from": {
"data": {"url": "data/airports.csv"},
"key": "iata",
"fields": ["latitude", "longitude"]
}
},
{
"lookup": "destination",
"from": {
"data": {"url": "data/airports.csv"},
"key": "iata",
"fields": ["latitude", "longitude"]
},
"as": ["lat2", "lon2"]
}
],
"encoding": {
"latitude": {"field": "latitude"},
"longitude": {"field": "longitude"},
"latitude2": {"field": "lat2"},
"longitude2": {"field": "lon2"}
}
},
{
"mark": {"type": "circle"},
"data": {"url": "data/flights-airport.csv"},
"transform": [
{"aggregate": [{"op": "count", "as": "routes"}], "groupby": ["origin"]},
{
"lookup": "origin",
"from": {
"data": {"url": "data/airports.csv"},
"key": "iata",
"fields": ["state", "latitude", "longitude"]
}
},
{"filter": "datum.state !== 'PR' && datum.state !== 'VI'"}
],
"params": [
{
"name": "org",
"select": {
"type": "point",
"on": "pointerover",
"nearest": true,
"fields": ["origin"]
}
},
{
"name": "search_input",
"bind": {
"input": "search",
"placeholder": "Search Airport",
"name": "Search"
},
"value": ""
}
],
"encoding": {
"latitude": {"field": "latitude"},
"longitude": {"field": "longitude"},
"size": {
"field": "routes",
"type": "quantitative",
"scale": {"rangeMax": 1000},
"legend": null
},
"order": {
"field": "routes",
"sort": "descending"
},
"opacity": {
"condition": {
"test": "test(regexp(search_input,'i'),datum.origin)",
"value": 0.8
},
"value": 0.1
}
}
}
],
"projection": {"type": "albersUsa"},
"width": 900,
"height": 500
}
try this
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "An interactive visualization of connections among major U.S. airports in 2008. Based on a U.S. airports example by Mike Bostock.",
"params": [
{
"name": "search_input",
"bind": {
"input": "search",
"placeholder": "Search Airport",
"name": "Search"
},
"value": ""
}
],
"layer": [
{
"mark": {
"type": "geoshape",
"fill": "#ddd",
"stroke": "#fff",
"strokeWidth": 1
},
"data": {
"url": "data/us-10m.json",
"format": {"type": "topojson", "feature": "states"}
}
},
{
"mark": {"type": "rule", "color": "#000", "opacity": 0.35},
"data": {"url": "data/flights-airport.csv"},
"transform": [
{"filter": {"param": "org", "empty": false}},
{
"lookup": "origin",
"from": {
"data": {"url": "data/airports.csv"},
"key": "iata",
"fields": ["latitude", "longitude"]
}
},
{
"lookup": "destination",
"from": {
"data": {"url": "data/airports.csv"},
"key": "iata",
"fields": ["latitude", "longitude"]
},
"as": ["lat2", "lon2"]
}
],
"encoding": {
"latitude": {"field": "latitude"},
"longitude": {"field": "longitude"},
"latitude2": {"field": "lat2"},
"longitude2": {"field": "lon2"}
}
},
{
"params": [
{
"name": "org",
"select": {
"type": "point",
"on": "pointerover",
"nearest": true,
"fields": ["origin"]
}
}
],
"mark": {"type": "circle"},
"data": {"url": "data/flights-airport.csv"},
"transform": [
{"aggregate": [{"op": "count", "as": "routes"}], "groupby": ["origin"]},
{
"lookup": "origin",
"from": {
"data": {"url": "data/airports.csv"},
"key": "iata",
"fields": ["state", "latitude", "longitude"]
}
},
{"filter": "datum.state !== 'PR' && datum.state !== 'VI'"}
],
"encoding": {
"latitude": {"field": "latitude"},
"longitude": {"field": "longitude"},
"size": {
"field": "routes",
"type": "quantitative",
"scale": {"rangeMax": 1000},
"legend": null
},
"order": {"field": "routes", "sort": "descending"},
"opacity": {
"condition": {
"test": "test(regexp(search_input,'i'),datum.origin)",
"value": 0.8
},
"value": 0.1
},
"tooltip": [{"field": "origin", "title": "Airport", "type": "nominal"}]
}
}
],
"projection": {"type": "albersUsa"},
"width": 900,
"height": 500
}