diff --git a/bun.lockb b/bun.lockb
index 79162bd..8ba9d8a 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 6ab1768..c1479a9 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
 		"vite": "^5.4.11"
 	},
 	"dependencies": {
+		"layercake": "^8.4.2",
 		"lucide-svelte": "^0.460.1",
 		"socket.io": "^4.8.1",
 		"socket.io-client": "^4.8.1"
diff --git a/src/lib/components/layercake/Area.svelte b/src/lib/components/layercake/Area.svelte
new file mode 100644
index 0000000..8631902
--- /dev/null
+++ b/src/lib/components/layercake/Area.svelte
@@ -0,0 +1,40 @@
+<!--
+	@component
+	Generates an SVG area shape using the `area` function from [d3-shape](https://github.com/d3/d3-shape).
+ -->
+<script>
+	import { getContext } from 'svelte';
+
+	const { data, xGet, yGet, xScale, yScale, extents } = getContext('LayerCake');
+
+	/**	@type {String} [fill='#ab00d610'] The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+	export let fill = '#ab00d610';
+
+	$: path =
+		'M' +
+		$data
+			.map((/** @type {any} */ d) => {
+				return $xGet(d) + ',' + $yGet(d);
+			})
+			.join('L');
+
+	/**	@type {String} */
+	let area;
+
+	$: {
+		const yRange = $yScale.range();
+		area =
+			path +
+			('L' +
+				$xScale($extents.x ? $extents.x[1] : 0) +
+				',' +
+				yRange[0] +
+				'L' +
+				$xScale($extents.x ? $extents.x[0] : 0) +
+				',' +
+				yRange[0] +
+				'Z');
+	}
+</script>
+
+<path class="path-area" d={area} {fill} />
diff --git a/src/lib/components/layercake/AxisX.svelte b/src/lib/components/layercake/AxisX.svelte
new file mode 100644
index 0000000..3b051ba
--- /dev/null
+++ b/src/lib/components/layercake/AxisX.svelte
@@ -0,0 +1,119 @@
+<!--
+	@component
+	Generates an SVG x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+ -->
+<script>
+	import { getContext } from 'svelte';
+
+	const { width, height, xScale, yRange } = getContext('LayerCake');
+
+	/** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
+	export let tickMarks = false;
+
+	/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
+	export let gridlines = true;
+
+	/** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+	export let tickMarkLength = 6;
+
+	/** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
+	export let baseline = false;
+
+	/** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
+	export let snapLabels = false;
+
+	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	export let format = d => d;
+
+	/** @type {Number|Array|Function} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+	export let ticks = undefined;
+
+	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+	export let tickGutter = 0;
+
+	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	export let dx = 0;
+
+	/** @type {Number} [dy=12] - Any optional value passed to the `dy` attribute on the text label. */
+	export let dy = 12;
+
+	function textAnchor(i, sl) {
+		if (sl === true) {
+			if (i === 0) {
+				return 'start';
+			}
+			if (i === tickVals.length - 1) {
+				return 'end';
+			}
+		}
+		return 'middle';
+	}
+
+	$: tickLen = tickMarks === true ? tickMarkLength ?? 6 : 0;
+
+	$: isBandwidth = typeof $xScale.bandwidth === 'function';
+
+	$: tickVals = Array.isArray(ticks)
+		? ticks
+		: isBandwidth
+			? $xScale.domain()
+			: typeof ticks === 'function'
+				? ticks($xScale.ticks())
+				: $xScale.ticks(ticks);
+
+	$: halfBand = isBandwidth ? $xScale.bandwidth() / 2 : 0;
+</script>
+
+<g class="axis x-axis" class:snapLabels>
+	{#each tickVals as tick, i (tick)}
+		{#if baseline === true}
+			<line class="baseline" y1={$height} y2={$height} x1="0" x2={$width} />
+		{/if}
+
+		<g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
+			{#if gridlines === true}
+				<line class="gridline" x1={halfBand} x2={halfBand} y1={-$height} y2="0" />
+			{/if}
+			{#if tickMarks === true}
+				<line
+					class="tick-mark"
+					x1={halfBand}
+					x2={halfBand}
+					y1={tickGutter}
+					y2={tickGutter + tickLen}
+				/>
+			{/if}
+			<text x={halfBand} y={tickGutter + tickLen} {dx} {dy} text-anchor={textAnchor(i, snapLabels)}
+				>{format(tick)}</text
+			>
+		</g>
+	{/each}
+</g>
+
+<style>
+	.tick {
+		font-size: 11px;
+	}
+
+	line,
+	.tick line {
+		stroke: #aaa;
+		stroke-dasharray: 2;
+	}
+
+	.tick text {
+		fill: #666;
+	}
+
+	.tick .tick-mark,
+	.baseline {
+		stroke-dasharray: 0;
+	}
+	/* This looks slightly better */
+	.axis.snapLabels .tick:last-child text {
+		transform: translateX(3px);
+	}
+	.axis.snapLabels .tick.tick-0 text {
+		transform: translateX(-3px);
+	}
+</style>
diff --git a/src/lib/components/layercake/AxisY.svelte b/src/lib/components/layercake/AxisY.svelte
new file mode 100644
index 0000000..4f949ec
--- /dev/null
+++ b/src/lib/components/layercake/AxisY.svelte
@@ -0,0 +1,119 @@
+<!--
+	@component
+	Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the tickMarks in the middle of the bandwidth.
+ -->
+<script>
+	import { getContext } from 'svelte';
+
+	const { xRange, yScale, width } = getContext('LayerCake');
+
+	/** @type {Boolean} [tickMarks=false] - Show marks next to the tick label. */
+	export let tickMarks = false;
+
+	/** @type {String} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
+	export let labelPosition = 'even';
+
+	/** @type {Boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
+	export let snapBaselineLabel = false;
+
+	/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
+	export let gridlines = true;
+
+	/** @type {Number} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+	export let tickMarkLength = undefined;
+
+	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	export let format = d => d;
+
+	/** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
+	export let ticks = 4;
+
+	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+	export let tickGutter = 0;
+
+	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	export let dx = 0;
+
+	/** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+	export let dy = 0;
+
+	/** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+	export let charPixelWidth = 7.25;
+
+	$: isBandwidth = typeof $yScale.bandwidth === 'function';
+
+	$: tickVals = Array.isArray(ticks)
+		? ticks
+		: isBandwidth
+			? $yScale.domain()
+			: typeof ticks === 'function'
+				? ticks($yScale.ticks())
+				: $yScale.ticks(ticks);
+
+	function calcStringLength(sum, val) {
+		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
+		return sum + charPixelWidth;
+	}
+
+	$: tickLen =
+		tickMarks === true
+			? labelPosition === 'above'
+				? tickMarkLength ?? widestTickLen
+				: tickMarkLength ?? 6
+			: 0;
+
+	$: widestTickLen = Math.max(
+		10,
+		Math.max(...tickVals.map(d => format(d).toString().split('').reduce(calcStringLength, 0)))
+	);
+
+	$: x1 = -tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen);
+	$: y = isBandwidth ? $yScale.bandwidth() / 2 : 0;
+
+	$: maxTickValPx = Math.max(...tickVals.map($yScale));
+</script>
+
+<g class="axis y-axis">
+	{#each tickVals as tick (tick)}
+		{@const tickValPx = $yScale(tick)}
+		<g class="tick tick-{tick}" transform="translate({$xRange[0]}, {tickValPx})">
+			{#if gridlines === true}
+				<line class="gridline" {x1} x2={$width} y1={y} y2={y}></line>
+			{/if}
+			{#if tickMarks === true}
+				<line class="tick-mark" {x1} x2={x1 + tickLen} y1={y} y2={y}></line>
+			{/if}
+			<text
+				x={x1}
+				{y}
+				dx={dx + (labelPosition === 'even' ? -3 : 0)}
+				text-anchor={labelPosition === 'above' ? 'start' : 'end'}
+				dy={dy +
+					(labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx)
+						? -3
+						: 4)}>{format(tick)}</text
+			>
+		</g>
+	{/each}
+</g>
+
+<style>
+	.tick {
+		font-size: 11px;
+	}
+
+	.tick line {
+		stroke: #aaa;
+	}
+	.tick .gridline {
+		stroke-dasharray: 2;
+	}
+
+	.tick text {
+		fill: #666;
+	}
+
+	.tick.tick-0 line {
+		stroke-dasharray: 0;
+	}
+</style>
diff --git a/src/lib/components/layercake/Labels.svelte b/src/lib/components/layercake/Labels.svelte
new file mode 100644
index 0000000..772bd1a
--- /dev/null
+++ b/src/lib/components/layercake/Labels.svelte
@@ -0,0 +1,38 @@
+<!--
+	@component
+	Adds HTML text labels based on a given list.
+ -->
+<script>
+	import { getContext } from 'svelte';
+
+	const { xGet, yGet } = getContext('LayerCake');
+
+	/** @type {Array<Object>} labels - An array of objects that contain a field containing text label and data fields. */
+	export let labels;
+
+	/** @type {Function} getLabelName= - An accessor function to return the label field on your objects in the `labels` array. */
+	export let getLabelName;
+
+	/** @type {Function} [formatLabelName=d => d] - An optional formatting function. */
+	export let formatLabelName = d => d;
+</script>
+
+{#each labels as d}
+	<div
+		class="label"
+		style="
+      top:{$yGet(d)}px;
+      left:{$xGet(d)}px;
+    "
+	>
+		{formatLabelName(getLabelName(d))}
+	</div>
+{/each}
+
+<style>
+	.label {
+		position: absolute;
+		transform: translate(-50%, -50%);
+		font-size: 12px;
+	}
+</style>
diff --git a/src/lib/components/layercake/Line.svelte b/src/lib/components/layercake/Line.svelte
new file mode 100644
index 0000000..2350a94
--- /dev/null
+++ b/src/lib/components/layercake/Line.svelte
@@ -0,0 +1,31 @@
+<!--
+	@component
+	Generates an SVG area shape using the `area` function from [d3-shape](https://github.com/d3/d3-shape).
+ -->
+<script>
+	import { getContext } from 'svelte';
+
+	const { data, xGet, yGet } = getContext('LayerCake');
+
+	/** @type {String} [stroke='#ab00d6'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+	export let stroke = '#ab00d6';
+
+	$: path =
+		'M' +
+		$data
+			.map((/** @type {any} */ d) => {
+				return $xGet(d) + ',' + $yGet(d);
+			})
+			.join('L');
+</script>
+
+<path class="path-line" d={path} {stroke} />
+
+<style>
+	.path-line {
+		fill: none;
+		stroke-linejoin: round;
+		stroke-linecap: round;
+		stroke-width: 2;
+	}
+</style>
diff --git a/src/lib/components/layercake/Scatter.svelte b/src/lib/components/layercake/Scatter.svelte
new file mode 100644
index 0000000..39d479a
--- /dev/null
+++ b/src/lib/components/layercake/Scatter.svelte
@@ -0,0 +1,65 @@
+<script>
+	import { LayerCake, Svg, Canvas } from 'layercake';
+
+	import ScatterSvg from '../../_components/Scatter.svg.svelte';
+	import ScatterCanvas from '../../_components/Scatter.canvas.svelte';
+	import Voronoi from '../../_components/Voronoi.svelte';
+	import AxisX from '../../_components/AxisX.svelte';
+	import AxisY from '../../_components/AxisY.svelte';
+
+	// This example loads csv data as json using @rollup/plugin-dsv
+	import data from '../../_data/points.csv';
+
+	const xKey = 'myX';
+	const yKey = 'myY';
+
+	data.forEach(d => {
+		d[yKey] = +d[yKey];
+	});
+
+	const r = 3;
+	const padding = 10;
+	const color = '#fff';
+
+	function logEvent(d) {
+		console.log('dispatched event', d, d.detail);
+	}
+</script>
+
+<div class="chart-container">
+	<LayerCake
+		padding={{ top: 10, right: 5, bottom: 20, left: 25 }}
+		x={xKey}
+		y={yKey}
+		xPadding={[padding, padding]}
+		yPadding={[padding, padding]}
+		{data}
+	>
+		<Svg>
+			<AxisX gridlines={false} />
+			<AxisY gridlines={false} ticks={4} />
+		</Svg>
+
+		<Canvas>
+			<ScatterCanvas r={r * 1.5} fill="#0cf" />
+		</Canvas>
+
+		<Svg>
+			<ScatterSvg {r} fill={color} />
+			<Voronoi stroke="#333" on:voronoi-mouseover={logEvent} />
+		</Svg>
+	</LayerCake>
+</div>
+
+<style>
+	/*
+		The wrapper div needs to have an explicit width and height in CSS.
+		It can also be a flexbox child or CSS grid element.
+		The point being it needs dimensions since the <LayerCake> element will
+		expand to fill it.
+	*/
+	.chart-container {
+		width: 100%;
+		height: 250px;
+	}
+</style>
diff --git a/src/routes/stats/+page.svelte b/src/routes/stats/+page.svelte
new file mode 100644
index 0000000..fedc0fb
--- /dev/null
+++ b/src/routes/stats/+page.svelte
@@ -0,0 +1,45 @@
+<script>
+// The library provides a main wrapper component
+// and a bunch empty layout components...
+import { LayerCake, Svg, Html, Canvas } from 'layercake';
+
+// ...that you fill with your own chart components,
+// that live inside your project and which you
+// can copy and paste from here as starting points.
+import AxisX from '$lib/components/layercake/AxisX.svelte';
+import AxisY from '$lib/components/layercake/AxisY.svelte';
+import Line from '$lib/components/layercake/Line.svelte';
+import Scatter from '$lib/components/layercake/Scatter.svelte';
+import Labels from '$lib/components/layercake/Labels.svelte';
+
+const data = [{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 3 }];
+</script>
+
+<style>
+.chart-container {
+    width: 100%;
+    height: 500px;
+}
+</style>
+
+<div class="chart-container">
+    <LayerCake
+        x='x'
+        y='y'
+        {data}
+    >
+        <Svg>
+            <AxisX/>
+            <AxisY/>
+            <Line color='#f0c'/>
+        </Svg>
+
+        <Canvas>
+            <Scatter color='#0fc'/>
+        </Canvas>
+
+        <Html>
+            <Labels/>
+        </Html>
+    </LayerCake>
+</div>