vega/vega-observable

Name: vega-observable

Owner: Vega

Description: Convenience methods for using Vega and Vega-Lite in Observable.

Forked from: observablehq/vega

Created: 2018-04-01 01:11:47.0

Updated: 2018-04-02 23:10:40.0

Pushed: 2018-04-02 23:10:39.0

Homepage: https://observablehq.com

Size: 5

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

@observablehq/vega

Convenience methods for using Vega and Vega-Lite in Observable. See this notebook for examples:

https://beta.observablehq.com/@mbostock/exploring-data-with-vega-lite

To load Vega-Lite:

lite = require("@observablehq/vega-lite@0.1")

To display a happy little chart:

lite({
ta: {
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}
]

rk: "bar",
coding: {
x: {field: "a", type: "ordinal"},
y: {field: "b", type: "quantitative"}

Or to load data with D3 and then display with Vega-Lite:

 require("d3-fetch@1")

 = d3.csv("https://vega.github.io/vega-lite/data/seattle-weather.csv")

lite({
ta: {values: data},
rk: "tick",
coding: {
x: {field: "precipitation", type: "quantitative"}

You can pass all Vega-Embed options as the second argument (besides the specification). For example, to change the renderer to SVG use:

 = viewof vegalite(spec, {renderer: 'svg'})

To get the Vega view object, you can use viewof:

 = viewof vegalite(spec)