@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:

vegalite = require("@observablehq/[email protected]")

To display a happy little chart:

vegalite({
  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}
    ]
  },
  mark: "bar",
  encoding: {
    x: {field: "a", type: "ordinal"},
    y: {field: "b", type: "quantitative"}
  }
})

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

d3 = require("d3-fetch@1")

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

vegalite({
  data: {values: data},
  mark: "tick",
  encoding: {
    x: {field: "precipitation", type: "quantitative"}
  }
})