From 9bcff582b046a86debdcff8208c918be30b8484b Mon Sep 17 00:00:00 2001
From: Kamyab Nazari <kamyabnazari@icloud.com>
Date: Sun, 2 Jul 2023 13:19:47 +0200
Subject: [PATCH] adding charts and changing for stats

---
 .../src/lib/components/ActionCardStats.svelte |   2 +-
 frontend/src/lib/components/FileTable.svelte  |  15 +-
 frontend/src/lib/stats/StatsEmbeddings.svelte | 120 ------
 frontend/src/lib/stats/chart-example-data.ts  | 373 ------------------
 .../src/routes/dashboard/stats/+page.svelte   |  29 --
 .../{ => all-chunks-topics}/+page.server.ts   |   0
 .../stats/all-chunks-topics/+page.svelte      | 139 +++++++
 .../stats-all-chunks-topics-data.ts           |  14 +
 .../stats/all-docs-chunks/+page.server.ts     |   8 +
 .../stats/all-docs-chunks/+page.svelte        | 145 +++++++
 .../stats-all-docs-chunks-data.ts             |  49 +++
 .../stats/all-docs-topics/+page.server.ts     |   8 +
 .../stats/all-docs-topics/+page.svelte        | 137 +++++++
 .../stats-all-docs-topics-data.ts             |  26 ++
 .../stats/doc-chunks-topics/+page.server.ts   |   8 +
 .../stats/doc-chunks-topics/+page.svelte      | 131 ++++++
 .../stats-doc-chunks-topics-data.ts           |  14 +
 17 files changed, 692 insertions(+), 526 deletions(-)
 delete mode 100644 frontend/src/lib/stats/StatsEmbeddings.svelte
 delete mode 100644 frontend/src/lib/stats/chart-example-data.ts
 delete mode 100644 frontend/src/routes/dashboard/stats/+page.svelte
 rename frontend/src/routes/dashboard/stats/{ => all-chunks-topics}/+page.server.ts (100%)
 create mode 100644 frontend/src/routes/dashboard/stats/all-chunks-topics/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/stats/all-chunks-topics/stats-all-chunks-topics-data.ts
 create mode 100644 frontend/src/routes/dashboard/stats/all-docs-chunks/+page.server.ts
 create mode 100644 frontend/src/routes/dashboard/stats/all-docs-chunks/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/stats/all-docs-chunks/stats-all-docs-chunks-data.ts
 create mode 100644 frontend/src/routes/dashboard/stats/all-docs-topics/+page.server.ts
 create mode 100644 frontend/src/routes/dashboard/stats/all-docs-topics/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/stats/all-docs-topics/stats-all-docs-topics-data.ts
 create mode 100644 frontend/src/routes/dashboard/stats/doc-chunks-topics/+page.server.ts
 create mode 100644 frontend/src/routes/dashboard/stats/doc-chunks-topics/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/stats/doc-chunks-topics/stats-doc-chunks-topics-data.ts

diff --git a/frontend/src/lib/components/ActionCardStats.svelte b/frontend/src/lib/components/ActionCardStats.svelte
index 819b8da..feab6d7 100644
--- a/frontend/src/lib/components/ActionCardStats.svelte
+++ b/frontend/src/lib/components/ActionCardStats.svelte
@@ -7,7 +7,7 @@
 		<h2 class="card-title">Your Visualizations</h2>
 		<p>find out more with specific stats about your data collected!</p>
 		<div class="card-actions justify-end py-4">
-			<a href="/dashboard/stats">
+			<a href="/dashboard/stats/all-docs-chunks">
 				<button class="btn btn-primary gap-4">
 					<IconCharts style="font-size: x-large" class="text-primary-content" />
 					<span class="hidden sm:inline">View</span>
diff --git a/frontend/src/lib/components/FileTable.svelte b/frontend/src/lib/components/FileTable.svelte
index c3b7c5e..3a84706 100644
--- a/frontend/src/lib/components/FileTable.svelte
+++ b/frontend/src/lib/components/FileTable.svelte
@@ -2,6 +2,7 @@
 	import IconDownload from '~icons/solar/download-square-outline';
 	import IconBin from '~icons/solar/trash-bin-trash-outline';
 	import IconRead from '~icons/solar/chat-unread-outline';
+	import IconStats from '~icons/solar/graph-up-outline';
 	import { currentUser, pb } from '$lib/pocketbase';
 	import type { Record } from 'pocketbase';
 	import { onMount } from 'svelte';
@@ -68,8 +69,9 @@
 				<th class="w-1/12" />
 				<th class="w-4/12">Name</th>
 				<th class="w-2/12">Type</th>
+				<th class="w-2/12">Topic</th>
 				<th class="w-3/12">Create Date</th>
-				<th class="w-2/12">Actions</th>
+				<th class="w-3/12">Actions</th>
 			</tr>
 		</thead>
 		<tbody class="bg-base-100">
@@ -91,8 +93,10 @@
 						</div>
 					</td>
 					<td>
-						<span class="text-sm">{document.type}</span><br />
-						<span class="badge badge-ghost badge-sm">PDF</span>
+						<span class="badge badge-ghost badge-sm">{document.type}</span>
+					</td>
+					<td>
+						<span class="badge badge-sm badge-info">Sports</span>
 					</td>
 					<td>{document.created.slice(0, 19)}</td>
 					<th
@@ -102,6 +106,11 @@
 									><IconRead style="font-size: x-large;" /></button
 								></a
 							>
+							<a href="/dashboard/stats/doc-chunks-topics"
+								><button class="btn btn-square btn-success"
+									><IconStats style="font-size: x-large;" /></button
+								></a
+							>
 							<button class="btn btn-square btn-info" on:click={() => downloadDocument(document)}
 								><IconDownload style="font-size: x-large;" />
 							</button>
