From 598d215d75ab5f19617df48d9f708df4667b375e Mon Sep 17 00:00:00 2001
From: Cameron Yick <cameron.yick@datadoghq.com>
Date: Sat, 6 Dec 2025 20:06:28 -0500
Subject: [PATCH 1/2] feat: proof of concept for a new graph chart type

---
 packages/extension/snippets/emd.code-snippets |   7 +
 packages/extension/src/props_list.json        |  58 +++++++
 packages/ui/core-components/package.json      |   3 +
 .../src/lib/unsorted/viz/index.js             |   1 +
 .../unsorted/viz/vega/VegaLiteChart.svelte    |  75 +++++++++
 .../unsorted/viz/vega/VegaLiteRenderer.svelte | 152 ++++++++++++++++++
 6 files changed, 296 insertions(+)
 create mode 100644 packages/ui/core-components/src/lib/unsorted/viz/vega/VegaLiteChart.svelte
 create mode 100644 packages/ui/core-components/src/lib/unsorted/viz/vega/VegaLiteRenderer.svelte

diff --git a/packages/extension/snippets/emd.code-snippets b/packages/extension/snippets/emd.code-snippets
index e1258f86dd..aaac3231e7 100644
--- a/packages/extension/snippets/emd.code-snippets
+++ b/packages/extension/snippets/emd.code-snippets
@@ -64,6 +64,13 @@
 		"body": ["<Histogram data={${1:query_name}} x=${2:column}/>\n\n"],
 		"description": "Insert Histogram"
 	},
+	"Vega-Lite Chart": {
+		"prefix": "/VegaLiteChart",
+		"body": [
+			"<VegaLiteChart\n\tdata={${1:query_name}}\n\tspec={${2:{\n\t\ttitle: 'My Vega-Lite Chart',\n\t\tmark: 'bar',\n\t\tencoding: {\n\t\t\tx: { field: '${3:x_column}', type: 'nominal' },\n\t\t\ty: { field: '${4:y_column}', type: 'quantitative' }\n\t\t}\n\t}}}\n/>\n\n"
+		],
+		"description": "Insert Vega-Lite Chart"
+	},
 	"Data Table": {
 		"prefix": "/DataTable",
 		"body": ["<DataTable data={${1:query_name}}/>\n\n"],
diff --git a/packages/extension/src/props_list.json b/packages/extension/src/props_list.json
index cce199bfdf..2e13965452 100644
--- a/packages/extension/src/props_list.json
+++ b/packages/extension/src/props_list.json
@@ -8454,6 +8454,64 @@
 			}
 		]
 	},
