Hello Vega-Embed Vega-Embed is a convenience wrapper to embed Vega and Vega-Lite visualizations. You can include Vega-Embed in your notebook with require (see notes at the bottom of this document on how to use specific versions of Vega and Vega-Lite).
embed = require("vega-embed@4")
`Embed: ${embed.version}, Vega: ${embed.vega.version}, Vega-Lite: ${embed.vl.version}`
This notebook demonstrates how to use Vega-Embed in Observable: the embed function takes a Vega or Vega-Lite specification and returns a promise to the rendered view in a DIV element.
viewof view = embed({ $schema: 'https://vega.github.io/schema/vega-lite/v3.json', width: 360, data: { values: [ {a: 'A', b: 28}, {a: 'B', b: 55}, {a: 'C', b: 43}, {a: 'D', b: 91}, {a: 'E', b: 81}, {a: 'F', b: 53}, {a: 'G', b: 19}, {a: 'H', b: 87}, {a: 'I', b: 52} ], name: 'source' }, selection: { a: {type: 'single'} }, mark: 'bar', encoding: { x: {field: 'a', type: 'ordinal'}, y: {field: 'b', type: 'quantitative'}, tooltip: {field: 'b', type: 'quantitative'}, color: { condition: {selection: 'a', value: 'steelblue'}, value: 'grey' } } })
The button to the top right of the chart provides links to common actions such as opening the specification in the Vega Editor.
The returned element.value is the Vega view. This means you can use Observable’s viewof operator to access the view from other cells in your notebook, for example to stream changes to the chart’s data!
view.insert('source', {a: 'J', b: 42}).run()
Vega-Embed can be customized by passing options as the second argument. You can change the renderer, change the theme, override the Vega loader, and more. Let's change the renderer from Canvas to SVG by passing {renderer: 'svg'}.
embed({ $schema: 'https://vega.github.io/schema/vega-lite/v3.json', data: {url: 'https://vega.github.io/vega-datasets/data/cars.json'}, mark: 'point', encoding: { x: {field: 'Horsepower', type: 'quantitative'}, y: {field: 'Miles_per_Gallon', type: 'quantitative'} } }, {renderer: 'svg'})
Vega-Lite With Vega-Lite, you can create interactive plots such as the Overview+Detail plot below in a few lines of declarative JSON.
embed({ "$schema": "https://vega.github.io/schema/vega-lite/v3.json", "data": {"url": "https://vega.github.io/vega-datasets/data/sp500.csv"}, "vconcat": [{ "width": 480, "mark": "area", "encoding": { "x": { "field": "date", "type": "temporal", "scale": {"domain": {"selection": "brush"}}, "axis": {"title": ""} }, "y": {"field": "price","type": "quantitative"} } }, { "width": 480, "height": 60, "mark": "area", "selection": { "brush": {"type": "interval", "encodings": ["x"]} }, "encoding": { "x": { "field": "date", "type": "temporal", "axis": {"format": "%Y"} }, "y": { "field": "price", "type": "quantitative", "axis": {"tickCount": 3, "grid": false} } } }] } )
To learn more about Vega-Lite, check out the examples, and documentation.
Vega Vega is an declarative format for custom designs such as this interactive timeline for global health and economic development data: grab a point to drag it through time!
embed('https://vega.github.io/vega/examples/global-development.vg.json', {loader: {baseURL: 'https://vega.github.io/vega-datasets/'}})
Requiring Specific Versions If you want to use a specifc version of Vega and Vega-Lite, you can import Vega-Embed after setting require aliases.
embedWithSpecificVersions = require.alias({ "vega": "vega@5.3.1", "vega-lite": "vega-lite@3.0.0" })("vega-embed@4")