Observable Framework 1.7.0 GitHub️ 1.9k

Vega-Lite

Vega-Lite is a “high-level grammar of interactive graphics” with “concise, declarative syntax to create an expressive range of visualizations for data analysis and presentation.” It is an alternative to Observable Plot. Vega-Lite is available by default in Markdown as vl, but you can import it explicitly as:

import * as vega from "npm:vega";
import * as vegaLite from "npm:vega-lite";
import * as vegaLiteApi from "npm:vega-lite-api";

const vl = vegaLiteApi.register(vega, vegaLite);

You can use the Vega-Lite JavaScript API to construct a chart:

vl.markBar()
  .data(alphabet)
  .encode(vl.x().fieldQ("frequency"), vl.y().fieldN("letter"))
  .width(640)
  .render()

Or you can use a Vega-Lite JSON view specification:

vl.render({
  spec: {
    width: 640,
    height: 400,
    data: {url: await FileAttachment("gistemp.csv").url(), format: {type: "csv"}},
    mark: "point",
    encoding: {
      x: {type: "temporal", field: "Date"},
      y: {type: "quantitative", field: "Anomaly"},
      color: {type: "quantitative", field: "Anomaly", scale: {range: "diverging", reverse: true}}
    }
  }
})
When loading data from a file as above, use FileAttachment so that referenced files are included on build.