⚙️ vega-embed

Embed Vega-lite visualizations in your page

This helperes generates both static and interactive versions of your viz. Preview will show the static version.

Params are Vega-Lite code in JSON format. There is only one specific option: usermeta.staticWidth — a number, which defines width of static version of viz (default is 400). You can skip $schema param, it will be inserted automatically.

Example

From the vega-embed site.

 ```helper:vega-embed
 {  "usermeta": 
  {"embedOptions" : {"actions": true , "renderer": "canvas"},
   "staticWidth" : 600
  	},
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "width": "container",
  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
        .
        .
        .
  ...the rest of the code...
 ```

Another example (interactive legend, external data source)

Copypasted from this page with almost no modifications. It's better to get external data, using full URL via https, not by relative link.

→ See this page in edit mode.