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()
    },
    "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.