diff --git a/frontend/src/lib/stats/StatsEmbeddings.svelte b/frontend/src/lib/stats/StatsEmbeddings.svelte
deleted file mode 100644
index cd16898..0000000
--- a/frontend/src/lib/stats/StatsEmbeddings.svelte
+++ /dev/null
@@ -1,120 +0,0 @@
-<script lang="ts">
-	import { hierarchy, interpolateHcl, interpolateZoom, pack, scaleLinear, transition } from 'd3';
-	import data from './chart-example-data'; // or pass data to component as prop
-
-	const width = 650; //the outer width of the chart, in pixels
-	const height = width; // the outer height of the chart, in pixels
-	const margin = 20; //the overall margin between the circle packs to the viewport edge
-	const backgroundColor = 'transparent'; // the background color of the chart
-	const fontSize = 15; //the font size of the text labels
-
-	const color = scaleLinear()
-		.domain([0, 5])
-		.range(['hsl(152,80%,80%)', 'hsl(228,30%,40%)'])
-		.interpolate(interpolateHcl);
-
-	const packFunc = (pData) =>
-		pack()
-			.size([width - margin, height - margin])
-			.padding(3)(
-			hierarchy(pData)
-				.sum((d) => d.value)
-				.sort((a, b) => b.value - a.value)
-		);
-
-	const root = packFunc(data);
-	let activeFocus = root;
-	let view;
-	let activeZoomK = (width / root.r) * 2;
-	let activeZoomA = root.x;
-	let activeZoomB = root.y;
-
-	const inactiveZoomTo = (v) => {
-		activeZoomK = width / v[2];
-		view = v;
-		activeZoomA = v[0];
-		activeZoomB = v[1];
-	};
-
-	inactiveZoomTo([root.x, root.y, root.r * 2 + margin]);
-
-	const zoom = (d, e) => {
-		e.stopPropagation();
-		const activeFocus0 = activeFocus;
-
-		activeFocus = d;
-
-		transition()
-			.duration(750)
-			.tween('zoom', () => {
-				var i = interpolateZoom(view, [activeFocus.x, activeFocus.y, activeFocus.r * 2 + margin]);
-				return function (t) {
-					inactiveZoomTo(i(t));
-				};
-			});
-	};
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<svg {width} {height} style="background: {backgroundColor};" on:click={(e) => zoom(root, e)}>
-	<g transform="translate({width / 2},{height / 2})">
-		{#each root.descendants().slice(1) as rootData}
-			<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<circle
-				class={rootData.parent
-					? rootData.children
-						? 'node'
-						: 'node node--leaf'
-					: 'node node--root'}
-				fill={rootData.children ? color(rootData.depth) : 'null'}
-				on:click={(e) => {
-					if (activeFocus !== rootData) zoom(rootData, e);
-				}}
-				transform="translate({(rootData.x - activeZoomA) * activeZoomK},{(rootData.y -
-					activeZoomB) *
-					activeZoomK})"
-				r={rootData.r * activeZoomK}
-			/>
-		{/each}
-		{#each root.descendants() as rootDes}
-			<text
-				font-size="{fontSize}px"
-				class="label"
-				style="fill-opacity: {rootDes.parent === activeFocus ? 1 : 0}; display: {rootDes.parent ===
-				activeFocus
-					? 'inline'
-					: 'none'};"
-				transform="translate({(rootDes.x - activeZoomA) * activeZoomK},{(rootDes.y - activeZoomB) *
-					activeZoomK})">{rootDes.data.name}</text
-			>
-		{/each}
-	</g>
-</svg>
-
-<style>
-	.node {
-		cursor: pointer;
-	}
-
-	.node:hover {
-		stroke: #000;
-		stroke-width: 1.5px;
-	}
-
-	.node--leaf {
-		fill: white;
-	}
-
-	.label {
-		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-		text-anchor: middle;
-		text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
-	}
-
-	.label,
-	.node--root,
-	.node--leaf {
-		pointer-events: none;
-	}
-</style>
diff --git a/frontend/src/lib/stats/chart-example-data.ts b/frontend/src/lib/stats/chart-example-data.ts
deleted file mode 100644
index 14cebfc..0000000
--- a/frontend/src/lib/stats/chart-example-data.ts
+++ /dev/null
@@ -1,373 +0,0 @@
-export default {
-	name: 'flare',
-	children: [
-		{
-			name: 'analytics',
-			children: [
-				{
-					name: 'cluster',
-					children: [
-						{ name: 'AgglomerativeCluster', value: 3938 },
-						{ name: 'CommunityStructure', value: 3812 },
-						{ name: 'HierarchicalCluster', value: 6714 },
-						{ name: 'MergeEdge', value: 743 }
-					]
-				},
-				{
-					name: 'graph',
-					children: [
-						{ name: 'BetweennessCentrality', value: 3534 },
-						{ name: 'LinkDistance', value: 5731 },
-						{ name: 'MaxFlowMinCut', value: 7840 },
-						{ name: 'ShortestPaths', value: 5914 },
-						{ name: 'SpanningTree', value: 3416 }
-					]
-				},
-				{
-					name: 'optimization',
-					children: [{ name: 'AspectRatioBanker', value: 7074 }]
-				}
-			]
-		},
-		{
-			name: 'animate',
-			children: [
-				{ name: 'Easing', value: 17010 },
-				{ name: 'FunctionSequence', value: 5842 },
-				{
-					name: 'interpolate',
-					children: [
-						{ name: 'ArrayInterpolator', value: 1983 },
-						{ name: 'ColorInterpolator', value: 2047 },
-						{ name: 'DateInterpolator', value: 1375 },
-						{ name: 'Interpolator', value: 8746 },
-						{ name: 'MatrixInterpolator', value: 2202 },
-						{ name: 'NumberInterpolator', value: 1382 },
-						{ name: 'ObjectInterpolator', value: 1629 },
-						{ name: 'PointInterpolator', value: 1675 },
-						{ name: 'RectangleInterpolator', value: 2042 }
-					]
-				},
-				{ name: 'ISchedulable', value: 1041 },
-				{ name: 'Parallel', value: 5176 },
-				{ name: 'Pause', value: 449 },
-				{ name: 'Scheduler', value: 5593 },
-				{ name: 'Sequence', value: 5534 },
-				{ name: 'Transition', value: 9201 },
-				{ name: 'Transitioner', value: 19975 },
-				{ name: 'TransitionEvent', value: 1116 },
-				{ name: 'Tween', value: 6006 }
-			]
-		},
-		{
-			name: 'data',
-			children: [
-				{
-					name: 'converters',
-					children: [
-						{ name: 'Converters', value: 721 },
-						{ name: 'DelimitedTextConverter', value: 4294 },
-						{ name: 'GraphMLConverter', value: 9800 },
-						{ name: 'IDataConverter', value: 1314 },
-						{ name: 'JSONConverter', value: 2220 }
-					]
-				},
-				{ name: 'DataField', value: 1759 },
-				{ name: 'DataSchema', value: 2165 },
-				{ name: 'DataSet', value: 586 },
-				{ name: 'DataSource', value: 3331 },
-				{ name: 'DataTable', value: 772 },
-				{ name: 'DataUtil', value: 3322 }
-			]
-		},
-		{
-			name: 'display',
-			children: [
-				{ name: 'DirtySprite', value: 8833 },
-				{ name: 'LineSprite', value: 1732 },
-				{ name: 'RectSprite', value: 3623 },
-				{ name: 'TextSprite', value: 10066 }
-			]
-		},
-		{ name: 'flex', children: [{ name: 'FlareVis', value: 4116 }] },
-		{
-			name: 'physics',
-			children: [
-				{ name: 'DragForce', value: 1082 },
-				{ name: 'GravityForce', value: 1336 },
-				{ name: 'IForce', value: 319 },
-				{ name: 'NBodyForce', value: 10498 },
-				{ name: 'Particle', value: 2822 },
-				{ name: 'Simulation', value: 9983 },
-				{ name: 'Spring', value: 2213 },
-				{ name: 'SpringForce', value: 1681 }
-			]
-		},
-		{
-			name: 'query',
-			children: [
-				{ name: 'AggregateExpression', value: 1616 },
-				{ name: 'And', value: 1027 },
-				{ name: 'Arithmetic', value: 3891 },
-				{ name: 'Average', value: 891 },
-				{ name: 'BinaryExpression', value: 2893 },
-				{ name: 'Comparison', value: 5103 },
-				{ name: 'CompositeExpression', value: 3677 },
-				{ name: 'Count', value: 781 },
-				{ name: 'DateUtil', value: 4141 },
-				{ name: 'Distinct', value: 933 },
-				{ name: 'Expression', value: 5130 },
-				{ name: 'ExpressionIterator', value: 3617 },
-				{ name: 'Fn', value: 3240 },
-				{ name: 'If', value: 2732 },
-				{ name: 'IsA', value: 2039 },
-				{ name: 'Literal', value: 1214 },
-				{ name: 'Match', value: 3748 },
-				{ name: 'Maximum', value: 843 },
-				{
-					name: 'methods',
-					children: [
-						{ name: 'add', value: 593 },
-						{ name: 'and', value: 330 },
-						{ name: 'average', value: 287 },
-						{ name: 'count', value: 277 },
-						{ name: 'distinct', value: 292 },
-						{ name: 'div', value: 595 },
-						{ name: 'eq', value: 594 },
-						{ name: 'fn', value: 460 },
-						{ name: 'gt', value: 603 },
-						{ name: 'gte', value: 625 },
-						{ name: 'iff', value: 748 },
-						{ name: 'isa', value: 461 },
-						{ name: 'lt', value: 597 },
-						{ name: 'lte', value: 619 },
-						{ name: 'max', value: 283 },
-						{ name: 'min', value: 283 },
-						{ name: 'mod', value: 591 },
-						{ name: 'mul', value: 603 },
-						{ name: 'neq', value: 599 },
-						{ name: 'not', value: 386 },
-						{ name: 'or', value: 323 },
-						{ name: 'orderby', value: 307 },
-						{ name: 'range', value: 772 },
-						{ name: 'select', value: 296 },
-						{ name: 'stddev', value: 363 },
-						{ name: 'sub', value: 600 },
-						{ name: 'sum', value: 280 },
-						{ name: 'update', value: 307 },
-						{ name: 'variance', value: 335 },
-						{ name: 'where', value: 299 },
-						{ name: 'xor', value: 354 },
-						{ name: '_', value: 264 }
-					]
-				},
-				{ name: 'Minimum', value: 843 },
-				{ name: 'Not', value: 1554 },
-				{ name: 'Or', value: 970 },
-				{ name: 'Query', value: 13896 },
-				{ name: 'Range', value: 1594 },
-				{ name: 'StringUtil', value: 4130 },
-				{ name: 'Sum', value: 791 },
-				{ name: 'Variable', value: 1124 },
-				{ name: 'Variance', value: 1876 },
-				{ name: 'Xor', value: 1101 }
-			]
-		},
-		{
-			name: 'scale',
-			children: [
-				{ name: 'IScaleMap', value: 2105 },
-				{ name: 'LinearScale', value: 1316 },
-				{ name: 'LogScale', value: 3151 },
-				{ name: 'OrdinalScale', value: 3770 },
-				{ name: 'QuantileScale', value: 2435 },
-				{ name: 'QuantitativeScale', value: 4839 },
-				{ name: 'RootScale', value: 1756 },
-				{ name: 'Scale', value: 4268 },
-				{ name: 'ScaleType', value: 1821 },
-				{ name: 'TimeScale', value: 5833 }
-			]
-		},
-		{
-			name: 'util',
-			children: [
-				{ name: 'Arrays', value: 8258 },
-				{ name: 'Colors', value: 10001 },
-				{ name: 'Dates', value: 8217 },
-				{ name: 'Displays', value: 12555 },
-				{ name: 'Filter', value: 2324 },
-				{ name: 'Geometry', value: 10993 },
-				{
-					name: 'heap',
-					children: [
-						{ name: 'FibonacciHeap', value: 9354 },
-						{ name: 'HeapNode', value: 1233 }
-					]
-				},
-				{ name: 'IEvaluable', value: 335 },
-				{ name: 'IPredicate', value: 383 },
-				{ name: 'IValueProxy', value: 874 },
-				{
-					name: 'math',
-					children: [
-						{ name: 'DenseMatrix', value: 3165 },
-						{ name: 'IMatrix', value: 2815 },
-						{ name: 'SparseMatrix', value: 3366 }
-					]
-				},
-				{ name: 'Maths', value: 17705 },
-				{ name: 'Orientation', value: 1486 },
-				{
-					name: 'palette',
-					children: [
-						{ name: 'ColorPalette', value: 6367 },
-						{ name: 'Palette', value: 1229 },
-						{ name: 'ShapePalette', value: 2059 },
-						{ name: 'SizePalette', value: 2291 }
-					]
-				},
-				{ name: 'Property', value: 5559 },
-				{ name: 'Shapes', value: 19118 },
-				{ name: 'Sort', value: 6887 },
-				{ name: 'Stats', value: 6557 },
-				{ name: 'Strings', value: 22026 }
-			]
-		},
-		{
-			name: 'vis',
-			children: [
-				{
-					name: 'axis',
-					children: [
-						{ name: 'Axes', value: 1302 },
-						{ name: 'Axis', value: 24593 },
-						{ name: 'AxisGridLine', value: 652 },
-						{ name: 'AxisLabel', value: 636 },
-						{ name: 'CartesianAxes', value: 6703 }
-					]
-				},
-				{
-					name: 'controls',
-					children: [
-						{ name: 'AnchorControl', value: 2138 },
-						{ name: 'ClickControl', value: 3824 },
-						{ name: 'Control', value: 1353 },
-						{ name: 'ControlList', value: 4665 },
-						{ name: 'DragControl', value: 2649 },
-						{ name: 'ExpandControl', value: 2832 },
-						{ name: 'HoverControl', value: 4896 },
-						{ name: 'IControl', value: 763 },
-						{ name: 'PanZoomControl', value: 5222 },
-						{ name: 'SelectionControl', value: 7862 },
-						{ name: 'TooltipControl', value: 8435 }
-					]
-				},
-				{
-					name: 'data',
-					children: [
-						{ name: 'Data', value: 20544 },
-						{ name: 'DataList', value: 19788 },
-						{ name: 'DataSprite', value: 10349 },
-						{ name: 'EdgeSprite', value: 3301 },
-						{ name: 'NodeSprite', value: 19382 },
-						{
-							name: 'render',
-							children: [
-								{ name: 'ArrowType', value: 698 },
-								{ name: 'EdgeRenderer', value: 5569 },
-								{ name: 'IRenderer', value: 353 },
-								{ name: 'ShapeRenderer', value: 2247 }
-							]
-						},
-						{ name: 'ScaleBinding', value: 11275 },
-						{ name: 'Tree', value: 7147 },
-						{ name: 'TreeBuilder', value: 9930 }
-					]
-				},
-				{
-					name: 'events',
-					children: [
-						{ name: 'DataEvent', value: 2313 },
-						{ name: 'SelectionEvent', value: 1880 },
-						{ name: 'TooltipEvent', value: 1701 },
-						{ name: 'VisualizationEvent', value: 1117 }
-					]
-				},
-				{
-					name: 'legend',
-					children: [
-						{ name: 'Legend', value: 20859 },
-						{ name: 'LegendItem', value: 4614 },
-						{ name: 'LegendRange', value: 10530 }
-					]
-				},
-				{
-					name: 'operator',
-					children: [
-						{
-							name: 'distortion',
-							children: [
-								{ name: 'BifocalDistortion', value: 4461 },
-								{ name: 'Distortion', value: 6314 },
-								{ name: 'FisheyeDistortion', value: 3444 }
-							]
-						},
-						{
-							name: 'encoder',
-							children: [
-								{ name: 'ColorEncoder', value: 3179 },
-								{ name: 'Encoder', value: 4060 },
-								{ name: 'PropertyEncoder', value: 4138 },
-								{ name: 'ShapeEncoder', value: 1690 },
-								{ name: 'SizeEncoder', value: 1830 }
-							]
-						},
-						{
-							name: 'filter',
-							children: [
-								{ name: 'FisheyeTreeFilter', value: 5219 },
-								{ name: 'GraphDistanceFilter', value: 3165 },
-								{ name: 'VisibilityFilter', value: 3509 }
-							]
-						},
-						{ name: 'IOperator', value: 1286 },
-						{
-							name: 'label',
-							children: [
-								{ name: 'Labeler', value: 9956 },
-								{ name: 'RadialLabeler', value: 3899 },
-								{ name: 'StackedAreaLabeler', value: 3202 }
-							]
-						},
-						{
-							name: 'layout',
-							children: [
-								{ name: 'AxisLayout', value: 6725 },
-								{ name: 'BundledEdgeRouter', value: 3727 },
-								{ name: 'CircleLayout', value: 9317 },
-								{ name: 'CirclePackingLayout', value: 12003 },
-								{ name: 'DendrogramLayout', value: 4853 },
-								{ name: 'ForceDirectedLayout', value: 8411 },
-								{ name: 'IcicleTreeLayout', value: 4864 },
-								{ name: 'IndentedTreeLayout', value: 3174 },
-								{ name: 'Layout', value: 7881 },
-								{ name: 'NodeLinkTreeLayout', value: 12870 },
-								{ name: 'PieLayout', value: 2728 },
-								{ name: 'RadialTreeLayout', value: 12348 },
-								{ name: 'RandomLayout', value: 870 },
-								{ name: 'StackedAreaLayout', value: 9121 },
-								{ name: 'TreeMapLayout', value: 9191 }
-							]
-						},
-						{ name: 'Operator', value: 2490 },
-						{ name: 'OperatorList', value: 5248 },
-						{ name: 'OperatorSequence', value: 4190 },
-						{ name: 'OperatorSwitch', value: 2581 },
-						{ name: 'SortOperator', value: 2023 }
-					]
-				},
-				{ name: 'Visualization', value: 16540 }
-			]
-		}
-	]
-};
diff --git a/frontend/src/routes/dashboard/stats/+page.svelte b/frontend/src/routes/dashboard/stats/+page.svelte
deleted file mode 100644
index 50c1487..0000000
--- a/frontend/src/routes/dashboard/stats/+page.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import IconClose from '~icons/solar/alt-arrow-left-bold';
-	import StatsEmbeddings from '$lib/stats/StatsEmbeddings.svelte';
-</script>
-
-<div class="mx-auto flex min-h-full max-w-7xl flex-col gap-8 p-8">
-	<div class="text-center">
-		<div class="text-left">
-			<a href="/dashboard">
-				<button class="btn btn-link text-primary"
-					><IconClose style="font-size: x-large;" />close</button
-				>
-			</a>
-		</div>
-		<div class="self-center">
-			<h1 class="mb-8 text-2xl font-bold md:text-3xl">Visualizations</h1>
-		</div>
-		<div class="flex flex-row justify-center">
-			<div class="tabs tabs-boxed mb-4">
-				<a href="/dashboard" class="tab tab-lg">All</a>
-				<a href="/dashboard" class="tab tab-lg tab-active">Embeddings</a>
-				<a href="/dashboard" class="tab tab-lg">Categories</a>
-			</div>
-		</div>
-		<div class="flex min-h-full items-center justify-center overflow-auto rounded-xl border-2">
-			<StatsEmbeddings />
-		</div>
-	</div>
-</div>
diff --git a/frontend/src/routes/dashboard/stats/+page.server.ts b/frontend/src/routes/dashboard/stats/all-chunks-topics/+page.server.ts
similarity index 100%
rename from frontend/src/routes/dashboard/stats/+page.server.ts
rename to frontend/src/routes/dashboard/stats/all-chunks-topics/+page.server.ts
diff --git a/frontend/src/routes/dashboard/stats/all-chunks-topics/+page.svelte b/frontend/src/routes/dashboard/stats/all-chunks-topics/+page.svelte
new file mode 100644
index 0000000..944bbb4
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/all-chunks-topics/+page.svelte
@@ -0,0 +1,139 @@
+<script>
+	import IconClose from '~icons/solar/alt-arrow-left-bold';
+
+	// @ts-ignore
+	import { InternSet, hierarchy, pack, range, scaleOrdinal, schemeTableau10 } from 'd3';
+	import data from './stats-all-chunks-topics-data'; // or pass data to component as prop
+
+	const width = 700; //the margin top, bottom, left, right margin offset relative to the radius
+	const padding = 3; // the all padding all around each circle, in pixels
+	const margin = 1; // the all margin all around, in pixels
+	const textColor = 'black'; //the color of the text
+	const fill = '#ccc'; // a static fill color, if no group channel is specified
+	const fillOpacity = 0.9; // the fill opacity of the bubbles
+	const strokeColor = 'none'; // a static stroke around the bubbles
+	const strokeWidth = 1; // the stroke width around the bubbles, if any
+	const strokeOpacity = 1; // the stroke opacity around the bubbles, if any
+	const height = width; // the outer height of the chart, in pixels
+	const marginLeft = margin; // the left margin, in pixels
+	const marginRight = margin; // the right margin, in pixels
+	const marginTop = margin; // the top margin, in pixels
+	const marginBottom = margin; // the bottom margin, in pixels
+
+	//update link to the desired address path or remove.
+	const link = (d) =>
+		`https://github.com/prefuse/Flare/blob/master/flare/src/${d.id.replace(/\./g, '/')}.as`;
+
+	// Compute the values.
+	const dVals = data.map((el) => el);
+	const vVals = data.map((el) => el.value);
+	const gVals = data.map((el) => el.id.split('.')[1]);
+	const iVals = range(vVals.length).filter((i) => vVals[i] > 0);
+
+	let groups = iVals.map((i) => gVals[i]);
+	groups = new InternSet(groups);
+
+	const colorScale = scaleOrdinal(groups, schemeTableau10);
+
+	// // Compute labels.
+	const lVals = data.map((el) =>
+		[
+			// @ts-ignore
+			...el.id
+				.split('.')
+				.pop()
+				.split(/(?=[A-Z][a-z])/g),
+			el.value.toLocaleString('en')
+		].join('\n')
+	);
+	const tVals = data.map((el) => `${el.id}\n${el.value.toLocaleString('en')}`);
+
+	const uid = `O-${Math.random().toString(16).slice(2)}`;
+
+	const root = pack()
+		.size([width - marginLeft - marginRight, height - marginTop - marginBottom])
+		.padding(padding)(hierarchy({ children: iVals }).sum((i) => vVals[i]));
+</script>
+
+<div class="mx-auto flex min-h-full max-w-7xl flex-col gap-8 p-8">
+	<div class="text-center">
+		<div class="text-left">
+			<a href="/dashboard">
+				<button class="btn btn-link text-primary"
+					><IconClose style="font-size: x-large;" />close</button
+				>
+			</a>
+		</div>
+		<div class="self-center">
+			<h1 class="mb-8 text-2xl font-bold md:text-3xl">Visualizations</h1>
+		</div>
+		<div class="flex flex-row justify-center">
+			<div class="tabs tabs-boxed mb-4">
+				<a href="/dashboard/stats/all-docs-chunks" class="tab tab-lg">All</a>
+				<a href="/dashboard/stats/all-docs-topics" class="tab tab-lg">Document Topics</a>
+				<a href="/dashboard/stats/all-chunks-topics" class="tab tab-lg tab-active"
+					>Embeddings Topics</a
+				>
+			</div>
+		</div>
+		<div class="flex min-h-full items-center justify-center overflow-auto rounded-xl border-2">
+			<svg {width} {height} viewBox="{-marginLeft} {-marginTop} {width} {height}" fill={textColor}>
+				{#each root.leaves() as leaf, i}
+					<a
+						href={link === null ? null : link(dVals[leaf.data])}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<g class="node" transform="translate({leaf.x},{leaf.y})">
+							<circle
+								id="node-{i}"
+								stroke={strokeColor}
+								stroke-width={strokeWidth}
+								stroke-opacity={strokeOpacity}
+								fill={gVals ? colorScale(gVals[leaf.data]) : fill == null ? 'none' : fill}
+								fill-opacity={fillOpacity}
+								r={leaf.r}
+							>
+								<title>{tVals[i]}</title>
+							</circle>
+							<clipPath id={`${uid}-clip-${leaf.data}`}>
+								<circle r={leaf.r} />
+							</clipPath>
+							<text clip-path={`url(${new URL(`#${uid}-clip-${leaf.data}`, location)})`}>
+								{#each `${lVals[leaf.data]}`.split(/\n/g) as subtext, j}
+									<tspan
+										x="0"
+										y={`${j - `${lVals[leaf.data]}`.split(/\n/g).length / 2 + 0.85}em`}
+										fill-opacity={j === `${lVals[leaf.data]}`.split(/\n/g).length - 1 ? 0.7 : null}
+										font-size={leaf.r * 0.3}
+									>
+										{subtext}
+									</tspan>
+								{/each}
+							</text>
+						</g>
+					</a>
+				{/each}
+			</svg>
+		</div>
+	</div>
+</div>
+
+<style>
+	svg {
+		max-width: 100%;
+		height: auto;
+		height: intrinsic;
+		font-size: 10;
+		font-family: sans-serif;
+		text-anchor: middle;
+	}
+
+	.node {
+		cursor: pointer;
+	}
+
+	.node:hover {
+		font-weight: 700;
+	}
+</style>
diff --git a/frontend/src/routes/dashboard/stats/all-chunks-topics/stats-all-chunks-topics-data.ts b/frontend/src/routes/dashboard/stats/all-chunks-topics/stats-all-chunks-topics-data.ts
new file mode 100644
index 0000000..fb5fa2e
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/all-chunks-topics/stats-all-chunks-topics-data.ts
@@ -0,0 +1,14 @@
+export default [
+	{
+		id: 'Introduction',
+		value: 525
+	},
+	{
+		id: 'Conclusion',
+		value: 1231
+	},
+	{
+		id: 'Personal',
+		value: 34
+	}
+];
diff --git a/frontend/src/routes/dashboard/stats/all-docs-chunks/+page.server.ts b/frontend/src/routes/dashboard/stats/all-docs-chunks/+page.server.ts
new file mode 100644
index 0000000..66def6d
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/all-docs-chunks/+page.server.ts
@@ -0,0 +1,8 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!locals.user) {
+		throw redirect(303, '/login');
+	}
+};
diff --git a/frontend/src/routes/dashboard/stats/all-docs-chunks/+page.svelte b/frontend/src/routes/dashboard/stats/all-docs-chunks/+page.svelte
new file mode 100644
index 0000000..3ba3661
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/all-docs-chunks/+page.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+	import IconClose from '~icons/solar/alt-arrow-left-bold';
+
+	import { hierarchy, interpolateHcl, interpolateZoom, pack, scaleLinear, transition } from 'd3';
+	import data from './stats-all-docs-chunks-data'; // or pass data to component as prop
+
+	const width = 650; //the outer width of the chart, in pixels
+	const height = width; // the outer height of the chart, in pixels
+	const margin = 20; //the overall margin between the circle packs to the viewport edge
+	const backgroundColor = 'transparent'; // the background color of the chart
+	const fontSize = 15; //the font size of the text labels
+
+	const color = scaleLinear()
+		.domain([0, 5])
+		.range(['hsl(152,80%,80%)', 'hsl(228,30%,40%)'])
+		.interpolate(interpolateHcl);
+
+	const packFunc = (pData) =>
+		pack()
+			.size([width - margin, height - margin])
+			.padding(3)(
+			hierarchy(pData)
+				.sum((d) => d.value)
+				.sort((a, b) => b.value - a.value)
+		);
+
+	const root = packFunc(data);
+	let activeFocus = root;
+	let view;
+	let activeZoomK = (width / root.r) * 2;
+	let activeZoomA = root.x;
+	let activeZoomB = root.y;
+
+	const inactiveZoomTo = (v) => {
+		activeZoomK = width / v[2];
+		view = v;
+		activeZoomA = v[0];
+		activeZoomB = v[1];
+	};
+
+	inactiveZoomTo([root.x, root.y, root.r * 2 + margin]);
+
+	const zoom = (d, e) => {
+		e.stopPropagation();
+		const activeFocus0 = activeFocus;
+
+		activeFocus = d;
+
+		transition()
+			.duration(750)
+			.tween('zoom', () => {
+				var i = interpolateZoom(view, [activeFocus.x, activeFocus.y, activeFocus.r * 2 + margin]);
+				return function (t) {
+					inactiveZoomTo(i(t));
+				};
+			});
+	};
+</script>
+
+<div class="mx-auto flex min-h-full max-w-7xl flex-col gap-8 p-8">
+	<div class="text-center">
+		<div class="text-left">
+			<a href="/dashboard">
+				<button class="btn btn-link text-primary"
+					><IconClose style="font-size: x-large;" />close</button
+				>
+			</a>
+		</div>
+		<div class="self-center">
+			<h1 class="mb-8 text-2xl font-bold md:text-3xl">Visualizations</h1>
+		</div>
+		<div class="flex flex-row justify-center">
+			<div class="tabs tabs-boxed mb-4">
+				<a href="/dashboard/stats/all-docs-chunks" class="tab tab-lg tab-active">All</a>
+				<a href="/dashboard/stats/all-docs-topics" class="tab tab-lg">Document Topics</a>
+				<a href="/dashboard/stats/all-chunks-topics" class="tab tab-lg">Embeddings Topics</a>
+			</div>
+		</div>
+		<div class="flex min-h-full items-center justify-center overflow-auto rounded-xl border-2">
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<svg {width} {height} style="background: {backgroundColor};" on:click={(e) => zoom(root, e)}>
+				<g transform="translate({width / 2},{height / 2})">
+					{#each root.descendants().slice(1) as rootData}
+						<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<circle
+							class={rootData.parent
+								? rootData.children
+									? 'node'
+									: 'node node--leaf'
+								: 'node node--root'}
+							fill={rootData.children ? color(rootData.depth) : 'null'}
+							on:click={(e) => {
+								if (activeFocus !== rootData) zoom(rootData, e);
+							}}
+							transform="translate({(rootData.x - activeZoomA) * activeZoomK},{(rootData.y -
+								activeZoomB) *
+								activeZoomK})"
+							r={rootData.r * activeZoomK}
+						/>
+					{/each}
+					{#each root.descendants() as rootDes}
+						<text
+							font-size="{fontSize}px"
+							class="label"
+							style="fill-opacity: {rootDes.parent === activeFocus
+								? 1
+								: 0}; display: {rootDes.parent === activeFocus ? 'inline' : 'none'};"
+							transform="translate({(rootDes.x - activeZoomA) * activeZoomK},{(rootDes.y -
+								activeZoomB) *
+								activeZoomK})">{rootDes.data.name}</text
+						>
+					{/each}
+				</g>
+			</svg>
+		</div>
+	</div>
+</div>
+
+<style>
+	.node {
+		cursor: pointer;
+	}
+
+	.node:hover {
+		stroke: #000;
+		stroke-width: 1.5px;
+	}
+
+	.node--leaf {
+		fill: white;
+	}
+
+	.label {
+		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+		text-anchor: middle;
+		text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
+	}
+
+	.label,
+	.node--root,
+	.node--leaf {
+		pointer-events: none;
+	}
+</style>
diff --git a/frontend/src/routes/dashboard/stats/all-docs-chunks/stats-all-docs-chunks-data.ts b/frontend/src/routes/dashboard/stats/all-docs-chunks/stats-all-docs-chunks-data.ts
new file mode 100644
index 0000000..d02e557
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/all-docs-chunks/stats-all-docs-chunks-data.ts
@@ -0,0 +1,49 @@
+export default {
+	name: 'parent-name',
+	children: [
+		{
+			name: 'document-example-name-1',
+			document_topic: 'document-topic',
+			children: [
+				{
+					name: 'document-chunk-topics',
+					children: [
+						{ name: 'introduction', value: 231 },
+						{ name: 'conclusion', value: 52 },
+						{ name: 'chunk-topic', value: 123 },
+						{ name: 'chunk-topic', value: 323 }
+					]
+				}
+			]
+		},
+		{
+			name: 'document-example-name-2',
+			document_topic: 'document-topic',
+			children: [
+				{
+					name: 'document-chunk-topics',
+					children: [
+						{ name: 'introduction', value: 123 },
+						{ name: 'conclusion', value: 231 },
+						{ name: 'chunk-topic', value: 15 },
+						{ name: 'chunk-topic', value: 1231 }
+					]
+				}
+			]
+		},
+		{
+			name: 'document-example-name-3',
+			document_topic: 'document-topic',
+			children: [
+				{
+					name: 'document-chunk-topics',
+					children: [
+						{ name: 'introduction', value: 123 },
+						{ name: 'conclusion', value: 42 },
+						{ name: 'chunk-topic', value: 542 }
+					]
+				}
+			]
+		}
+	]
+};
diff --git a/frontend/src/routes/dashboard/stats/all-docs-topics/+page.server.ts b/frontend/src/routes/dashboard/stats/all-docs-topics/+page.server.ts
new file mode 100644
index 0000000..66def6d
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/all-docs-topics/+page.server.ts
@@ -0,0 +1,8 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!locals.user) {
+		throw redirect(303, '/login');
+	}
+};
diff --git a/frontend/src/routes/dashboard/stats/all-docs-topics/+page.svelte b/frontend/src/routes/dashboard/stats/all-docs-topics/+page.svelte
new file mode 100644
index 0000000..f73f2f1
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/all-docs-topics/+page.svelte
@@ -0,0 +1,137 @@
+<script>
+	import IconClose from '~icons/solar/alt-arrow-left-bold';
+
+	// @ts-ignore
+	import { InternSet, hierarchy, pack, range, scaleOrdinal, schemeTableau10 } from 'd3';
+	import data from './stats-all-docs-topics-data'; // or pass data to component as prop
+
+	const width = 700; //the margin top, bottom, left, right margin offset relative to the radius
+	const padding = 3; // the all padding all around each circle, in pixels
+	const margin = 1; // the all margin all around, in pixels
+	const textColor = 'black'; //the color of the text
+	const fill = '#ccc'; // a static fill color, if no group channel is specified
+	const fillOpacity = 0.9; // the fill opacity of the bubbles
+	const strokeColor = 'none'; // a static stroke around the bubbles
+	const strokeWidth = 1; // the stroke width around the bubbles, if any
+	const strokeOpacity = 1; // the stroke opacity around the bubbles, if any
+	const height = width; // the outer height of the chart, in pixels
+	const marginLeft = margin; // the left margin, in pixels
+	const marginRight = margin; // the right margin, in pixels
+	const marginTop = margin; // the top margin, in pixels
+	const marginBottom = margin; // the bottom margin, in pixels
+
+	//update link to the desired address path or remove.
+	const link = (d) =>
+		`https://github.com/prefuse/Flare/blob/master/flare/src/${d.id.replace(/\./g, '/')}.as`;
+
+	// Compute the values.
+	const dVals = data.map((el) => el);
+	const vVals = data.map((el) => el.value);
+	const gVals = data.map((el) => el.id.split('.')[1]);
+	const iVals = range(vVals.length).filter((i) => vVals[i] > 0);
+
+	let groups = iVals.map((i) => gVals[i]);
+	groups = new InternSet(groups);
+
+	const colorScale = scaleOrdinal(groups, schemeTableau10);
+
+	// // Compute labels.
+	const lVals = data.map((el) =>
+		[
+			// @ts-ignore
+			...el.id
+				.split('.')
+				.pop()
+				.split(/(?=[A-Z][a-z])/g),
+			el.value.toLocaleString('en')
+		].join('\n')
+	);
+	const tVals = data.map((el) => `${el.id}\n${el.value.toLocaleString('en')}`);
+
+	const uid = `O-${Math.random().toString(16).slice(2)}`;
+
+	const root = pack()
+		.size([width - marginLeft - marginRight, height - marginTop - marginBottom])
+		.padding(padding)(hierarchy({ children: iVals }).sum((i) => vVals[i]));
+</script>
+
+<div class="mx-auto flex min-h-full max-w-7xl flex-col gap-8 p-8">
+	<div class="text-center">
+		<div class="text-left">
+			<a href="/dashboard">
+				<button class="btn btn-link text-primary"
+					><IconClose style="font-size: x-large;" />close</button
+				>
+			</a>
+		</div>
+		<div class="self-center">
+			<h1 class="mb-8 text-2xl font-bold md:text-3xl">Visualizations</h1>
+		</div>
+		<div class="flex flex-row justify-center">
+			<div class="tabs tabs-boxed mb-4">
+				<a href="/dashboard/stats/all-docs-chunks" class="tab tab-lg">All</a>
+				<a href="/dashboard/stats/all-docs-topics" class="tab tab-lg tab-active">Document Topics</a>
+				<a href="/dashboard/stats/all-chunks-topics" class="tab tab-lg">Embeddings Topics</a>
+			</div>
+		</div>
+		<div class="flex min-h-full items-center justify-center overflow-auto rounded-xl border-2">
+			<svg {width} {height} viewBox="{-marginLeft} {-marginTop} {width} {height}" fill={textColor}>
+				{#each root.leaves() as leaf, i}
+					<a
+						href={link === null ? null : link(dVals[leaf.data])}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<g class="node" transform="translate({leaf.x},{leaf.y})">
+							<circle
+								id="node-{i}"
+								stroke={strokeColor}
+								stroke-width={strokeWidth}
+								stroke-opacity={strokeOpacity}
+								fill={gVals ? colorScale(gVals[leaf.data]) : fill == null ? 'none' : fill}
+								fill-opacity={fillOpacity}
+								r={leaf.r}
+							>
+								<title>{tVals[i]}</title>
+							</circle>
+							<clipPath id={`${uid}-clip-${leaf.data}`}>
+								<circle r={leaf.r} />
+							</clipPath>
+							<text clip-path={`url(${new URL(`#${uid}-clip-${leaf.data}`, location)})`}>
+								{#each `${lVals[leaf.data]}`.split(/\n/g) as subtext, j}
+									<tspan
+										x="0"
+										y={`${j - `${lVals[leaf.data]}`.split(/\n/g).length / 2 + 0.85}em`}
+										fill-opacity={j === `${lVals[leaf.data]}`.split(/\n/g).length - 1 ? 0.7 : null}
+										font-size={leaf.r * 0.3}
+									>
+										{subtext}
+									</tspan>
+								{/each}
+							</text>
+						</g>
+					</a>
+				{/each}
+			</svg>
+		</div>
+	</div>
+</div>
+
+<style>
+	svg {
+		max-width: 100%;
+		height: auto;
+		height: intrinsic;
+		font-size: 10;
+		font-family: sans-serif;
+		text-anchor: middle;
+	}
+
+	.node {
+		cursor: pointer;
+	}
+
+	.node:hover {
+		font-weight: 700;
+	}
+</style>
diff --git a/frontend/src/routes/dashboard/stats/all-docs-topics/stats-all-docs-topics-data.ts b/frontend/src/routes/dashboard/stats/all-docs-topics/stats-all-docs-topics-data.ts
new file mode 100644
index 0000000..c1cd32d
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/all-docs-topics/stats-all-docs-topics-data.ts
@@ -0,0 +1,26 @@
+export default [
+	{
+		id: 'Sports',
+		value: 525
+	},
+	{
+		id: 'Scientific',
+		value: 1231
+	},
+	{
+		id: 'Topic',
+		value: 34
+	},
+	{
+		id: 'Topic',
+		value: 213
+	},
+	{
+		id: 'Topic',
+		value: 1231
+	},
+	{
+		id: 'Topic',
+		value: 51
+	}
+];
diff --git a/frontend/src/routes/dashboard/stats/doc-chunks-topics/+page.server.ts b/frontend/src/routes/dashboard/stats/doc-chunks-topics/+page.server.ts
new file mode 100644
index 0000000..66def6d
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/doc-chunks-topics/+page.server.ts
@@ -0,0 +1,8 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!locals.user) {
+		throw redirect(303, '/login');
+	}
+};
diff --git a/frontend/src/routes/dashboard/stats/doc-chunks-topics/+page.svelte b/frontend/src/routes/dashboard/stats/doc-chunks-topics/+page.svelte
new file mode 100644
index 0000000..0d34c30
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/doc-chunks-topics/+page.svelte
@@ -0,0 +1,131 @@
+<script>
+	import IconClose from '~icons/solar/alt-arrow-left-bold';
+
+	// @ts-ignore
+	import { InternSet, hierarchy, pack, range, scaleOrdinal, schemeTableau10 } from 'd3';
+	import data from './stats-doc-chunks-topics-data'; // or pass data to component as prop
+
+	const width = 700; //the margin top, bottom, left, right margin offset relative to the radius
+	const padding = 3; // the all padding all around each circle, in pixels
+	const margin = 1; // the all margin all around, in pixels
+	const textColor = 'black'; //the color of the text
+	const fill = '#ccc'; // a static fill color, if no group channel is specified
+	const fillOpacity = 0.9; // the fill opacity of the bubbles
+	const strokeColor = 'none'; // a static stroke around the bubbles
+	const strokeWidth = 1; // the stroke width around the bubbles, if any
+	const strokeOpacity = 1; // the stroke opacity around the bubbles, if any
+	const height = width; // the outer height of the chart, in pixels
+	const marginLeft = margin; // the left margin, in pixels
+	const marginRight = margin; // the right margin, in pixels
+	const marginTop = margin; // the top margin, in pixels
+	const marginBottom = margin; // the bottom margin, in pixels
+
+	//update link to the desired address path or remove.
+	const link = (d) =>
+		`https://github.com/prefuse/Flare/blob/master/flare/src/${d.id.replace(/\./g, '/')}.as`;
+
+	// Compute the values.
+	const dVals = data.map((el) => el);
+	const vVals = data.map((el) => el.value);
+	const gVals = data.map((el) => el.id.split('.')[1]);
+	const iVals = range(vVals.length).filter((i) => vVals[i] > 0);
+
+	let groups = iVals.map((i) => gVals[i]);
+	groups = new InternSet(groups);
+
+	const colorScale = scaleOrdinal(groups, schemeTableau10);
+
+	// // Compute labels.
+	const lVals = data.map((el) =>
+		[
+			// @ts-ignore
+			...el.id
+				.split('.')
+				.pop()
+				.split(/(?=[A-Z][a-z])/g),
+			el.value.toLocaleString('en')
+		].join('\n')
+	);
+	const tVals = data.map((el) => `${el.id}\n${el.value.toLocaleString('en')}`);
+
+	const uid = `O-${Math.random().toString(16).slice(2)}`;
+
+	const root = pack()
+		.size([width - marginLeft - marginRight, height - marginTop - marginBottom])
+		.padding(padding)(hierarchy({ children: iVals }).sum((i) => vVals[i]));
+</script>
+
+<div class="mx-auto flex min-h-full max-w-7xl flex-col gap-8 p-8">
+	<div class="text-center">
+		<div class="text-left">
+			<a href="/dashboard">
+				<button class="btn btn-link text-primary"
+					><IconClose style="font-size: x-large;" />close</button
+				>
+			</a>
+		</div>
+		<div class="self-center">
+			<h1 class="mb-8 text-2xl font-bold md:text-3xl">Visualizations</h1>
+			<h2 class="mb-8 text-lg font-bold md:text-2xl">All you Document Chunks</h2>
+		</div>
+		<div class="flex min-h-full items-center justify-center overflow-auto rounded-xl border-2">
+			<svg {width} {height} viewBox="{-marginLeft} {-marginTop} {width} {height}" fill={textColor}>
+				{#each root.leaves() as leaf, i}
+					<a
+						href={link === null ? null : link(dVals[leaf.data])}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<g class="node" transform="translate({leaf.x},{leaf.y})">
+							<circle
+								id="node-{i}"
+								stroke={strokeColor}
+								stroke-width={strokeWidth}
+								stroke-opacity={strokeOpacity}
+								fill={gVals ? colorScale(gVals[leaf.data]) : fill == null ? 'none' : fill}
+								fill-opacity={fillOpacity}
+								r={leaf.r}
+							>
+								<title>{tVals[i]}</title>
+							</circle>
+							<clipPath id={`${uid}-clip-${leaf.data}`}>
+								<circle r={leaf.r} />
+							</clipPath>
+							<text clip-path={`url(${new URL(`#${uid}-clip-${leaf.data}`, location)})`}>
+								{#each `${lVals[leaf.data]}`.split(/\n/g) as subtext, j}
+									<tspan
+										x="0"
+										y={`${j - `${lVals[leaf.data]}`.split(/\n/g).length / 2 + 0.85}em`}
+										fill-opacity={j === `${lVals[leaf.data]}`.split(/\n/g).length - 1 ? 0.7 : null}
+										font-size={leaf.r * 0.3}
+									>
+										{subtext}
+									</tspan>
+								{/each}
+							</text>
+						</g>
+					</a>
+				{/each}
+			</svg>
+		</div>
+	</div>
+</div>
+
+<style>
+	svg {
+		max-width: 100%;
+		height: auto;
+		height: intrinsic;
+		font-size: 10;
+		font-family: sans-serif;
+		text-anchor: middle;
+	}
+
+	.node {
+		cursor: pointer;
+	}
+
+	.node:hover {
+		font-weight: 700;
+	}
+</style>
diff --git a/frontend/src/routes/dashboard/stats/doc-chunks-topics/stats-doc-chunks-topics-data.ts b/frontend/src/routes/dashboard/stats/doc-chunks-topics/stats-doc-chunks-topics-data.ts
new file mode 100644
index 0000000..fb5fa2e
--- /dev/null
+++ b/frontend/src/routes/dashboard/stats/doc-chunks-topics/stats-doc-chunks-topics-data.ts
@@ -0,0 +1,14 @@
+export default [
+	{
+		id: 'Introduction',
+		value: 525
+	},
+	{
+		id: 'Conclusion',
+		value: 1231
+	},
+	{
+		id: 'Personal',
+		value: 34
+	}
+];