+	"VegaLiteChart": {
+		"props": [
+			{
+				"rank": 0,
+				"name": "data",
+				"description": "Query name, wrapped in curly braces",
+				"required": true,
+				"type": "string",
+				"options": "query name",
+				"defaultValue": null
+			},
+			{
+				"rank": 1,
+				"name": "spec",
+				"description": "Vega-Lite specification object literal",
+				"required": true,
+				"type": "string",
+				"options": "Vega-Lite spec",
+				"defaultValue": null
+			},
+			{
+				"rank": 2,
+				"name": "height",
+				"description": "Chart height in pixels",
+				"required": false,
+				"type": "string",
+				"options": "number",
+				"defaultValue": "291"
+			},
+			{
+				"rank": 3,
+				"name": "width",
+				"description": "Chart width (number or CSS size)",
+				"required": false,
+				"type": "string",
+				"options": "number | string",
+				"defaultValue": "\"100%\""
+			},
+			{
+				"rank": 4,
+				"name": "actions",
+				"description": "Toggle the Vega-Embed action menu (download PNG/SVG/JSON)",
+				"required": false,
+				"type": "boolean",
+				"options": "{['true','false']}",
+				"defaultValue": "true"
+			},
+			{
+				"rank": 5,
+				"name": "renderer",
+				"description": "Vega renderer to use (canvas or svg)",
+				"required": false,
+				"type": "string",
+				"options": "{['canvas','svg']}",
+				"defaultValue": null
+			}
+		]
+	},
 	"Value": {
 		"props": [
 			{
diff --git a/packages/ui/core-components/package.json b/packages/ui/core-components/package.json
index f8e001c72d..8ce3c57191 100644
--- a/packages/ui/core-components/package.json
+++ b/packages/ui/core-components/package.json
@@ -66,6 +66,9 @@
 		"ssf": "0.11.2",
 		"tailwind-merge": "^2.3.0",
 		"tailwind-variants": "^0.1.20",
+		"vega": "^5.30.0",
+		"vega-embed": "^6.26.0",
+		"vega-lite": "^5.22.1",
 		"thememirror": "^2.0.1",
 		"tua-body-scroll-lock": "^1.5.0",
 		"yaml": "^2.4.2",
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/index.js b/packages/ui/core-components/src/lib/unsorted/viz/index.js
index 2759ded702..ea444f5e84 100644
--- a/packages/ui/core-components/src/lib/unsorted/viz/index.js
+++ b/packages/ui/core-components/src/lib/unsorted/viz/index.js
@@ -41,3 +41,4 @@ export { default as USMap } from './map/USMap.svelte';
 export { default as Value } from './core/Value.svelte';
 export { default as ValueError } from './core/ValueError.svelte';
 export { default as VennDiagram } from './venn/VennDiagram.svelte';
+export { default as VegaLiteChart } from './vega/VegaLiteChart.svelte';
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/vega/VegaLiteChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/vega/VegaLiteChart.svelte
new file mode 100644
index 0000000000..189be169b8
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/viz/vega/VegaLiteChart.svelte
@@ -0,0 +1,75 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import { Query } from '@evidence-dev/sdk/usql';
+	import { QueryLoad } from '../../../atoms/query-load';
+
+	import EmptyChart from '../core/EmptyChart.svelte';
+	import ErrorChart from '../core/ErrorChart.svelte';
+	import VegaLiteRenderer from './VegaLiteRenderer.svelte';
+
+	export let data = undefined;
+	export let spec = undefined;
+
+	/** @type {number | string | undefined} */
+	export let height = 291;
+
+	/** @type {number | string | undefined} */
+	export let width = '100%';
+
+	export let actions = true;
+	export let renderer = undefined;
+	export let tooltip = undefined;
+	export let description = undefined;
+	export let embedOptions = undefined;
+
+	export let emptySet = undefined;
+	export let emptyMessage = undefined;
+
+	export let title = undefined;
+	export let subtitle = undefined;
+
+	export let chartType = 'Vega-Lite Chart';
+	export let skeletonClass = undefined;
+
+	const toRows = (value) => (Query.isQuery(value) ? Array.from(value) : value);
+
+	const skeletonHeight = () => (typeof height === 'number' ? height : 231);
+</script>
+
+<QueryLoad
+	{data}
+	height={skeletonHeight()}
+	skeletonClass={skeletonClass}
+	let:loaded
+>
+	<EmptyChart
+		slot="empty"
+		{emptyMessage}
+		{emptySet}
+		chartType={chartType}
+	/>
+	<ErrorChart
+		slot="error"
+		title={chartType}
+		error={loaded?.error?.message ?? 'Unable to load Vega-Lite chart data'}
+	/>
+	{@const rows = toRows(loaded)}
+	<VegaLiteRenderer
+		data={rows}
+		{spec}
+		{height}
+		{width}
+		{actions}
+		{renderer}
+		{tooltip}
+		{description}
+		{embedOptions}
+		chartType={chartType}
+		{title}
+		{subtitle}
+	/>
+	<slot />
+</QueryLoad>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/vega/VegaLiteRenderer.svelte b/packages/ui/core-components/src/lib/unsorted/viz/vega/VegaLiteRenderer.svelte
new file mode 100644
index 0000000000..ad011819d7
--- /dev/null
+++ b/packages/ui/core-components/src/lib/unsorted/viz/vega/VegaLiteRenderer.svelte
@@ -0,0 +1,152 @@
+<script>
+	import { afterUpdate, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
+	import vegaEmbed from 'vega-embed';
+
+	import ChartLoading from '../../ui/ChartLoading.svelte';
+	import ErrorChart from '../core/ErrorChart.svelte';
+
+	export let data = undefined;
+	export let spec = undefined;
+
+	/** @type {number | string | undefined} */
+	export let height = 291;
+
+	/** @type {number | string | undefined} */
+	export let width = '100%';
+
+	export let actions = true;
+	export let renderer = undefined;
+	export let tooltip = undefined;
+	export let description = undefined;
+	export let embedOptions = undefined;
+	export let chartType = 'Vega-Lite Chart';
+	export let title = undefined;
+	export let subtitle = undefined;
+
+	let container;
+	let embedResult;
+	let renderError;
+	let pendingRender = false;
+	let renderToken = 0;
+
+	const heightCss = () =>
+		height === undefined ? '291px' : typeof height === 'number' ? `${height}px` : height;
+
+	const widthCss = () =>
+		width === undefined ? '100%' : typeof width === 'number' ? `${width}px` : width;
+
+	const cloneSpec = (input) => {
+		if (!input) return undefined;
+		if (typeof structuredClone === 'function') {
+			return structuredClone(input);
+		}
+		return JSON.parse(JSON.stringify(input));
+	};
+
+	async function renderChart() {
+		if (!browser || !container || !spec) return;
+		const specCopy = cloneSpec(spec);
+		renderError = undefined;
+
+		if (specCopy) {
+			if (title && specCopy.title === undefined) {
+				specCopy.title = title;
+			}
+
+			if (subtitle && specCopy.subtitle === undefined) {
+				specCopy.subtitle = subtitle;
+			}
+
+			if (!specCopy.data && data !== undefined) {
+				specCopy.data = { values: data };
+			}
+
+			if (specCopy.height === undefined && typeof height === 'number') {
+				specCopy.height = height;
+			}
+
+			if (specCopy.width === undefined && typeof width === 'number') {
+				specCopy.width = width;
+			}
+		}
+
+		const options = {
+			actions,
+			renderer,
+			tooltip,
+			description,
+			...(embedOptions ?? {})
+		};
+
+		const token = ++renderToken;
+		try {
+			embedResult?.view?.finalize();
+			const result = await vegaEmbed(container, specCopy, options);
+			if (token !== renderToken) {
+				result.view.finalize();
+				return;
+			}
+			embedResult = result;
+		} catch (err) {
+			console.error('Failed to render VegaLite chart', err);
+			renderError = err;
+		} finally {
+			pendingRender = false;
+		}
+	}
+
+	function scheduleRender() {
+		if (!browser || !container || !spec) return;
+		if (pendingRender) return;
+		pendingRender = true;
+	}
+
+	$: spec, scheduleRender();
+	$: data, scheduleRender();
+	$: actions, scheduleRender();
+	$: renderer, scheduleRender();
+	$: tooltip, scheduleRender();
+	$: description, scheduleRender();
+	$: embedOptions, scheduleRender();
+	$: height, scheduleRender();
+	$: width, scheduleRender();
+	$: container, scheduleRender();
+
+	afterUpdate(() => {
+		if (!pendingRender) return;
+		renderChart();
+	});
+
+	onDestroy(() => {
+		embedResult?.view?.finalize();
+	});
+</script>
+
+{#if !spec}
+	<ErrorChart title={chartType} error="VegaLiteChart requires a spec prop" />
+{:else}
+	<div class="chart-container">
+		{#if !browser}
+			<ChartLoading height={heightCss()} />
+		{:else if renderError}
+			<ErrorChart title={chartType} error={renderError?.message ?? renderError} />
+		{:else}
+			<div
+				class="vega-chart"
+				bind:this={container}
+				style={`height:${heightCss()};width:${widthCss()};`}
+			/>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.chart-container {
+		width: 100%;
+	}
+
+	.vega-chart {
+		overflow: visible;
+	}
+</style>

From cadc8d0d3c73f0d3588ff3e51e9b644b60e2b12c Mon Sep 17 00:00:00 2001
From: Cameron Yick <cameron.yick@datadoghq.com>
Date: Sat, 6 Dec 2025 20:13:36 -0500
Subject: [PATCH 2/2] feat(charts): add minimal example to the docs for a
 vega-lite integration

---
 pnpm-lock.yaml                                | 576 +++++++++++++++++-
 .../components/charts/vega-lite/index.md      | 138 +++++
 .../src/pages/charts/vega-lite/+page.md       |  54 ++
 3 files changed, 760 insertions(+), 8 deletions(-)
 create mode 100644 sites/docs/pages/components/charts/vega-lite/index.md
 create mode 100644 sites/example-project/src/pages/charts/vega-lite/+page.md

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4a556b6204..4c5113d621 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1426,6 +1426,15 @@ importers:
       tua-body-scroll-lock:
         specifier: ^1.5.0
         version: 1.6.0
+      vega:
+        specifier: ^5.30.0
+        version: 5.33.0
+      vega-embed:
+        specifier: ^6.26.0
+        version: 6.29.0(vega-lite@5.23.0)(vega@5.33.0)
+      vega-lite:
+        specifier: ^5.22.1
+        version: 5.23.0(vega@5.33.0)
       yaml:
         specifier: ^2.4.2
         version: 2.8.1
@@ -8447,6 +8456,10 @@ packages:
     resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
     dev: false
 
+  /@types/geojson@7946.0.4:
+    resolution: {integrity: sha512-MHmwBtCb7OCv1DSivz2UNJXPGU/1btAWRKlqJ2saEhVJkpkvqHMMaOpKg0v4sAbDWSQekHGvPVMM8nQ+Jen03Q==}
+    dev: false
+
   /@types/glob@7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
@@ -10496,7 +10509,6 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
-    dev: true
 
   /clone-deep@4.0.1:
     resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
@@ -10692,7 +10704,6 @@ packages:
 
   /commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
-    dev: true
 
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
@@ -10706,7 +10717,6 @@ packages:
   /commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
-    dev: true
 
   /commander@9.5.0:
     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
@@ -10900,6 +10910,138 @@ packages:
     dependencies:
       internmap: 1.0.1
 
+  /d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+    dependencies:
+      internmap: 1.0.1
+    dev: false
+
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+    dependencies:
+      delaunator: 5.0.1
+    dev: false
+
+  /d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+    dev: false
+
+  /d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-geo-projection@4.0.0:
+    resolution: {integrity: sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      commander: 7.2.0
+      d3-array: 2.12.1
+      d3-geo: 3.1.1
+    dev: false
+
+  /d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+    dev: false
+
+  /d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+    dev: false
+
+  /d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-time: 3.1.0
+    dev: false
+
+  /d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
+
   /data-uri-to-buffer@4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
@@ -11153,6 +11295,12 @@ packages:
       esprima: 4.0.1
     dev: false
 
+  /delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+    dependencies:
+      robust-predicates: 3.0.2
+    dev: false
+
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -12208,6 +12356,10 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.8
 
+  /fast-json-patch@3.1.1:
+    resolution: {integrity: sha512-vf6IHUX2SBcA+5/+4883dsIjpBTqmfBjmYiWK1savxQmFk4JfBMLa7ynTYOs1Rolp/T1betJxHiGD3g1Mn8lUQ==}
+    dev: false
+
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -12621,7 +12773,6 @@ packages:
   /get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
-    dev: true
 
   /get-east-asian-width@1.4.0:
     resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
@@ -14394,6 +14545,10 @@ packages:
   /json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  /json-stringify-pretty-compact@4.0.0:
+    resolution: {integrity: sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==}
+    dev: false
+
   /json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -16950,7 +17105,6 @@ packages:
   /require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
@@ -17057,6 +17211,10 @@ packages:
     dependencies:
       glob: 7.2.3
 
+  /robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+    dev: false
+
   /rollup@4.52.5:
     resolution: {integrity: sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -17109,6 +17267,10 @@ packages:
     dependencies:
       queue-microtask: 1.2.3
 
+  /rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+    dev: false
+
   /sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -18561,6 +18723,13 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  /topojson-client@3.1.0:
+    resolution: {integrity: sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+    dev: false
+
   /totalist@2.0.0:
     resolution: {integrity: sha512-+Y17F0YzxfACxTyjfhnJQEe7afPA0GSpYlFkl2VFMxYP7jshQf9gXV7cH47EfToBumFThfKBvfAcoUn6fdNeRQ==}
     engines: {node: '>=6'}
@@ -19134,6 +19303,400 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  /vega-canvas@1.2.7:
+    resolution: {integrity: sha512-OkJ9CACVcN9R5Pi9uF6MZBF06pO6qFpDYHWSKBJsdHP5o724KrsgR6UvbnXFH82FdsiTOff/HqjuaG8C7FL+9Q==}
+    dev: false
+
+  /vega-crossfilter@4.1.3:
+    resolution: {integrity: sha512-nyPJAXAUABc3EocUXvAL1J/IWotZVsApIcvOeZaUdEQEtZ7bt8VtP2nj3CLbHBA8FZZVV+K6SmdwvCOaAD4wFQ==}
+    dependencies:
+      d3-array: 3.2.4
+      vega-dataflow: 5.7.8
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-dataflow@5.7.8:
+    resolution: {integrity: sha512-jrllcIjSYU5Jh130RDR44o/SbUbJndLuoiM9IsKWW+a7HayKnfmbdHWm7MvCrj/YLupFZVojRaS1tTs53EXTdA==}
+    dependencies:
+      vega-format: 1.1.4
+      vega-loader: 4.5.4
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-embed@6.29.0(vega-lite@5.23.0)(vega@5.33.0):
+    resolution: {integrity: sha512-PmlshTLtLFLgWtF/b23T1OwX53AugJ9RZ3qPE2c01VFAbgt3/GSNI/etzA/GzdrkceXFma+FDHNXUppKuM0U6Q==}
+    peerDependencies:
+      vega: ^5.21.0
+      vega-lite: '*'
+    dependencies:
+      fast-json-patch: 3.1.1
+      json-stringify-pretty-compact: 4.0.0
+      semver: 7.7.3
+      tslib: 2.8.1
+      vega: 5.33.0
+      vega-interpreter: 1.2.1
+      vega-lite: 5.23.0(vega@5.33.0)
+      vega-schema-url-parser: 2.2.0
+      vega-themes: 2.15.0(vega-lite@5.23.0)(vega@5.33.0)
+      vega-tooltip: 0.35.2
+    dev: false
+
+  /vega-encode@4.10.2:
+    resolution: {integrity: sha512-fsjEY1VaBAmqwt7Jlpz0dpPtfQFiBdP9igEefvumSpy7XUxOJmDQcRDnT3Qh9ctkv3itfPfI9g8FSnGcv2b4jQ==}
+    dependencies:
+      d3-array: 3.2.4
+      d3-interpolate: 3.0.1
+      vega-dataflow: 5.7.8
+      vega-scale: 7.4.3
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-event-selector@3.0.1:
+    resolution: {integrity: sha512-K5zd7s5tjr1LiOOkjGpcVls8GsH/f2CWCrWcpKy74gTCp+llCdwz0Enqo013ZlGaRNjfgD/o1caJRt3GSaec4A==}
+    dev: false
+
+  /vega-expression@5.1.2:
+    resolution: {integrity: sha512-fFeDTh4UtOxlZWL54jf1ZqJHinyerWq/ROiqrQxqLkNJRJ86RmxYTgXwt65UoZ/l4VUv9eAd2qoJeDEf610Umw==}
+    dependencies:
+      '@types/estree': 1.0.8
+      vega-util: 1.17.4
+    dev: false
+
+  /vega-expression@5.2.1:
+    resolution: {integrity: sha512-9KKbI2q9qTI55NSjD/dVWg3aeCtw+gwyWCiLMM47ha6iXrAN9pQ+EKRJfxOHuoDfCTlJJTaUfnnXgbqm0HEszg==}
+    dependencies:
+      '@types/estree': 1.0.8
+      vega-util: 1.17.4
+    dev: false
+
+  /vega-force@4.2.2:
+    resolution: {integrity: sha512-cHZVaY2VNNIG2RyihhSiWniPd2W9R9kJq0znxzV602CgUVgxEfTKtx/lxnVCn8nNrdKAYrGiqIsBzIeKG1GWHw==}
+    dependencies:
+      d3-force: 3.0.0
+      vega-dataflow: 5.7.8
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-format@1.1.4:
+    resolution: {integrity: sha512-+oz6UvXjQSbweW9P8q+1o2qFYyBYPFax94j6a9PQMnCIWMovFSss1wEElljOT8CEpnHyS15yiGlmz4qbWTQwnQ==}
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-time-format: 4.1.0
+      vega-time: 2.1.4
+      vega-util: 1.17.4
+    dev: false
+
+  /vega-functions@5.18.1:
+    resolution: {integrity: sha512-qEBAbo0jxGGebRvbX1zmxzmjwFz8/UtncRhzwk9/KcI0WudULNmCM1iTu+DGFRnNHdcKi6kUlwJBPIp7zDu3HQ==}
+    dependencies:
+      d3-array: 3.2.4
+      d3-color: 3.1.0
+      d3-geo: 3.1.1
+      vega-dataflow: 5.7.8
+      vega-expression: 5.2.1
+      vega-scale: 7.4.3
+      vega-scenegraph: 4.13.2
+      vega-selections: 5.6.3
+      vega-statistics: 1.9.0
+      vega-time: 2.1.4
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-geo@4.4.3:
+    resolution: {integrity: sha512-+WnnzEPKIU1/xTFUK3EMu2htN35gp9usNZcC0ZFg2up1/Vqu6JyZsX0PIO51oXSIeXn9bwk6VgzlOmJUcx92tA==}
+    dependencies:
+      d3-array: 3.2.4
+      d3-color: 3.1.0
+      d3-geo: 3.1.1
+      vega-canvas: 1.2.7
+      vega-dataflow: 5.7.8
+      vega-projection: 1.6.2
+      vega-statistics: 1.9.0
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-hierarchy@4.1.3:
+    resolution: {integrity: sha512-0Z+TYKRgOEo8XYXnJc2HWg1EGpcbNAhJ9Wpi9ubIbEyEHqIgjCIyFVN8d4nSfsJOcWDzsSmRqohBztxAhOCSaw==}
+    dependencies:
+      d3-hierarchy: 3.1.2
+      vega-dataflow: 5.7.8
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-interpreter@1.2.1:
+    resolution: {integrity: sha512-EMHLGxJ+SWfh1K/fHDRlHEZtLA/2ZNAXItYb5e8CxuAIm/Ha/3DHX/8VlvbTGIciUpuwmcKx4tVhJWlKreQ/Yw==}
+    dependencies:
+      vega-util: 1.17.4
+    dev: false
+
+  /vega-label@1.3.1:
+    resolution: {integrity: sha512-Emx4b5s7pvuRj3fBkAJ/E2snCoZACfKAwxVId7f/4kYVlAYLb5Swq6W8KZHrH4M9Qds1XJRUYW9/Y3cceqzEFA==}
+    dependencies:
+      vega-canvas: 1.2.7
+      vega-dataflow: 5.7.8
+      vega-scenegraph: 4.13.2
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-lite@5.23.0(vega@5.33.0):
+    resolution: {integrity: sha512-l4J6+AWE3DIjvovEoHl2LdtCUkfm4zs8Xxx7INwZEAv+XVb6kR6vIN1gt3t2gN2gs/y4DYTs/RPoTeYAuEg6mA==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      vega: ^5.24.0
+    dependencies:
+      json-stringify-pretty-compact: 4.0.0
+      tslib: 2.8.1
+      vega: 5.33.0
+      vega-event-selector: 3.0.1
+      vega-expression: 5.1.2
+      vega-util: 1.17.4
+      yargs: 17.7.2
+    dev: false
+
+  /vega-loader@4.5.4:
+    resolution: {integrity: sha512-AOJPsDVz009aTdD9hzigUaO/NFmuN1o83rzvZu/g37TJfhU+3DOvgnO0rnqJbnSOfcBkLWER6XghlKS3j77w4A==}
+    dependencies:
+      d3-dsv: 3.0.1
+      node-fetch: 2.7.0
+      topojson-client: 3.1.0
+      vega-format: 1.1.4
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-parser@6.6.0:
+    resolution: {integrity: sha512-jltyrwCTtWeidi/6VotLCybhIl+ehwnzvFWYOdWNUP0z/EskdB64YmawNwjCjzTBMemeiQtY6sJPPbewYqe3Vg==}
+    dependencies:
+      vega-dataflow: 5.7.8
+      vega-event-selector: 3.0.1
+      vega-functions: 5.18.1
+      vega-scale: 7.4.3
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-projection@1.6.2:
+    resolution: {integrity: sha512-3pcVaQL9R3Zfk6PzopLX6awzrQUeYOXJzlfLGP2Xd93mqUepBa6m/reVrTUoSFXA3v9lfK4W/PS2AcVzD/MIcQ==}
+    dependencies:
+      d3-geo: 3.1.1
+      d3-geo-projection: 4.0.0
+      vega-scale: 7.4.3
+    dev: false
+
+  /vega-regression@1.3.1:
+    resolution: {integrity: sha512-AmccF++Z9uw4HNZC/gmkQGe6JsRxTG/R4QpbcSepyMvQN1Rj5KtVqMcmVFP1r3ivM4dYGFuPlzMWvuqp0iKMkQ==}
+    dependencies:
+      d3-array: 3.2.4
+      vega-dataflow: 5.7.8
+      vega-statistics: 1.9.0
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-runtime@6.2.1:
+    resolution: {integrity: sha512-b4eot3tWKCk++INWqot+6sLn3wDTj/HE+tRSbiaf8aecuniPMlwJEK7wWuhVGeW2Ae5n8fI/8TeTViaC94bNHA==}
+    dependencies:
+      vega-dataflow: 5.7.8
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-scale@7.4.3:
+    resolution: {integrity: sha512-f7SSN2YJowtrdkt7nJIR6YYhjDk8oB37q5So2/OxXQv5CBHipFPQSHS1ZVw9vD3V5wLnrZCxC4Ji27gmsTefgA==}
+    dependencies:
+      d3-array: 3.2.4
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      vega-time: 2.1.4
+      vega-util: 1.17.4
+    dev: false
+
+  /vega-scenegraph@4.13.2:
+    resolution: {integrity: sha512-eCutgcLzdUg23HLc6MTZ9pHCdH0hkqSmlbcoznspwT0ajjATk6M09JNyJddiaKR55HuQo03mBWsPeRCd5kOi0g==}
+    dependencies:
+      d3-path: 3.1.0
+      d3-shape: 3.2.0
+      vega-canvas: 1.2.7
+      vega-loader: 4.5.4
+      vega-scale: 7.4.3
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-schema-url-parser@2.2.0:
+    resolution: {integrity: sha512-yAtdBnfYOhECv9YC70H2gEiqfIbVkq09aaE4y/9V/ovEFmH9gPKaEgzIZqgT7PSPQjKhsNkb6jk6XvSoboxOBw==}
+    dev: false
+
+  /vega-selections@5.6.3:
+    resolution: {integrity: sha512-DXd+XVKcIjBAtSCcgtPx7cXuqG/7L98SWoFh6GKNu26EBUyn3zm0GAlZxNLPoI01Jz9Fb3YpSsewk2aIAbM68g==}
+    dependencies:
+      d3-array: 3.2.4
+      vega-expression: 5.2.1
+      vega-util: 1.17.4
+    dev: false
+
+  /vega-statistics@1.9.0:
+    resolution: {integrity: sha512-GAqS7mkatpXcMCQKWtFu1eMUKLUymjInU0O8kXshWaQrVWjPIO2lllZ1VNhdgE0qGj4oOIRRS11kzuijLshGXQ==}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /vega-themes@2.15.0(vega-lite@5.23.0)(vega@5.33.0):
+    resolution: {integrity: sha512-DicRAKG9z+23A+rH/3w3QjJvKnlGhSbbUXGjBvYGseZ1lvj9KQ0BXZ2NS/+MKns59LNpFNHGi9us/wMlci4TOA==}
+    peerDependencies:
+      vega: '*'
+      vega-lite: '*'
+    dependencies:
+      vega: 5.33.0
+      vega-lite: 5.23.0(vega@5.33.0)
+    dev: false
+
+  /vega-time@2.1.4:
+    resolution: {integrity: sha512-DBMRps5myYnSAlvQ+oiX8CycJZjGQNqyGE04xaZrpOgHll7vlvezpET2FnGZC7wS3DsqMcPjnpnI1h7+qJox1Q==}
+    dependencies:
+      d3-array: 3.2.4
+      d3-time: 3.1.0
+      vega-util: 1.17.4
+    dev: false
+
+  /vega-tooltip@0.35.2:
+    resolution: {integrity: sha512-kuYcsAAKYn39ye5wKf2fq1BAxVcjoz0alvKp/G+7BWfIb94J0PHmwrJ5+okGefeStZnbXxINZEOKo7INHaj9GA==}
+    dependencies:
+      vega-util: 1.17.4
+    optionalDependencies:
+      '@rollup/rollup-linux-x64-gnu': 4.52.5
+    dev: false
+
+  /vega-transforms@4.12.1:
+    resolution: {integrity: sha512-Qxo+xeEEftY1jYyKgzOGc9NuW4/MqGm1YPZ5WrL9eXg2G0410Ne+xL/MFIjHF4hRX+3mgFF4Io2hPpfy/thjLg==}
+    dependencies:
+      d3-array: 3.2.4
+      vega-dataflow: 5.7.8
+      vega-statistics: 1.9.0
+      vega-time: 2.1.4
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-typings@1.5.0:
+    resolution: {integrity: sha512-tcZ2HwmiQEOXIGyBMP8sdCnoFoVqHn4KQ4H0MQiHwzFU1hb1EXURhfc+Uamthewk4h/9BICtAM3AFQMjBGpjQA==}
+    dependencies:
+      '@types/geojson': 7946.0.4
+      vega-event-selector: 3.0.1
+      vega-expression: 5.2.1
+      vega-util: 1.17.4
+    dev: false
+
+  /vega-util@1.17.4:
+    resolution: {integrity: sha512-+y3ZW7dEqM8Ck+KRsd+jkMfxfE7MrQxUyIpNjkfhIpGEreym+aTn7XUw1DKXqclr8mqTQvbilPo16B3lnBr0wA==}
+    dev: false
+
+  /vega-view-transforms@4.6.1:
+    resolution: {integrity: sha512-RYlyMJu5kZV4XXjmyTQKADJWDB25SMHsiF+B1rbE1p+pmdQPlp5tGdPl9r5dUJOp3p8mSt/NGI8GPGucmPMxtw==}
+    dependencies:
+      vega-dataflow: 5.7.8
+      vega-scenegraph: 4.13.2
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-view@5.16.0:
+    resolution: {integrity: sha512-Nxp1MEAY+8bphIm+7BeGFzWPoJnX9+hgvze6wqCAPoM69YiyVR0o0VK8M2EESIL+22+Owr0Fdy94hWHnmon5tQ==}
+    dependencies:
+      d3-array: 3.2.4
+      d3-timer: 3.0.1
+      vega-dataflow: 5.7.8
+      vega-format: 1.1.4
+      vega-functions: 5.18.1
+      vega-runtime: 6.2.1
+      vega-scenegraph: 4.13.2
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-voronoi@4.2.4:
+    resolution: {integrity: sha512-lWNimgJAXGeRFu2Pz8axOUqVf1moYhD+5yhBzDSmckE9I5jLOyZc/XvgFTXwFnsVkMd1QW1vxJa+y9yfUblzYw==}
+    dependencies:
+      d3-delaunay: 6.0.4
+      vega-dataflow: 5.7.8
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega-wordcloud@4.1.6:
+    resolution: {integrity: sha512-lFmF3u9/ozU0P+WqPjeThQfZm0PigdbXDwpIUCxczrCXKYJLYFmZuZLZR7cxtmpZ0/yuvRvAJ4g123LXbSZF8A==}
+    dependencies:
+      vega-canvas: 1.2.7
+      vega-dataflow: 5.7.8
+      vega-scale: 7.4.3
+      vega-statistics: 1.9.0
+      vega-util: 1.17.4
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /vega@5.33.0:
+    resolution: {integrity: sha512-jNAGa7TxLojOpMMMrKMXXBos4K6AaLJbCgGDOw1YEkLRjUkh12pcf65J2lMSdEHjcEK47XXjKiOUVZ8L+MniBA==}
+    dependencies:
+      vega-crossfilter: 4.1.3
+      vega-dataflow: 5.7.8
+      vega-encode: 4.10.2
+      vega-event-selector: 3.0.1
+      vega-expression: 5.2.1
+      vega-force: 4.2.2
+      vega-format: 1.1.4
+      vega-functions: 5.18.1
+      vega-geo: 4.4.3
+      vega-hierarchy: 4.1.3
+      vega-label: 1.3.1
+      vega-loader: 4.5.4
+      vega-parser: 6.6.0
+      vega-projection: 1.6.2
+      vega-regression: 1.3.1
+      vega-runtime: 6.2.1
+      vega-scale: 7.4.3
+      vega-scenegraph: 4.13.2
+      vega-statistics: 1.9.0
+      vega-time: 2.1.4
+      vega-transforms: 4.12.1
+      vega-typings: 1.5.0
+      vega-util: 1.17.4
+      vega-view: 5.16.0
+      vega-view-transforms: 4.6.1
+      vega-voronoi: 4.2.4
+      vega-wordcloud: 4.1.6
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /vfile-location@3.2.0:
     resolution: {integrity: sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==}
 
@@ -20001,7 +20564,6 @@ packages:
   /y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
-    dev: true
 
   /yallist@2.1.2:
     resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
@@ -20040,7 +20602,6 @@ packages:
   /yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
-    dev: true
 
   /yargs-unparser@2.0.0:
     resolution: {integrity: sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==}
@@ -20093,7 +20654,6 @@ packages:
       string-width: 4.2.3
       y18n: 5.0.8
       yargs-parser: 21.1.1
-    dev: true
 
   /yauzl@2.10.0:
     resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
diff --git a/sites/docs/pages/components/charts/vega-lite/index.md b/sites/docs/pages/components/charts/vega-lite/index.md
new file mode 100644
index 0000000000..d670eeae34
--- /dev/null
+++ b/sites/docs/pages/components/charts/vega-lite/index.md
@@ -0,0 +1,138 @@
+---
+title: Vega-Lite Chart
+description: Render arbitrary Vega-Lite specifications while still benefiting from Evidence queries, loading states, and theming.
+sidebar_position: 25
+---
+
+Evidence ships a lightweight Vega-Lite wrapper for scenarios where the built-in ECharts components are not flexible enough. Supply a Vega-Lite specification via the `spec` prop and Evidence will inject the rows from your `data` query into the spec (unless you explicitly set `spec.data` yourself).
+
+```sql orders_by_month
+select
+    date_trunc('month', order_datetime) as month,
+    count(*) as num_orders,
+    sum(sales) as sales,
+    sum(sales) / count(*) as aov
+from needful_things.orders
+group by 1
+order by 1
+```
+
+```sql sales_by_category
+select
+    date_trunc('month', order_datetime) as month,
+    category,
+    sum(sales) as sales
+from needful_things.orders
+group by 1, 2
+order by 1, 2
+```
+
+<DocTab>
+    <div slot='preview'>
+        <VegaLiteChart
+            data={orders_by_month}
+            spec={{
+                mark: { type: 'bar', tooltip: true },
+                encoding: {
+                    x: { field: 'month', type: 'temporal', title: 'Month' },
+                    y: { field: 'sales', type: 'quantitative', title: 'Sales (USD)' }
+                }
+            }}
+            title="Monthly Sales"
+            subtitle="Spec defined inline"
+        />
+    </div>
+
+```svelte
+<VegaLiteChart
+    data={orders_by_month}
+    spec={{
+        mark: { type: 'bar', tooltip: true },
+        encoding: {
+            x: { field: 'month', type: 'temporal', title: 'Month' },
+            y: { field: 'sales', type: 'quantitative', title: 'Sales (USD)' }
+        }
+    }}
+    title="Monthly Sales"
+    subtitle="Spec defined inline"
+/>
+```
+</DocTab>
+
+## Examples
+
+### Multi-series line
+
+<DocTab>
+    <div slot='preview'>
+        <VegaLiteChart
+            data={sales_by_category}
+            spec={{
+                mark: { type: 'line', interpolate: 'monotone' },
+                encoding: {
+                    x: { field: 'month', type: 'temporal' },
+                    y: { field: 'sales', type: 'quantitative', title: 'Sales (USD)' },
+                    color: { field: 'category', type: 'nominal', legend: { title: 'Category' } }
+                }
+            }}
+            title="Sales by Category"
+            subtitle="Uses Evidence query rows directly"
+        />
+    </div>
+
+```svelte
+<VegaLiteChart
+    data={sales_by_category}
+    spec={{
+        mark: { type: 'line', interpolate: 'monotone' },
+        encoding: {
+            x: { field: 'month', type: 'temporal' },
+            y: { field: 'sales', type: 'quantitative', title: 'Sales (USD)' },
+            color: { field: 'category', type: 'nominal', legend: { title: 'Category' } }
+        }
+    }}
+    title="Sales by Category"
+    subtitle="Uses Evidence query rows directly"
+/>
+```
+</DocTab>
+
+### Disable toolbar actions
+
+Pass any `vega-embed` options (such as `actions` or `renderer`) straight through as props.
+
+<DocTab>
+    <div slot='preview'>
+        <VegaLiteChart
+            data={orders_by_month}
+            actions={false}
+            renderer="svg"
+            spec={{
+                mark: { type: 'area', line: { color: '#6366f1' }, color: { value: '#c7d2fe' } },
+                encoding: {
+                    x: { field: 'month', type: 'temporal' },
+                    y: { field: 'num_orders', type: 'quantitative', title: 'Orders' }
+                }
+            }}
+        />
+    </div>
+
+```svelte
+<VegaLiteChart
+    data={orders_by_month}
+    actions={false}
+    renderer="svg"
+    spec={{
+        mark: { type: 'area', line: { color: '#6366f1' }, color: { value: '#c7d2fe' } },
+        encoding: {
+            x: { field: 'month', type: 'temporal' },
+            y: { field: 'num_orders', type: 'quantitative', title: 'Orders' }
+        }
+    }}
+/>
+```
+</DocTab>
+
+:::note
+Reference the [Vega-Lite documentation](https://vega.github.io/vega-lite/docs/) for the full spec schema. Evidence simply hands your spec to `vega-embed`, so anything supported upstream will work here.
+:::
diff --git a/sites/example-project/src/pages/charts/vega-lite/+page.md b/sites/example-project/src/pages/charts/vega-lite/+page.md
new file mode 100644
index 0000000000..a95714c2e2
--- /dev/null
+++ b/sites/example-project/src/pages/charts/vega-lite/+page.md
@@ -0,0 +1,54 @@
+---
+title: Vega-Lite Chart
+queries:
+  - orders_by_month: orders_by_month.sql
+  - orders_by_category: orders_by_category.sql
+---
+
+Evidence’s Vega-Lite wrapper lets you drop any [Vega-Lite spec](https://vega.github.io/vega-lite/) straight into your markdown and bind it to a query.
+
+## Simple bar spec
+
+<VegaLiteChart
+    data={orders_by_month}
+    spec={{
+        mark: { type: 'bar', tooltip: true },
+        encoding: {
+            x: { field: 'month', type: 'temporal', title: 'Month' },
+            y: { field: 'sales_usd0k', type: 'quantitative', title: 'Sales (000s USD)' }
+        }
+    }}
+    title="Monthly Sales with Vega-Lite"
+    subtitle="Inline spec, Evidence data"
+/>
+
+## Multi-series line spec
+
+<VegaLiteChart
+    data={orders_by_category}
+    spec={{
+        mark: { type: 'line', interpolate: 'monotone' },
+        encoding: {
+            x: { field: 'month', type: 'temporal', title: 'Month' },
+            y: { field: 'sales_usd0k', type: 'quantitative', title: 'Sales (000s USD)' },
+            color: { field: 'category', type: 'nominal', legend: { title: 'Category' } }
+        }
+    }}
+    title="Category Trendlines"
+/>
+
+## Custom renderer and toolbar
+
+<VegaLiteChart
+    data={orders_by_month}
+    renderer="svg"
+    actions={false}
+    spec={{
+        mark: { type: 'area', interpolate: 'basis', color: { value: '#60a5fa' }, opacity: 0.8 },
+        encoding: {
+            x: { field: 'month', type: 'temporal' },
+            y: { field: 'num_orders_num0', type: 'quantitative', title: 'Orders' }
+        }
+    }}
+    title="Orders Trend (SVG renderer, no toolbar)"
+/>