Public
Edited
Oct 19, 2022
vega inside transform divs
import { data as anscombesQuartet } from "@aidans/how-to-demonstrate-anscombes-quartet"
vlEmbed = require("vega-embed")
vlEmbed({
data: { values: anscombesQuartet },
mark: "point",
"params": [{
"name": "brush",
"select": "interval",
"value": {"x1": [4, 10], "y1": [4, 8]}
}],
encoding: {
x: { field: "x1", type: "quantitative" },
y: { field: "y1", type: "quantitative" }
}
})
{
const result = html`<div id="vis" width=400 height=400></div>`
vlEmbed("#vis", {
mode: "vega-lite",
spec: {
data: { values: anscombesQuartet },
mark: "point",
"params": [{
"name": "brush",
"select": "interval",
"value": {"x1": [4, 10], "y1": [4, 8]}
}],
encoding: {
x: { field: "x1", type: "quantitative" },
y: { field: "y1", type: "quantitative" }
}
}
});
return result;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
