update docs and examples for vega-lite

Author: mhkeller

README.md

@@ -1,7 +1,7 @@
 Plot
 ===
 
-> A small node library to display charts in popup windows and save them as pngs. Supports [observablehq/plot](https://observablehq.com/@observablehq/plot), [vega-lite](https://vega.github.io/vega-lite/) and [plotly](https://plotly.com/javascript/) out of the box.
+> A small node library to display charts in popup windows and save them as pngs. Supports [Observablehq/plot](https://observablehq.com/@observablehq/plot), [Vega-lite](https://vega.github.io/vega-lite/) and [Plotly](https://plotly.com/javascript/) out of the box.
 
 - [Motivation](#motivation)
 - [Installing](#installing)
@@ -30,15 +30,60 @@ npm install @mhkeller/plot
 
 A generic function to render HTML, view and screenshot it. 
 
+If your plot function requires a DOM element ID to render into (as Vega-lite and Plotly do), a `#body` element is added to the page for you to use.
+
+```javascript
+import { plot } from '@mhkeller/plot';
+
+const dataset = {
+	values: [
+		{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}
+	]
+};
+
+const chart = data => {
+	const spec = {
+		$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+		description: 'A simple bar chart with embedded data.',
+		data,
+		mark: 'bar',
+		encoding: {
+			x: {field: 'a', type: 'ordinal'},
+			y: {field: 'b', type: 'quantitative'}
+		}
+	};
+	return vegaEmbed('#body', spec);
+}
+
+await plot(chart, [dataset], {
+	library: 'vega-lite',
+	outPath: 'test/tmp/vega-lite_line-plot.png',
+	view: true,
+	title: 'Vega line chart'
+});
+```
+
+If the plot function simply creates HTML, then this function can simply return from that function and the HTML will be appended to the `#body` element automatically such as in this Observablehq/plot example.
+
 ```javascript
 import { plot } from '@mhkeller/plot`;
 
+const dataset = /* read in your dataset ... */
+
 // Create a function that returns html
-const chart = ds => {
+const chart = data => {
   return Plot.plot({
     marks: [
       Plot.rectY(
-        ds, 
+        data, 
         Plot.binX(
           { y: 'count' }, 
           {

test/plot-multi.test.js

@@ -6,7 +6,7 @@ import plot from '../src/plot.js';
 
 const events = readDataSync('./test/data/purchase_data.csv');
 
-const data = aq
+const dataset = aq
 	.from(events)
 	.derive({ date: aq.escape(d => new Date(d.date.split('T')[0])) })
 	.groupby('date', 'brand')
@@ -18,10 +18,10 @@ const data = aq
 // 	d.date = utcFormat('%a')(d.date);
 // })
 
-const chart = ds =>{
+const chart = data =>{
 	return Plot.plot({
 		marks: [
-			Plot.line(ds, {
+			Plot.line(data, {
 				x: 'date',
 				y: 'value',
 				stroke: 'brand',
@@ -40,19 +40,19 @@ const chart = ds =>{
 		}
 	});
 }
-await plot(chart, [data], {
+await plot(chart, [dataset], {
 	outPath: 'test/tmp/line-plot.png',
 	view: true,
 	title: 'Line chart'
 });
 
-await plot(chart, [data], {
+await plot(chart, [dataset], {
 	outPath: 'test/tmp/line-plot.png',
 	view: true,
 	title: 'Line chart 2'
 });
 
-await plot(chart, [data], {
+await plot(chart, [dataset], {
 	outPath: 'test/tmp/line-plot.png',
 	view: true,
 	title: 'Line chart3'

test/plot.test.js

@@ -5,18 +5,18 @@ import plot from '../src/plot.js';
 
 const events = readDataSync('./test/data/purchase_data.csv');
 
-const data = aq
+const dataset = aq
 	.from(events)
 	.derive({ date: aq.escape(d => new Date(d.date.split('T')[0])) })
 	.groupby('date', 'brand')
 	.rollup({ value: d => aq.op.sum(d.price_in_usd) })
 	.orderby('date', 'brand')
 	.objects();
 
-const chart = ds => {
+const chart = data => {
 	return Plot.plot({
 		marks: [
-			Plot.line(ds, {
+			Plot.line(data, {
 				x: 'date',
 				y: 'value',
 				stroke: 'brand',
@@ -36,7 +36,7 @@ const chart = ds => {
 	});
 };
 
-await plot(chart, [data], {
+await plot(chart, [dataset], {
 	library: 'observablehq/plot',
 	outPath: 'test/tmp/line-plot.png',
 	view: true,

test/plotly.test.js

@@ -25,18 +25,18 @@ const trace2 = {
 	}
 };
 
-const layout = {
+const chartLayout = {
 	width: 500,
 	height: 500
 };
 
-const data = [trace1, trace2];
+const dataset = [trace1, trace2];
 
-const chart = (ds, l) => {
-	Plotly.newPlot('body', ds, l);
+const chart = (data, layout) => {
+	Plotly.newPlot('body', data, layout);
 };
 
-await plot(chart, [data, layout], {
+await plot(chart, [dataset, chartLayout], {
 	library: 'plotly',
 	outPath: 'test/tmp/plotly_line-plot.png',
 	view: true,

test/vega-lite.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 import plot from '../src/plot.js';
 
-const data = {
+const dataset = {
 	values: [
 		{a: 'A', b: 28},
 		{a: 'B', b: 55},
@@ -15,11 +15,11 @@ const data = {
 	]
 };
 
-const chart = ds => {
+const chart = data => {
 	const spec = {
 		$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
 		description: 'A simple bar chart with embedded data.',
-		data: ds,
+		data,
 		mark: 'bar',
 		encoding: {
 			x: {field: 'a', type: 'ordinal'},
@@ -29,7 +29,7 @@ const chart = ds => {
 	return vegaEmbed('#body', spec);
 }
 
-await plot(chart, [data], {
+await plot(chart, [dataset], {
 	library: 'vega-lite',
 	outPath: 'test/tmp/vega-lite_line-plot.png',
 	view: true,