The demo shown below is taken from the official Vega-Lite example gallery here. |
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"url": "https://vega.github.io/vega-lite/data/movies.json"}, "transform": [{ "filter": {"and": [ {"field": "IMDB Rating", "valid": true}, {"field": "Rotten Tomatoes Rating", "valid": true} ]} }], "mark": "rect", "width": 300, "height": 200, "encoding": { "x": { "bin": {"maxbins":60}, "field": "IMDB Rating", "type": "quantitative" }, "y": { "bin": {"maxbins": 40}, "field": "Rotten Tomatoes Rating", "type": "quantitative" }, "color": { "aggregate": "count", "type": "quantitative" } }, "config": { "view": { "stroke": "transparent" } } } |
Textual representation
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": {"url": "https://vega.github.io/vega-lite/data/movies.json"}, "transform": [{ "filter": {"and": [ {"field": "IMDB Rating", "valid": true}, {"field": "Rotten Tomatoes Rating", "valid": true} ]} }], "mark": "rect", "width": 300, "height": 200, "encoding": { "x": { "bin": {"maxbins":60}, "field": "IMDB Rating", "type": "quantitative" }, "y": { "bin": {"maxbins": 40}, "field": "Rotten Tomatoes Rating", "type": "quantitative" }, "color": { "aggregate": "count", "type": "quantitative" } }, "config": { "view": { "stroke": "transparent" } } } |
The code above is rendered by "Prism Syntax Highlighter for Confluence" which supports highlighting JSON syntax.
👉 Check out the official Vega-Lite documentation here https://vega.github.io/vega-lite/docs/ .