vega-lite-api
vega-lite-api copied to clipboard
Add starter code examples
The vega-lite api is great, but is quite difficult to get started outside observable. Here are some starter codes for node and the browser that should help
Addresses #22
FWIW here's another HTML example https://vizhub.com/curran/7392ee124c8249b884e735abf6da8df4?edit=files&file=index.html
FWIW here's another HTML example https://vizhub.com/curran/7392ee124c8249b884e735abf6da8df4?edit=files&file=index.html
I think the await looks better than the then
this should be added asasp and prominently. i almost gave up using vega-lite because i thought it only works with observable (without having to write json), only after researching for like 30 minutes i realized it can be done. i don't think a lot of users go through that effort ...
after some digging this is how to use vega-lite-api
in a modern web development framework, in this case sveltekit
. sveltekit
uses vite
as a bundler which under the hood uses rollup
. the example should be portable to other frameworks as well easily.
// Vega.svelte
<script>
import { onMount } from 'svelte';
import * as vega from 'vega';
import * as vegaLite from 'vega-lite';
import { Handler } from 'vega-tooltip';
import * as vl from 'vega-lite-api';
onMount(() => {
const options = {
config: {
// vega-lite default configuration
},
init: (view) => {
// initialize tooltip handler
view.tooltip(new 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.markPoint({ 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: 99 },
{ a: 'I', b: 91 }
])
.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>
<div id="chart" />
This would be great PR add. As an FYI to those wanting to use it in Node — since I saw there was some discussion around that — I have a small library that lets you call vega-lite-api from node and it renders the chart in a popup browser window: https://github.com/mhkeller/plot