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.