// vl = import("@vega/vega-lite-api")
vl = {
// const vega = await import("https://cdn.skypack.dev/vega")
const vega = await import("https://cdn.skypack.dev/pin/vega@v5.19.1-LjlxIxtzi6zksLaY2dUt/mode=imports,min/optimized/vega.js")
// const vegalite = await import("https://cdn.skypack.dev/vega-lite")
const vegalite = await import("https://cdn.skypack.dev/pin/vega-lite@v4.17.0-47wYrmXIPmurxFWPbEug/mode=imports,min/optimized/vega-lite.js")
// const tooltip = await import("https://cdn.skypack.dev/vega-tooltip")
const tooltip = await import("https://cdn.skypack.dev/pin/vega-tooltip@v0.25.1-rAlruGPw5BRT2Q2ycl6s/mode=imports,min/optimized/vega-tooltip.js")
// const api = await import("https://cdn.skypack.dev/vega-lite-api")
const api = await import("https://cdn.skypack.dev/pin/vega-lite-api@v4.0.0-Yn9TEw3cVEhO6pvIicKg/mode=imports,min/optimized/vega-lite-api.js")
const options = {
config: {
// vega-lite default configuration
config: {
view: { continuousWidth: 400, continuousHeight: 300 },
mark: { tooltip: null }
}
},
init: view => {
// initialize tooltip handler
view.tooltip(new tooltip.Handler().call)
// enable horizontal scrolling for large plots
if (view.container()) {
view.container().style['overflow-x'] = 'auto'
}
},
view: {
renderer: 'svg'
}
};
return api.register(vega, vegalite, options)
}
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.
