A very simple example of how to run the wonderful JavaScript API for vega-lite directly in the browser
Built with blockbuilder.org
license: mit |
A very simple example of how to run the wonderful JavaScript API for vega-lite directly in the browser
Built with blockbuilder.org
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
</head> | |
<body> | |
<div id="chart"></div> | |
<script src="https://cdn.jsdelivr.net/npm/vega"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-lite"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-lite-api"></script> | |
<script src="https://cdn.jsdelivr.net/npm/vega-tooltip"></script> | |
<script> | |
const options = { | |
config: { | |
// vega-lite default configuration | |
}, | |
init: (view) => { | |
// initialize tooltip handler | |
view.tooltip(new vegaTooltip.Handler().call); | |
// enable horizontal scrolling for large plots | |
if (view.container()) view.container().style["overflow-x"] = "auto"; | |
}, | |
view: { | |
// view constructor options | |
loader: vega.loader({ | |
baseURL: "https://cdn.jsdelivr.net/npm/vega-datasets@1/", | |
}), | |
renderer: "canvas", | |
}, | |
}; | |
vl.register(vega, vegaLite, options); | |
vl.markBar({ tooltip: true }) | |
.data([ | |
{ a: "A", b: 28 }, | |
{ a: "B", b: 55 }, | |
{ a: "C", b: 43 }, | |
{ a: "D", b: 91 }, | |
{ a: "E", b: 81 }, | |
{ a: "F", b: 53 }, | |
{ a: "G", b: 19 }, | |
{ a: "H", b: 87 }, | |
{ a: "I", b: 52 }, | |
]) | |
.encode( | |
vl.x().fieldQ("b"), | |
vl.y().fieldN("a"), | |
vl.tooltip([vl.fieldQ("b"), vl.fieldN("a")]) | |
) | |
.render() | |
.then((chart) => { | |
document.getElementById("chart").appendChild(chart); | |
}); | |
</script> | |
</body> | |
</html> |