vega-lite-api

vega-lite-api copied to clipboard

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