Module

x/vega_lite/examples/specs/interactive_query_widgets.vl.json

A concise grammar of interactive graphics, built on Vega.
Latest
File
{ "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "description": "Drag the sliders to highlight points.", "data": {"url": "data/cars.json"}, "transform": [{"calculate": "year(datum.Year)", "as": "Year"}], "layer": [{ "selection": { "CylYr": { "type": "single", "fields": ["Cylinders", "Year"], "init": {"Cylinders": 4, "Year": 1977}, "bind": { "Cylinders": {"input": "range", "min": 3, "max": 8, "step": 1}, "Year": {"input": "range", "min": 1969, "max": 1981, "step": 1} } } }, "mark": "circle", "encoding": { "x": {"field": "Horsepower", "type": "quantitative"}, "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, "color": { "condition": {"selection": "CylYr", "field": "Origin", "type": "nominal"}, "value": "grey" } } }, { "transform": [{"filter": {"selection": "CylYr"}}], "mark": "circle", "encoding": { "x": {"field": "Horsepower", "type": "quantitative"}, "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, "color": {"field": "Origin", "type": "nominal"}, "size": {"value": 100} } }]}