├── .npmrc
├── src
    ├── global.d.ts
    ├── routes
    │   ├── __layout.svelte
    │   ├── index.svelte
    │   └── examples
    │   │   ├── line-area.svelte
    │   │   └── bar.svelte
    ├── lib
    │   └── layercake-components
    │   │   ├── ArrowheadDef.svelte
    │   │   ├── Bar.svelte
    │   │   ├── Line.svelte
    │   │   ├── AreaStacked.svelte
    │   │   ├── Tooltip.svelte
    │   │   ├── Area.svelte
    │   │   ├── Scatter.svg.svelte
    │   │   ├── BarStacked.svelte
    │   │   ├── ColumnStacked.svelte
    │   │   ├── MultiLine.svelte
    │   │   ├── MapPoints.svelte
    │   │   ├── ColumnLinear.svelte
    │   │   ├── Annotations.svelte
    │   │   ├── Scatter.html.svelte
    │   │   ├── Voronoi.svelte
    │   │   ├── Column.svelte
    │   │   ├── ClevelandDotPlot.svelte
    │   │   ├── Labels.svelte
    │   │   ├── Scatter.canvas.svelte
    │   │   ├── SmallMultipleWrapper.svelte
    │   │   ├── SmallMultipleWrapper.percent-range.svelte
    │   │   ├── BeeswarmForce.svelte
    │   │   ├── ClevelandDotPlot.html.svelte
    │   │   ├── QuadTree.svelte
    │   │   ├── QuadTree.percent-range.svelte
    │   │   ├── BeeswarmForce.html.svelte
    │   │   ├── AxisRadial.svelte
    │   │   ├── Map.canvas.svelte
    │   │   ├── Radar.svelte
    │   │   ├── Sankey.svelte
    │   │   ├── Key.svelte
    │   │   ├── AxisY.svelte
    │   │   ├── Beeswarm.svelte
    │   │   ├── CalendarMonth.svelte
    │   │   ├── AxisX.html.svelte
    │   │   ├── CirclePackForce.svelte
    │   │   ├── Beeswarm.html.svelte
    │   │   ├── AxisX.svelte
    │   │   ├── AxisY.html.svelte
    │   │   ├── Map.svg.svelte
    │   │   ├── SyncedBrushWrapper.svelte
    │   │   ├── SharedTooltip.svelte
    │   │   ├── SyncedBrushWrapper.percent-range.svelte
    │   │   ├── SharedTooltip.percent-range.svelte
    │   │   ├── ForceDirectedGraph.svelte
    │   │   ├── Arrows.svelte
    │   │   ├── Brush.svelte
    │   │   ├── CirclePack.html.svelte
    │   │   └── Scatter.webgl.svelte
    └── app.html
├── .gitignore
├── jsconfig.json
├── svelte.config.js
├── package.json
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@sveltejs/kit" />
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /.svelte-kit
4 | /build
5 | /functions
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"baseUrl": ".",
 4 | 		"paths": {
 5 | 			"$lib/*": ["src/lib/*"]
 6 | 		}
 7 | 	},
 8 | 	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
1 | <ul>
2 |   <li><a href="/">Home</a></li>
3 |   <li><a href="/examples/bar">Bar example</a></li>
4 |   <li><a href="/examples/line-area">Line + area example</a></li>
5 | </ul>
6 | 
7 | <slot />
8 | 


--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
1 | <h2>Layercake + Svelte kit template</h2>
2 | 
3 | <p>Visit <a href="https://layercake.graphics/">layercake.graphics</a> for more information.</p>
4 | 
5 | <p>This repo mostly for trying to get the examples to work with SvelteKit, pull requests welcome with more examples!</p>
6 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/ArrowheadDef.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let fill = '#000';
 3 | </script>
 4 | 
 5 | <defs>
 6 |   <marker id="arrowhead" viewBox="-10 -10 20 20" markerWidth="17" markerHeight="17" orient="auto">
 7 |     <path d="M-6,-6 L 0,0 L -6,6" fill="{fill}"/>
 8 |   </marker>
 9 | </defs>
10 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="/favicon.ico" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 		%svelte.head%
 8 | 	</head>
 9 | 	<body>
10 | 		<div id="svelte">%svelte.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('@sveltejs/kit').Config} */
 2 | const config = {
 3 |   kit: {
 4 |     target: '#svelte',
 5 | 
 6 |     vite: {
 7 |       ssr: {
 8 |         noExternal: []
 9 |       },
10 |       optimizeDeps: {
11 |         include: ['layercake']
12 |       }
13 |     }
14 |   }
15 | };
16 | 
17 | export default config;


--------------------------------------------------------------------------------
/src/lib/layercake-components/Bar.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
 5 | 	export let fill = '#00bbff';
 6 | </script>
 7 | 
 8 | <g class="bar-group">
 9 | 	{#each $data as d, i}
10 | 		<rect
11 | 			class='group-rect'
12 | 			data-id="{i}"
13 | 			x="{$xScale.range()[0]}"
14 | 			y="{$yGet(d)}"
15 | 			height={$yScale.bandwidth()}
16 | 			width="{$xGet(d)}"
17 | 			{fill}
18 | 		></rect>
19 | 	{/each}
20 | </g>
21 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Line.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { data, xGet, yGet } = getContext('LayerCake');
 5 | 
 6 | 	export let stroke = '#ab00d6';
 7 | 
 8 | 	$: path = 'M' + $data
 9 | 		.map(d => {
10 | 			return $xGet(d) + ',' + $yGet(d);
11 | 		})
12 | 		.join('L');
13 | </script>
14 | 
15 | <path class='path-line' d='{path}' {stroke}></path>
16 | 
17 | <style>
18 | 	.path-line {
19 | 		fill: none;
20 | 		stroke-linejoin: round;
21 | 		stroke-linecap: round;
22 | 		stroke-width: 2;
23 | 	}
24 | </style>
25 | 
26 | 
27 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/AreaStacked.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { area } from 'd3-shape';
 3 | 	import { scaleOrdinal } from 'd3-scale';
 4 | 
 5 | 	import { getContext } from 'svelte';
 6 | 
 7 | 	const { data, xGet, yScale, zGet } = getContext('LayerCake');
 8 | 
 9 | 	$: areaGen = area()
10 | 		.x(d => $xGet(d))
11 | 		.y0(d => $yScale(d[0]))
12 | 		.y1(d => $yScale(d[1]));
13 | </script>
14 | 
15 | <g class="area-group">
16 | 	{#each $data as d}
17 | 		<path
18 | 			class='path-area'
19 | 			d='{areaGen(d)}'
20 | 			fill='{$zGet(d)}'
21 | 		></path>
22 | 	{/each}
23 | </g>
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "layercake-sveltekit-template",
 3 |   "version": "0.0.1",
 4 |   "scripts": {
 5 |     "dev": "svelte-kit dev",
 6 |     "build": "svelte-kit build",
 7 |     "preview": "svelte-kit preview"
 8 |   },
 9 |   "devDependencies": {
10 |     "@sveltejs/kit": "next",
11 |     "svelte-preprocess": "^4.7.3",
12 |     "svelte": "^3.34.0",
13 |     "d3-color": "^2.0.0",
14 |     "d3-format": "^2.0.0",
15 |     "d3-interpolate": "^2.0.1",
16 |     "d3-time-format": "^3.0.0"
17 |   },
18 |   "type": "module",
19 |   "dependencies": {
20 |     "layercake": "^4.1.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Tooltip.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let evt = {};
 3 |   export let offset = 35;
 4 | </script>
 5 | 
 6 | <style>
 7 |   .tooltip {
 8 |     position: absolute;
 9 |     width: 150px;
10 |     border: 1px solid #ccc;
11 | 		font-size: 13px;
12 |     background: rgba(255, 255, 255, 0.85);
13 |     transform: translate(-50%, -100%);
14 |     padding: 5px;
15 |     z-index: 15;
16 |   }
17 | </style>
18 | 
19 | {#if evt.detail}
20 |   <div
21 |     class="tooltip"
22 |     style="
23 |       top:{evt.detail.e.layerY - offset}px;
24 |       left:{evt.detail.e.layerX}px;
25 |     "
26 |   >
27 |     <slot detail={evt.detail}></slot>
28 |   </div>
29 | {/if}
30 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Area.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { data, xGet, yGet, xScale, yScale, extents } = getContext('LayerCake');
 5 | 
 6 | 	export let fill = '#ab00d610';
 7 | 
 8 | 	$: path = 'M' + $data
 9 | 		.map(d => {
10 | 			return $xGet(d) + ',' + $yGet(d);
11 | 		})
12 | 		.join('L');
13 | 
14 | 	let area;
15 | 
16 | 	$: {
17 | 		const yRange = $yScale.range();
18 | 		area = path + (
19 | 			'L' + $xScale($extents.x ? $extents.x[1] : 0) + ',' + yRange[0] +
20 | 			'L' + $xScale($extents.x ? $extents.x[0] : 0) + ',' + yRange[0] +
21 | 			'Z'
22 | 		);
23 | 	}
24 | </script>
25 | 
26 | <path class='path-area' d='{area}' {fill}></path>
27 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Scatter.svg.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
 5 | 
 6 | 	export let r = 5;
 7 | 	export let fill = '#000';
 8 | 	export let stroke = '#0cf';
 9 | 	export let strokeWidth = 0;
10 | 	export let dx = 0;
11 | 	export let dy = 0;
12 | </script>
13 | 
14 | <g class="scatter-group">
15 | 	{#each $data as d}
16 | 		<circle
17 | 			cx={$xGet(d) + (typeof dx === 'function' ? dx($xScale) : dx)}
18 | 			cy={$yGet(d) + (typeof dy === 'function' ? dy($yScale) : dy)}
19 | 			{r}
20 | 			{fill}
21 | 			{stroke}
22 | 			stroke-width={strokeWidth}
23 | 		/>
24 | 	{/each}
25 | </g>
26 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/BarStacked.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { scaleOrdinal } from 'd3-scale';
 4 | 
 5 | 	const { data, xGet, yGet, zGet, yScale, custom } = getContext('LayerCake');
 6 | 
 7 | 	$: columnWidth = d => {
 8 | 		const xVals = $xGet(d);
 9 | 		return xVals[1] - xVals[0];
10 | 	};
11 | </script>
12 | 
13 | <g class="bar-group">
14 | 	{#each $data as series}
15 | 		{#each series as d, i}
16 | 			<rect
17 | 				class='group-rect'
18 | 				data-id="{i}"
19 | 				x="{$xGet(d)[0]}"
20 | 				y="{$yGet(d)}"
21 | 				height={$yScale.bandwidth()}
22 | 				width="{columnWidth(d)}"
23 | 				fill={$zGet(series)}
24 | 			></rect>
25 | 		{/each}
26 | 	{/each}
27 | </g>
28 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/ColumnStacked.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { scaleOrdinal } from 'd3-scale';
 4 | 
 5 | 	const { data, xGet, yGet, zGet, xScale, custom } = getContext('LayerCake');
 6 | 
 7 | 	$: columnHeight = d => {
 8 | 		const yVals = $yGet(d);
 9 | 		return yVals[0] - yVals[1];
10 | 	};
11 | </script>
12 | 
13 | <g class="column-group">
14 | 	{#each $data as series, i}
15 | 		{#each series as d}
16 | 			<rect
17 | 				class='group-rect'
18 | 				data-id="{i}"
19 | 				x="{$xGet(d)}"
20 | 				y="{$yGet(d)[1]}"
21 | 				width={$xScale.bandwidth()}
22 | 				height="{columnHeight(d)}"
23 | 				fill={$zGet(series)}
24 | 			></rect>
25 | 		{/each}
26 | 	{/each}
27 | </g>
28 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/MultiLine.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { data, xGet, yGet, zGet, xScale, yScale, xRange, yRange, xDomain, yDomain } = getContext('LayerCake');
 5 | 
 6 | 	$: path = values => {
 7 | 		return 'M' + values
 8 | 			.map(d => {
 9 | 				return $xGet(d) + ',' + $yGet(d);
10 | 			})
11 | 			.join('L');
12 | 	};
13 | </script>
14 | 
15 | <g class="line-group">
16 | 	{#each $data as group}
17 | 		<path
18 | 			class='path-line'
19 | 			d='{path(group.values)}'
20 | 			stroke="{$zGet(group)}"
21 | 		></path>
22 | 	{/each}
23 | </g>
24 | 
25 | <style>
26 | 	.path-line {
27 | 		fill: none;
28 | 		stroke-linejoin: round;
29 | 		stroke-linecap: round;
30 | 		stroke-width: 3px;
31 | 	}
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/MapPoints.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import * as geo from 'd3-geo';
 4 | 
 5 | 	const { data, width, height } = getContext('LayerCake');
 6 | 
 7 | 	/* --------------------------------------------
 8 | 	 * Require a D3 projection function
 9 | 	 */
10 | 	export let projection;
11 | 	export let pointsData = [];
12 | 	export let r = 5;
13 | 
14 | 	$: projectionFn = projection()
15 | 		.fitSize([$width, $height], $data);
16 | </script>
17 | 
18 | <g class="points">
19 | {#each pointsData as d}
20 | 	<circle
21 | 		cx={projectionFn(d)[0]}
22 | 		cy={projectionFn(d)[1]}
23 | 		r="{r}"
24 | 	>
25 | 	</circle>
26 | {/each}
27 | </g>
28 | 
29 | <style>
30 | 	circle {
31 | 		fill: #000;
32 | 		stroke: #fff;
33 | 		stroke-width: 1;
34 | 	}
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/ColumnLinear.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { height, data, xGet, yGet } = getContext('LayerCake');
 5 | 
 6 | 	export let fill = '#000;';
 7 | 	export let stroke = '';
 8 | 	export let strokeWidth = 0;
 9 | 
10 | 	$: x0 = d => $xGet(d)[0];
11 | 
12 | 	$: columnWidth = d => {
13 | 		const vals = $xGet(d);
14 | 		return Math.max(0, (vals[1] - vals[0]));
15 | 	};
16 | 
17 | 	$:columnHeight = d => {
18 | 		return $height - $yGet(d);
19 | 	};
20 | 
21 | </script>
22 | 
23 | {#each $data as d, i}
24 | 	<rect
25 | 		class='group-rect'
26 | 		data-id="{i}"
27 | 		x="{x0(d)}"
28 | 		y="{$yGet(d)}"
29 | 		width="{columnWidth(d)}"
30 | 		height="{columnHeight(d)}"
31 | 		fill="{fill}"
32 | 		stroke="{stroke}"
33 | 		stroke-width="{strokeWidth}"
34 | 	/>
35 | {/each}
36 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Annotations.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { setContext, onMount } from 'svelte';
 3 | 
 4 | 	const vals = ['top', 'right', 'bottom', 'left'];
 5 | 
 6 | 	export let container = undefined;
 7 | 	export let annotations = [];
 8 | 
 9 | 	onMount(() => {
10 | 		setContext('annotation-els', Array.from(container.querySelectorAll('.layercake-annotation')));
11 | 	});
12 | 
13 | 	$: fillStyle = d => {
14 | 		let style = '';
15 | 		vals.forEach(val => {
16 | 			if (d[val]) {
17 | 				style += `${val}:${d[val]};`;
18 | 			}
19 | 		});
20 | 		return style;
21 | 	};
22 | </script>
23 | 
24 | <div class="layercake-annotations" bind:this={container}>
25 | 	{#each annotations as d, i}
26 | 		<div
27 | 			class="layercake-annotation"
28 | 			data-id="{i}"
29 | 			style="{fillStyle(d)}"
30 | 		>{d.text}</div>
31 | 	{/each}
32 | </div>
33 | 
34 | <style>
35 | 	.layercake-annotation {
36 | 		position: absolute;
37 | 	}
38 | </style>
39 | 
40 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Scatter.html.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
 5 | 
 6 | 	export let r = 5;
 7 | 	export let fill = '#000';
 8 | 	export let stroke = '#0cf';
 9 | 	export let strokeWidth = 0;
10 | 	// export let dx = 0;
11 | 	// export let dy = 0;
12 | </script>
13 | 
14 | <div class="scatter-group">
15 | 	{#each $data as d}
16 | 		<div
17 | 			class="circle"
18 | 			style="
19 | 				left: {$xGet(d)+ ($xScale.bandwidth ? $xScale.bandwidth() / 2 : 0)}%;
20 | 				top: {$yGet(d) + ($yScale.bandwidth ? $yScale.bandwidth() / 2 : 0)}%;
21 | 				width: {r * 2}px;
22 | 				height: {r * 2}px;
23 | 				background-color: {fill};
24 | 				border: {strokeWidth}px solid {stroke};
25 | 			"
26 | 		/>
27 | 	{/each}
28 | </div>
29 | 
30 | <style>
31 | 	.circle {
32 | 		position: absolute;
33 | 		transform: translate(-50%, -50%);
34 | 		border-radius: 50%;
35 | 	}
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Voronoi.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { Delaunay } from 'd3-delaunay';
 3 | 	import { getContext } from 'svelte';
 4 | 	import { uniques } from 'layercake';
 5 | 
 6 | 	const { data, xGet, yGet, width, height } = getContext('LayerCake');
 7 | 
 8 | 	function log (point) {
 9 | 		console.log(point, point.data);
10 | 	}
11 | 
12 | 	$: points = $data.map(d => {
13 | 		const point = [$xGet(d), $yGet(d)];
14 | 		point.data = d;
15 | 		return point;
16 | 	});
17 | 
18 | 	$: uniquePoints = uniques(points, d => d.join(), false);
19 | 
20 | 	$: voronoi = Delaunay.from(points).voronoi([0, 0, $width, $height]);
21 | 
22 | </script>
23 | 
24 | <style>
25 | 	.voronoi-cell {
26 | 		fill: none;
27 | 		stroke: none;
28 | 		pointer-events: all;
29 | 	}
30 | 
31 | 	.voronoi-cell:hover {
32 | 		stroke: #000;
33 | 	}
34 | </style>
35 | 
36 | {#each uniquePoints as point, i}
37 | 	<path class="voronoi-cell" d={voronoi.renderCell(i)} on:mouseover="{log(point)}"></path>
38 | {/each}
39 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Column.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { data, xGet, yGet, yRange, xScale } = getContext('LayerCake');
 5 | 
 6 | 	$: columnWidth = d => {
 7 | 		const vals = $xGet(d);
 8 | 		return Math.max(0, (vals[1] - vals[0]));
 9 | 	};
10 | 
11 | 	$: columnHeight = d => {
12 | 		return $yRange[0] - $yGet(d);
13 | 	};
14 | 
15 | 	/* --------------------------------------------
16 | 	 * Default styles
17 | 	 */
18 | 	export let fill = '#00e047';
19 | 	export let stroke = '';
20 | 	export let strokeWidth = 0;
21 | 
22 | </script>
23 | 
24 | <g class="column-group">
25 | 	{#each $data as d, i}
26 | 		<rect
27 | 			class='group-rect'
28 | 			data-id="{i}"
29 | 			x="{$xScale.bandwidth ? $xGet(d) : $xGet(d)[0]}"
30 | 			y="{$yGet(d)}"
31 | 			width="{$xScale.bandwidth ? $xScale.bandwidth() : columnWidth(d)}"
32 | 			height="{columnHeight(d)}"
33 | 			{fill}
34 | 			{stroke}
35 | 			stroke-width="{strokeWidth}"
36 | 		/>
37 | 	{/each}
38 | </g>
39 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/ClevelandDotPlot.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { scaleOrdinal } from 'd3-scale';
 4 | 
 5 | 	const { data, xGet, yGet, yScale, zScale, config } = getContext('LayerCake');
 6 | 
 7 | 	export let r = 5;
 8 | 
 9 | 	$: midHeight = $yScale.bandwidth() / 2;
10 | </script>
11 | 
12 | <g class="dot-plot">
13 | 	{#each $data as row}
14 | 		<g class="dot-row">
15 | 			<line
16 | 				x1="{Math.min(...$xGet(row))}"
17 | 				y1="{$yGet(row) + midHeight}"
18 | 				x2="{Math.max(...$xGet(row))}"
19 | 				y2="{$yGet(row) + midHeight}"
20 | 			></line>
21 | 
22 | 			{#each $xGet(row) as circleX, i}
23 | 				<circle
24 | 					cx="{circleX}"
25 | 					cy="{$yGet(row) + midHeight}"
26 | 					r="{r}"
27 | 					fill="{$zScale($config.x[i])}"
28 | 				></circle>
29 | 			{/each}
30 | 		</g>
31 | 	{/each}
32 | </g>
33 | 
34 | <style>
35 | 	line {
36 | 		stroke-width: 1px;
37 | 		stroke: #000;
38 | 	}
39 | 	circle {
40 | 		stroke: #000;
41 | 		stroke-width: 1px;
42 | 	}
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Labels.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { getContext } from 'svelte';
 3 |   import { max } from 'd3-array';
 4 | 
 5 |   const { data, x, y, xScale, yScale, xRange, yRange } = getContext('LayerCake');
 6 | 
 7 |   /* --------------------------------------------
 8 | 	 * Title case the first letter
 9 | 	 */
10 | 	const cap = val => val.replace(/^\w/, d => d.toUpperCase());
11 | 
12 |   /* --------------------------------------------
13 | 	 * Put the label on the highest value
14 | 	 */
15 |   $: left = values => $xScale(max(values, $x)) /  Math.max(...$xRange);
16 |   $: top = values => $yScale(max(values, $y)) / Math.max(...$yRange);
17 | </script>
18 | 
19 | {#each $data as group}
20 | 	<div
21 |     class="label"
22 |     style="
23 |       top:{top(group.values) * 100}%;
24 |       left:{left(group.values) * 100}%;
25 |     "
26 |   >{cap(group.key)}</div>
27 | {/each}
28 | 
29 | <style>
30 | 	.label {
31 | 		position: absolute;
32 | 		transform: translate(-100%, -100%)translateY(1px);
33 | 		font-size: 13px;
34 | 	}
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Scatter.canvas.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { scaleCanvas } from 'layercake';
 4 | 
 5 | 	const { data, xGet, yGet, width, height } = getContext('LayerCake');
 6 | 
 7 | 	const { ctx } = getContext('canvas');
 8 | 
 9 | 	export let r;
10 | 	export let fill;
11 | 
12 | 	$: {
13 | 		if ($ctx) {
14 | 			/* --------------------------------------------
15 | 			 * If you were to have multiple canvas layers
16 | 			 * maybe for some artistic layering purposes
17 | 			 * put these reset functions in the first layer, not each one
18 | 			 * since they should only run once per update
19 | 			 */
20 | 			scaleCanvas($ctx, $width, $height);
21 | 			$ctx.clearRect(0, 0, $width, $height);
22 | 
23 | 			/* --------------------------------------------
24 | 			 * Draw our scatterplot
25 | 			 */
26 | 			$data.forEach(d => {
27 | 				$ctx.beginPath();
28 | 				$ctx.arc($xGet(d), $yGet(d), r, 0, 2 * Math.PI, false);
29 | 				$ctx.fillStyle = fill;
30 | 				$ctx.fill();
31 | 			});
32 | 		}
33 | 	}
34 | </script>
35 | 


--------------------------------------------------------------------------------
/src/routes/examples/line-area.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { LayerCake, Svg, Html, Canvas } from 'layercake';
 3 | 
 4 |   import AxisX from '$lib/layercake-components/AxisX.svelte';
 5 |   import AxisY from '$lib/layercake-components/AxisY.svelte';
 6 |   import Line from '$lib/layercake-components/Line.svelte';
 7 | 
 8 |   const data = [
 9 |     { x: 1, y: 1 },
10 |     { x: 2, y: 3 },
11 |     { x: 3, y: 3 },
12 |     { x: 5, y: 4 },
13 |     { x: 6, y: 5 },
14 |     { x: 7, y: 6 },
15 |     { x: 8, y: 7 },
16 |   ];
17 | </script>
18 | 
19 | <style>
20 |   /* Set dimensions on the parent.
21 |      The <LayerCake> component will expand to fill it.
22 |    */
23 |   .chart-container {
24 |     width: 100%;
25 |     height: 500px;
26 |     font-family: sans-serif;
27 |   }
28 | </style>
29 | 
30 | <div class="chart-container">
31 |   <LayerCake padding={{ right: 10, bottom: 20, left: 35 }}
32 |     x='x'
33 |     y='y'
34 |     {data}
35 |   >
36 |   <AxisX />
37 |     <Svg>
38 |       <AxisX ticks={10} />
39 |       <AxisY ticks={10} />
40 |       <Line color='#f0c'/>
41 |     </Svg>
42 |   </LayerCake>
43 | </div>
44 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/SmallMultipleWrapper.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { LayerCake, Svg, calcExtents } from 'layercake';
 3 | 	import { tweened } from 'svelte/motion';
 4 | 	import * as eases from 'svelte/easing';
 5 | 
 6 | 	import Line from './Line.svelte';
 7 | 
 8 | 	export let data;
 9 | 	export let fullExtents;
10 | 	export let scale;
11 | 	export let extentGetters;
12 | 
13 | 	const tweenOptions = {
14 | 		duration: 300,
15 | 		easing: eases.cubicInOut
16 | 	};
17 | 
18 | 	const xDomain = tweened(undefined, tweenOptions);
19 | 	const yDomain = tweened(undefined, tweenOptions);
20 | 
21 | 	const extents = calcExtents(data, extentGetters);
22 | 
23 | 	$: xDomain.set(scale === 'shared' ? fullExtents.x : extents.x);
24 | 	$: yDomain.set(scale === 'shared' ? fullExtents.y : extents.y);
25 | 
26 | </script>
27 | 
28 | <LayerCake
29 | 	padding={{ top: 2, right: 6, bottom: 2, left: 6 }}
30 | 	x={extentGetters.find(d => d.field === 'x').accessor}
31 | 	y={extentGetters.find(d => d.field === 'y').accessor}
32 | 	{data}
33 | 	xDomain={$xDomain}
34 | 	yDomain={$yDomain}
35 | >
36 | 	<Svg>
37 | 		<Line
38 | 			stroke={'#000'}
39 | 		/>
40 | 	</Svg>
41 | </LayerCake>
42 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # create-svelte
 2 | 
 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
 4 | 
 5 | ## Creating a project
 6 | 
 7 | If you're seeing this, you've probably already done this step. Congrats!
 8 | 
 9 | ```bash
10 | # create a new project in the current directory
11 | npm init svelte@next
12 | 
13 | # create a new project in my-app
14 | npm init svelte@next my-app
15 | ```
16 | 
17 | > Note: the `@next` is temporary
18 | 
19 | ## Developing
20 | 
21 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
22 | 
23 | ```bash
24 | npm run dev
25 | 
26 | # or start the server and open the app in a new browser tab
27 | npm run dev -- --open
28 | ```
29 | 
30 | ## Building
31 | 
32 | Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
33 | 
34 | ```bash
35 | npm run build
36 | ```
37 | 
38 | > You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
39 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/SmallMultipleWrapper.percent-range.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { LayerCake, ScaledSvg, calcExtents } from 'layercake';
 3 | 	import { tweened } from 'svelte/motion';
 4 | 	import * as eases from 'svelte/easing';
 5 | 
 6 | 	import Line from './Line.svelte';
 7 | 
 8 | 	export let data;
 9 | 	export let fullExtents;
10 | 	export let scale;
11 | 	export let extentGetters;
12 | 
13 | 	const tweenOptions = {
14 | 		duration: 300,
15 | 		easing: eases.cubicInOut
16 | 	};
17 | 
18 | 	const xDomain = tweened(undefined, tweenOptions);
19 | 	const yDomain = tweened(undefined, tweenOptions);
20 | 
21 | 	const extents = calcExtents(data, extentGetters);
22 | 
23 | 	$: xDomain.set(scale === 'shared' ? fullExtents.x : extents.x);
24 | 	$: yDomain.set(scale === 'shared' ? fullExtents.y : extents.y);
25 | 
26 | </script>
27 | 
28 | <LayerCake
29 | 	ssr={true}
30 | 	percentRange={true}
31 | 	padding={{ top: 2, right: 6, bottom: 2, left: 6 }}
32 | 	x={extentGetters.find(d => d.field === 'x').accessor}
33 | 	y={extentGetters.find(d => d.field === 'y').accessor}
34 | 	{data}
35 | 	xDomain={$xDomain}
36 | 	yDomain={$yDomain}
37 | >
38 | 	<ScaledSvg>
39 | 		<Line
40 | 			stroke={'#000'}
41 | 		/>
42 | 	</ScaledSvg>
43 | </LayerCake>
44 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/BeeswarmForce.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { forceSimulation, forceX, forceY, forceCollide } from 'd3-force';
 4 | 
 5 | 	const { data, xGet, height, zGet, custom } = getContext('LayerCake');
 6 | 
 7 | 	const nodes = $data.map((d) => ({ ...d }));
 8 | 
 9 | 	export let r = 4;
10 | 	export let xStrength = 0.95;
11 | 	export let yStrength = 0.075;
12 | 	export let strokeWidth = 1;
13 | 	export let strokeColor = '#fff';
14 | 
15 | 	$: simulation = forceSimulation(nodes)
16 | 		.force('x', forceX().x(d => $xGet(d)).strength(xStrength))
17 | 		.force('y', forceY().y($height / 2).strength(yStrength))
18 | 		.force('collide', forceCollide(r))
19 | 		.stop();
20 | 
21 | 	$: {
22 | 		for ( var i = 0,
23 | 			n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
24 | 			i < n;
25 | 			++i ) {
26 | 			simulation.tick();
27 | 		}
28 | 	}
29 | </script>
30 | 
31 | <g class='bee-group'>
32 | 	{#each simulation.nodes() as node}
33 | 		<circle
34 | 			fill='{$zGet(node)}'
35 | 			stroke='{strokeColor}'
36 | 			stroke-width='{strokeWidth}'
37 | 			cx='{node.x}'
38 | 			cy='{node.y}'
39 | 			r='{r}'
40 | 		>
41 | 			<title>{$custom.getTitle(node)}</title>
42 | 		</circle>
43 | 	{/each}
44 | </g>
45 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/ClevelandDotPlot.html.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { scaleOrdinal } from 'd3-scale';
 4 | 
 5 | 	const { data, xGet, yGet, zScale, yScale, config } = getContext('LayerCake');
 6 | 
 7 | 	export let r = 5;
 8 | 
 9 | 	$: midHeight = $yScale.bandwidth() / 2;
10 | </script>
11 | 
12 | <div class="dot-plot">
13 | 	{#each $data as row}
14 | 		<div class="dot-row">
15 | 			<div
16 | 				class="line"
17 | 				style="
18 | 					left: {Math.min(...$xGet(row))}%;
19 | 					top: {$yGet(row) + midHeight}%;
20 | 					right: {100 - Math.max(...$xGet(row))}%;
21 | 				"
22 | 			></div>
23 | 
24 | 			{#each $xGet(row) as circleX, i}
25 | 				<div
26 | 					class="circle"
27 | 					style="
28 | 						left: {circleX}%;
29 | 						top: {$yGet(row) + midHeight}%;
30 | 						width: {r * 2}px;
31 | 						height: {r * 2}px;
32 | 						background: {$zScale($config.x[i])};
33 | 					"
34 | 				></div>
35 | 			{/each}
36 | 		</div>
37 | 	{/each}
38 | </div>
39 | 
40 | <style>
41 | 	.line {
42 | 		position: absolute;
43 | 		border-bottom: 1px solid #000;
44 | 	}
45 | 	.circle {
46 | 		position: absolute;
47 | 		border-radius: 50%;
48 | 		border: 1px solid #000;
49 | 		stroke: #000;
50 | 		transform: translate(-50%, -50%);
51 | 	}
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/QuadTree.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { quadtree } from 'd3-quadtree';
 4 | 
 5 | 	const { data, xGet, yGet, width, height } = getContext('LayerCake');
 6 | 
 7 | 	let visible = false;
 8 | 	let found = {};
 9 | 	let e = {};
10 | 
11 | 	export let dataset = undefined;
12 | 	export let x = 'x';
13 | 	export let y = 'y';
14 | 	export let searchRadius = undefined;
15 | 
16 | 	$: xGetter = x === 'x' ? $xGet : $yGet;
17 | 	$: yGetter = y === 'y' ? $yGet : $xGet;
18 | 
19 | 	function findItem (evt) {
20 | 		e = evt;
21 | 
22 | 		const xLayerKey = `layer${x.toUpperCase()}`;
23 | 		const yLayerKey = `layer${y.toUpperCase()}`;
24 | 
25 | 		found = finder.find(evt[xLayerKey], evt[yLayerKey], searchRadius) || {};
26 | 		visible = Object.keys(found).length > 0;
27 | 	}
28 | 
29 | 	$: finder = quadtree()
30 | 		.extent([[-1, -1], [$width + 1, $height + 1]])
31 | 		.x(xGetter)
32 | 		.y(yGetter)
33 | 		.addAll(dataset || $data);
34 | 
35 | </script>
36 | 
37 | <style>
38 | 	.bg {
39 | 		position: absolute;
40 | 		top: 0;
41 | 		right: 0;
42 | 		bottom: 0;
43 | 		left: 0;
44 | 	}
45 | </style>
46 | 
47 | <div
48 | 	class="bg"
49 | 	on:mousemove="{findItem}"
50 | 	on:mouseout="{() => visible = false}"
51 | ></div>
52 | <slot
53 | 	x={xGetter(found) || 0}
54 | 	y={yGetter(found) || 0}
55 | 	{found}
56 | 	{visible}
57 | 	{e}
58 | ></slot>
59 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/QuadTree.percent-range.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { quadtree } from 'd3-quadtree';
 4 | 
 5 | 	const { data, xGet, yGet, width, height } = getContext('LayerCake');
 6 | 
 7 | 	let visible = false;
 8 | 	let found = {};
 9 | 	let e = {};
10 | 
11 | 	export let dataset = undefined;
12 | 	export let x = 'x';
13 | 	export let y = 'y';
14 | 	export let searchRadius = undefined;
15 | 
16 | 	$: xGetter = x === 'x' ? $xGet : $yGet;
17 | 	$: yGetter = y === 'y' ? $yGet : $xGet;
18 | 
19 | 	function findItem (evt) {
20 | 		e = evt;
21 | 
22 | 		const xLayer = `layer${x.toUpperCase()}`;
23 | 		const yLayer = `layer${y.toUpperCase()}`;
24 | 
25 | 		const xLayerVal = (evt[xLayer] / (x === 'x' ? $width : $height)) * 100;
26 | 		const yLayerVal = (evt[yLayer] / (y === 'y' ? $height : $width)) * 100;
27 | 
28 | 		found = finder.find(xLayerVal, yLayerVal, searchRadius) || {};
29 | 
30 | 		visible = Object.keys(found).length > 0;
31 | 	}
32 | 
33 | 	$: finder = quadtree()
34 | 		.extent([[-1, -1], [$width + 1, $height + 1]])
35 | 		.x(xGetter)
36 | 		.y(yGetter)
37 | 		.addAll(dataset || $data);
38 | 
39 | </script>
40 | 
41 | <style>
42 | 	.bg {
43 | 		position: absolute;
44 | 		top: 0;
45 | 		right: 0;
46 | 		bottom: 0;
47 | 		left: 0;
48 | 	}
49 | </style>
50 | 
51 | <div
52 | 	class="bg"
53 | 	on:mousemove="{findItem}"
54 | 	on:mouseout="{() => visible = false}"
55 | ></div>
56 | <slot
57 | 	x={xGetter(found) || 0}
58 | 	y={yGetter(found) || 0}
59 | 	{found}
60 | 	{visible}
61 | 	{e}
62 | ></slot>
63 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/BeeswarmForce.html.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { forceSimulation, forceX, forceY, forceCollide } from 'd3-force';
 4 | 
 5 | 	const { data, xGet, height, zGet, custom } = getContext('LayerCake');
 6 | 
 7 | 	const nodes = $data.map((d) => ({ ...d }));
 8 | 
 9 | 	export let r = 4;
10 | 	export let strokeWidth = 0.5;
11 | 	export let xStrength = 0.95;
12 | 	export let yStrength = 0.075;
13 | 	export let strokeColor = '#fff';
14 | 
15 | 	$: simulation = forceSimulation(nodes)
16 | 		.force('x', forceX().x(d => $xGet(d)).strength(xStrength))
17 | 		.force('y', forceY().y($height / 2).strength(yStrength))
18 | 		.force('collide', forceCollide(r + strokeWidth / 2))
19 | 		.stop();
20 | 
21 | 	$: {
22 | 		for ( var i = 0,
23 | 			n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
24 | 			i < n;
25 | 			++i ) {
26 | 			simulation.tick();
27 | 		}
28 | 	}
29 | </script>
30 | 
31 | <div class='bee-group'>
32 | 	{#each simulation.nodes() as node}
33 | 		<div
34 | 			class='bee'
35 | 			style='
36 | 				left:{node.x}px;
37 | 				top: {node.y}px;
38 | 				width: {r * 2}px;
39 | 				height: {r * 2}px;
40 | 				background: {$zGet(node)};
41 | 				border-width: {strokeWidth}px;
42 | 				border-color: {strokeColor};
43 | 				'
44 | 		>
45 | 			<title>{$custom.getTitle(node)}</title>
46 | 		</div>
47 | 	{/each}
48 | </div>
49 | 
50 | <style>
51 | 	.bee {
52 | 		position: absolute;
53 | 		border-style: solid;
54 | 		border-radius: 50%;
55 | 		transform: translate(-50%, -50%);
56 | 	}
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/AxisRadial.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { width, height, xScale, extents, config } = getContext('LayerCake');
 5 | 
 6 | 	export let linePaddingFactor = 1.1;
 7 | 	export let labelPaddingFactor = 1.25;
 8 | 
 9 | 	$: max = $xScale(Math.max(...$extents.x));
10 | 
11 | 	$: angleSlice = (Math.PI * 2) / $config.x.length;
12 | 
13 | 	function anchor (total, i) {
14 | 		if (i === 0 || i === total / 2) {
15 | 			return 'middle';
16 | 		} else if (i < total / 2) {
17 | 			return 'start';
18 | 		}
19 | 		return 'end';
20 | 	}
21 | </script>
22 | 
23 | <g
24 | 	transform="translate({ $width / 2 }, { $height / 2 })"
25 | >
26 | 	<circle
27 | 		cx="0"
28 | 		cy="0"
29 | 		r="{max}"
30 | 		stroke="#ccc"
31 | 		stroke-width="1"
32 | 		fill="#CDCDCD"
33 | 		fill-opacity="0.1"
34 | 	></circle>
35 | 	<circle
36 | 		cx="0"
37 | 		cy="0"
38 | 		r="{max / 2}"
39 | 		stroke="#ccc"
40 | 		stroke-width="1"
41 | 		fill="none"
42 | 	></circle>
43 | 
44 | 	{#each $config.x as label, i}
45 | 		<line
46 | 			x1="0"
47 | 			y1="0"
48 | 			x2="{(max * linePaddingFactor) * Math.cos(angleSlice * i - Math.PI / 2)}"
49 | 			y2="{(max * linePaddingFactor) * Math.sin(angleSlice * i - Math.PI / 2)}"
50 | 			stroke="#ccc"
51 | 			stroke-width="1"
52 | 			fill="none"
53 | 		>
54 | 		</line>
55 | 		<text
56 | 			text-anchor="{anchor($config.x.length, i)}"
57 | 			dy="0.35em"
58 | 			font-size="12px"
59 | 			text-outline="#fff"
60 | 			transform="translate({(max * labelPaddingFactor) * Math.cos(angleSlice * i - Math.PI / 2)}, {(max * labelPaddingFactor) * Math.sin(angleSlice * i - Math.PI / 2)})">{label}</text>
61 | 	{/each}
62 | </g>
63 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Map.canvas.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { scaleCanvas } from 'layercake';
 4 | 	import { geoPath } from 'd3-geo';
 5 | 
 6 | 	const { data, width, height, zGet } = getContext('LayerCake');
 7 | 
 8 | 	const { ctx } = getContext('canvas');
 9 | 
10 | 	/* --------------------------------------------
11 | 	 * Require a D3 projection function
12 | 	 */
13 | 	export let projection;
14 | 
15 | 	/* --------------------------------------------
16 | 	 * Allow for custom styling
17 | 	 */
18 | 	export let fill = '#fff';
19 | 	export let stroke = '#ccc';
20 | 	export let strokeWidth = 1;
21 | 
22 | 	/* --------------------------------------------
23 | 	 * Add this optional export in case you want to plot only a subset of the features
24 | 	 * while keeping the zoom on the whole geojson feature set
25 | 	 */
26 | 	export let features = $data;
27 | 
28 | 	$: projectionFn = projection()
29 | 		.fitSize([$width, $height], $data);
30 | 
31 | 	$: geoPathFn = geoPath(projectionFn);
32 | 
33 | 	$: {
34 | 		if ($ctx && geoPath) {
35 | 			scaleCanvas($ctx, $width, $height);
36 | 			$ctx.clearRect(0, 0, $width, $height);
37 | 
38 | 			features.features.forEach(feature => {
39 | 				$ctx.beginPath();
40 | 				// Set the context here since setting it in `$: geoPath` is a circular reference
41 | 				geoPathFn.context($ctx);
42 | 				geoPathFn(feature);
43 | 
44 | 				$ctx.fillStyle = fill;
45 | 				// $ctx.fillStyle = $zGet(feature.properties); // Use this if making a choropleth
46 | 				$ctx.fill();
47 | 
48 | 				$ctx.lineWidth = strokeWidth;
49 | 				$ctx.strokeStyle = stroke;
50 | 				$ctx.stroke();
51 | 			});
52 | 		}
53 | 	}
54 | </script>
55 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Radar.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { line, curveCardinalClosed } from 'd3-shape';
 4 | 
 5 | 	const { data, width, height, xGet, config } = getContext('LayerCake');
 6 | 
 7 | 	$: angleSlice = (Math.PI * 2) / $config.x.length;
 8 | 
 9 | 	$: path = line()
10 | 		.curve(curveCardinalClosed)
11 | 		.x((d, i) => d * Math.cos(angleSlice * i - Math.PI / 2))
12 | 		.y((d, i) => d * Math.sin(angleSlice * i - Math.PI / 2));
13 | 
14 | 	$: cx = (circleR, i) => circleR * Math.cos(angleSlice * i - Math.PI / 2)
15 | 	$: cy = (circleR, i) => circleR * Math.sin(angleSlice * i - Math.PI / 2)
16 | 
17 | 	/* The non-D3 line generator way. Use `d={path}` in the template below */
18 | 	// $: path = 'M' + $data
19 | 	// 	.map(d => {
20 | 	// 		return $rGet(d).map((val, i) => {
21 | 	// 			return [
22 | 	// 				val * Math.cos(angleSlice * i - Math.PI / 2),
23 | 	// 				val * Math.sin(angleSlice * i - Math.PI / 2)
24 | 	// 			].join(',');
25 | 	// 		});
26 | 	// 	})
27 | 	// 	.join('L') + 'z';
28 | </script>
29 | 
30 | <g
31 | 	transform="translate({ $width / 2 }, { $height / 2 })"
32 | >
33 | 	{#each $data as row}
34 | 		<!-- Draw a line connecting all the dots -->
35 | 		<path
36 | 			class='path-line'
37 | 			d='{path($xGet(row))}'
38 | 			stroke="#f0c"
39 | 			fill="#f0c"
40 | 			fill-opacity="0.5"
41 | 		></path>
42 | 
43 | 		<!-- Plot each dots -->
44 | 		{#each $xGet(row) as circleR, i}
45 | 			<circle
46 | 				cx={cx(circleR, i)}
47 | 				cy={cy(circleR, i)}
48 | 				r="4.5"
49 | 				fill="#f0c"
50 | 				stroke="#fff"
51 | 				stroke-width="1"
52 | 			></circle>
53 | 		{/each}
54 | 	{/each}
55 | </g>
56 | 
57 | <style>
58 | 	.path-line {
59 | 		stroke-linejoin: round;
60 | 		stroke-linecap: round;
61 | 		stroke-width: 2;
62 | 	}
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/routes/examples/bar.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { LayerCake, Svg } from 'layercake';
 3 |   import { scaleBand } from 'd3-scale';
 4 | 
 5 |   import Bar from '$lib/layercake-components/Bar.svelte';
 6 |   import AxisX from '$lib/layercake-components/AxisX.svelte';
 7 |   import AxisY from '$lib/layercake-components/AxisY.svelte';
 8 | 
 9 |   let data = [
10 |       {
11 |         year: 1979,
12 |         value: 2
13 |       },
14 |       {
15 |         year: 1980,
16 |         value: 3
17 |       },
18 |       {
19 |         year: 1981,
20 |         value: 5
21 |       },
22 |       {
23 |         year: 1982,
24 |         value: 8
25 |       },
26 |       {
27 |         year: 1983,
28 |         value: 18
29 |       }
30 |     ];
31 | 
32 |   const xKey = 'value';
33 |   const yKey = 'year';
34 | 
35 |   data.forEach(d => {
36 |     d[xKey] = +d[xKey];
37 |   });
38 | </script>
39 | 
40 | <style>
41 |   /*
42 |     The wrapper div needs to have an explicit width and height in CSS.
43 |     It can also be a flexbox child or CSS grid element.
44 |     The point being it needs dimensions since the <LayerCake> element will
45 |     expand to fill it.
46 |   */
47 | 
48 |   .chart-container {
49 |     width: 100%;
50 |     height: 500px;
51 |     font-family: sans-serif;
52 |   }
53 | </style>
54 | 
55 | <div class="chart-container">
56 |   <LayerCake
57 |     padding={{ top: 0, bottom: 20, left: 35 }}
58 |     x={xKey}
59 |     y={yKey}
60 |     yScale={scaleBand().paddingInner([0.05]).round(true)}
61 |     yDomain={['1979', '1980', '1981', '1982', '1983']}
62 |     xDomain={[0, null]}
63 |     data={data}
64 |   >
65 |     <Svg>
66 |       <AxisX
67 |         gridlines={true}
68 |         baseline={true}
69 |         snapTicks={true}
70 |       />
71 |       <AxisY
72 |         gridlines={false}
73 |       />
74 |       <Bar/>
75 |     </Svg>
76 |   </LayerCake>
77 | </div>


--------------------------------------------------------------------------------
/src/lib/layercake-components/Sankey.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import * as Sankey from 'd3-sankey';
 4 | 
 5 | 	const { data, width, height } = getContext('LayerCake');
 6 | 
 7 | 	/* --------------------------------------------
 8 | 	 * Allow for dynamic coloring
 9 | 	 */
10 | 	export let colorLinks = d => 'rgba(0, 0, 0, .2)';
11 | 	export let colorNodes = d => '#333';
12 | 	export let colorText = d => '#263238';
13 | 
14 | 	export let nodeWidth = 5;
15 | 	export let nodePadding = 10;
16 | 	export let linkSort = null;
17 | 	export let nodeId = d => d.id;
18 | 	export let nodeAlign = Sankey.sankeyLeft;
19 | 
20 | 	$: sankey = Sankey.sankey()
21 | 		.nodeAlign(nodeAlign)
22 | 		.nodeWidth(nodeWidth)
23 | 		.nodePadding(nodePadding)
24 | 		.nodeId(nodeId)
25 | 		.size([$width, $height])
26 | 		.linkSort(linkSort);
27 | 
28 | 	$: sankeyData = sankey($data);
29 | 
30 | 	$: link = Sankey.sankeyLinkHorizontal();
31 | 
32 | 	$: fontSize = $width <= 320 ? 8 : 12;
33 | </script>
34 | 
35 | <style>
36 | 	text {
37 | 		pointer-events: none;
38 | 	}
39 | </style>
40 | 
41 | <g class="sankey-layer">
42 | 	<g class='link-group'>
43 | 		{#each sankeyData.links as d}
44 | 			<path
45 | 				d={link(d)}
46 | 				fill='none'
47 | 				stroke={colorLinks(d)}
48 | 				stroke-opacity='0.5'
49 | 				stroke-width={d.width} />
50 | 		{/each}
51 | 	</g>
52 | 	<g class='rect-group'>
53 | 		{#each sankeyData.nodes as d, i}
54 | 			<rect
55 | 				x={d.x0}
56 | 				y={d.y0}
57 | 				height={d.y1 - d.y0}
58 | 				width={d.x1 - d.x0}
59 | 				fill={colorNodes(d)} />
60 | 			<text
61 | 				x={d.x0 < $width / 4 ? d.x1 + 6 : d.x0 - 6}
62 | 				y={(d.y1 + d.y0) / 2}
63 | 				dy="{(fontSize / 2) - 2}"
64 | 				style="fill: {colorText(d)};
65 | 							font-size: {fontSize}px;
66 | 							text-anchor: {d.x0 < $width / 4 ? 'start' : 'end'};">
67 | 				{d.id}
68 | 			</text>
69 | 		{/each}
70 | 	</g>
71 | </g>
72 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Key.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	/* --------------------------------------------
 5 | 	 * Can be: "circle", "line" or "square"
 6 | 	 */
 7 | 	export let shape = 'square';
 8 | 
 9 | 	/* --------------------------------------------
10 | 	 * Can be "start", "center" or "end"
11 | 	 */
12 | 	export let align = 'start';
13 | 
14 | 	/* --------------------------------------------
15 | 	 * Pass in lookup values
16 | 	 */
17 | 	export let lookup = undefined;
18 | 
19 | 	/* --------------------------------------------
20 | 	 * Capitalize the series name: `true` or `false`
21 | 	 */
22 | 	export let capitalize = true;
23 | 
24 | 	const { zDomain, zScale } = getContext('LayerCake');
25 | 
26 | 	function cap (val) {
27 | 		return String(val).replace(/^\w/, d => d.toUpperCase());
28 | 	}
29 | 
30 | 	function displayName (val) {
31 | 		if (lookup) {
32 | 			return lookup[val] || val;
33 | 		}
34 | 		return capitalize === true ? cap(val) : val;
35 | 	}
36 | </script>
37 | 
38 | <style>
39 | 	.key {
40 | 		display: flex;
41 | 	}
42 | 	.key-item {
43 | 		margin-right: 14px;
44 | 	}
45 | 	.chip {
46 | 		display: inline-block;
47 | 		position: relative;
48 | 		width: 12px;
49 | 		height: 12px;
50 | 	}
51 | 	.chip__circle {
52 | 		border-radius: 50%;
53 | 	}
54 | 	.chip__line:after {
55 | 		content: '';
56 | 		position: absolute;
57 | 		border-width: 3px;
58 | 		width: 14px;
59 | 		transform: rotate(-45deg);
60 | 		transform-origin: 14px 5px;
61 | 	}
62 | 	.name {
63 | 		display: inline;
64 | 		font-size: 14px;
65 | 		text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
66 | 	}
67 | </style>
68 | 
69 | <div class='key' style="justify-content: {align === 'end' ? 'flex-end': align};">
70 | 	{#each $zDomain as item}
71 | 	<div class='key-item'>
72 | 		<div
73 | 			class='chip chip__{shape}'
74 | 			style='background: {
75 | 				shape === `line` ?
76 | 				`linear-gradient(-45deg, #ffffff 40%, ${$zScale(item)} 41%, ${$zScale(item)} 59%, #ffffff 60%)`
77 | 				: $zScale(item)};'
78 | 		></div>
79 | 		<div class='name'>{displayName(item)}</div>
80 | 	</div>
81 | 	{/each}
82 | </div>
83 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/AxisY.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { padding, xRange, yScale } = getContext('LayerCake');
 5 | 
 6 | 	export let ticks = 4;
 7 | 	export let tickMarks = false;
 8 | 	export let gridlines = true;
 9 | 	export let formatTick = d => d;
10 | 	export let xTick = 0;
11 | 	export let yTick = 0;
12 | 	export let dxTick = 0;
13 | 	export let dyTick = -4;
14 | 	export let textAnchor = 'start';
15 | 
16 | 	$: isBandwidth = typeof $yScale.bandwidth === 'function';
17 | 
18 | 	$: tickVals = Array.isArray(ticks) ? ticks :
19 | 		isBandwidth ?
20 | 			$yScale.domain() :
21 | 			typeof ticks === 'function' ?
22 | 				ticks($yScale.ticks()) :
23 | 					$yScale.ticks(ticks);
24 | </script>
25 | 
26 | <g class='axis y-axis' transform='translate({-$padding.left}, 0)'>
27 | 	{#each tickVals as tick, i}
28 | 		<g class='tick tick-{tick}' transform='translate({$xRange[0] + (isBandwidth ? $padding.left : 0)}, {$yScale(tick)})'>
29 | 			{#if gridlines !== false}
30 | 				<line
31 | 					class="gridline"
32 | 					x2='100%'
33 | 					y1={yTick + (isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
34 | 					y2={yTick + (isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
35 | 				></line>
36 | 			{/if}
37 | 			{#if tickMarks === true}
38 | 				<line
39 | 					class='tick-mark'
40 | 					x1='0'
41 | 					x2='{isBandwidth ? -6 : 6}'
42 | 					y1={yTick + (isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
43 | 					y2={yTick + (isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
44 | 				></line>
45 | 			{/if}
46 | 			<text
47 | 				x='{xTick}'
48 | 				y='{yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}'
49 | 				dx='{isBandwidth ? -9 : dxTick}'
50 | 				dy='{isBandwidth ? 4 : dyTick}'
51 | 				style="text-anchor:{isBandwidth ? 'end' : textAnchor};"
52 | 			>{formatTick(tick)}</text>
53 | 		</g>
54 | 	{/each}
55 | </g>
56 | 
57 | <style>
58 | 	.tick {
59 | 		font-size: .725em;
60 | 		font-weight: 200;
61 | 	}
62 | 
63 | 	.tick line {
64 | 		stroke: #aaa;
65 | 	}
66 | 	.tick .gridline {
67 | 		stroke-dasharray: 2;
68 | 	}
69 | 
70 | 	.tick text {
71 | 		fill: #666;
72 | 	}
73 | 
74 | 	.tick.tick-0 line {
75 | 		stroke-dasharray: 0;
76 | 	}
77 | </style>
78 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Beeswarm.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { data, xGet, zGet, padding, height, config, custom } = getContext('LayerCake');
 5 | 
 6 | 	export let r = 3;
 7 | 	export let strokeWidth = 0;
 8 | 	export let strokeColor = '#fff';
 9 | 	export let spacing = 1.5;
10 | 
11 | 	$: circles = dodge($data, { rds: r * 2 + spacing + strokeWidth, x: $xGet });
12 | 
13 | 	function dodge(data, { rds = 1, x = d => d } = {}) {
14 | 	  const radius2 = rds ** 2;
15 | 	  const circles = data.map(d => ({ x: x(d), [$config.z]: d[$config.z], data: d })).sort((a, b) => a.x - b.x);
16 | 	  const epsilon = 1e-3;
17 | 	  let head = null, tail = null;
18 | 
19 | 	  // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue.
20 | 	  function intersects(x, y) {
21 | 	    let a = head;
22 | 	    while (a) {
23 | 	      if (radius2 - epsilon > (a.x - x) ** 2 + (a.y - y) ** 2) {
24 | 	        return true;
25 | 	      }
26 | 	      a = a.next;
27 | 	    }
28 | 	    return false;
29 | 	  }
30 | 
31 | 	  // Place each circle sequentially.
32 | 	  for (const b of circles) {
33 | 
34 | 	    // Remove circles from the queue that can’t intersect the new circle b.
35 | 	    while (head && head.x < b.x - radius2) head = head.next;
36 | 
37 | 	    // Choose the minimum non-intersecting tangent.
38 | 	    if (intersects(b.x, b.y = 0)) {
39 | 	      let a = head;
40 | 	      b.y = Infinity;
41 | 	      do {
42 | 	        let y = a.y + Math.sqrt(radius2 - (a.x - b.x) ** 2);
43 | 	        if (y < b.y && !intersects(b.x, y)) b.y = y;
44 | 	        a = a.next;
45 | 	      } while (a);
46 | 	    }
47 | 
48 | 	    // Add b to the queue.
49 | 	    b.next = null;
50 | 	    if (head === null) head = tail = b;
51 | 	    else tail = tail.next = b;
52 | 	  }
53 | 
54 | 	  return circles;
55 | 	}
56 | </script>
57 | 
58 | <g class='bee-group'>
59 | 	{#each circles as d}
60 | 		<circle
61 | 			fill={$zGet(d)}
62 | 			stroke='{strokeColor}'
63 | 			stroke-width='{strokeWidth}'
64 | 			cx='{d.x}'
65 | 			cy='{$height - r - spacing - strokeWidth / 2 - d.y}'
66 | 			r='{r}'
67 | 		>
68 | 			<title>{$custom.getTitle(d)}</title>
69 | 		</circle>
70 | 	{/each}
71 | </g>
72 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/CalendarMonth.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import { scaleQuantize } from 'd3-scale';
 4 | 	import { timeFormat } from 'd3-time-format';
 5 | 	import { timeDay } from 'd3-time';
 6 | 
 7 | 	export let calcCellSize = d => d;
 8 | 	export let seriesColors = ['#fff5cc', '#ffeba9', '#ffe182', '#ffd754', '#ffcc00'];
 9 | 
10 | 	const { width, height, data, x, r, extents } = getContext('LayerCake');
11 | 
12 | 	const getDayOfWeek = timeFormat('%w');
13 | 	const getWeekOfYear = timeFormat('%U');
14 | 
15 | 	$: count = date => {
16 | 		const stringDate = date.toISOString().split('T')[0];
17 | 		const days = $data.filter(d => $x(d) === stringDate)[0];
18 | 		if (days) {
19 | 			return $r(days);
20 | 		}
21 | 		return 0;
22 | 	};
23 | 
24 | 	$: colorScale = scaleQuantize()
25 | 		.domain($extents.r)
26 | 		.range(seriesColors);
27 | 
28 | 	$: fillColor = day => {
29 | 		const n = count(day);
30 | 		return n ? colorScale(n) : '#fff';
31 | 	};
32 | 
33 | 	$: cellSize = calcCellSize($width, $height);
34 | 
35 | 	let days;
36 | 
37 | 	/* --------------------------------------------
38 | 	 * Calculate what month we're in and generate the full days of that month
39 | 	 */
40 | 	$: {
41 | 		const minDate = $extents.x[0];
42 | 		const parts = minDate.split('-').map(d => +d);
43 | 
44 | 		days = timeDay.range(new Date(Date.UTC(parts[0], parts[1] - 1, 1)), new Date(Date.UTC(parts[0], parts[1], 1)));
45 | 	}
46 | 
47 | 	$: rectX = day => getDayOfWeek(day) * cellSize;
48 | 	$: rectY = day => {
49 | 		const startWeek = getWeekOfYear(new Date(day.getUTCFullYear(), day.getUTCMonth(), 1));
50 | 		const thisWeek = getWeekOfYear(day);
51 | 		const weekDiff = thisWeek - startWeek;
52 | 		return weekDiff * cellSize;
53 | 	};
54 | 
55 | 	function showCount(day) {
56 | 		console.log(day, count(day));
57 | 	}
58 | </script>
59 | 
60 | {#each days as day}
61 | 	<rect
62 | 		class="day"
63 | 		width="{cellSize}"
64 | 		height="{cellSize}"
65 | 		x="{rectX(day)}"
66 | 		y="{rectY(day)}"
67 | 		style="fill:{fillColor(day)};"
68 | 		on:mouseenter="{showCount(day)}"
69 | 	/>
70 | {/each}
71 | 
72 | <style>
73 | 	.day {
74 | 		stroke: #000;
75 | 		stroke-width: 1;
76 | 		fill: #fff;
77 | 	}
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/AxisX.html.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { xScale, padding } = getContext('LayerCake');
 5 | 
 6 | 	export let gridlines = true;
 7 | 	export let tickMarks = false;
 8 | 	export let formatTick = d => d;
 9 | 	export let baseline = false;
10 | 	export let snapTicks = false;
11 | 	export let ticks = undefined;
12 | 	export let yTick = 7;
13 | 	export let dyTick = 0;
14 | 
15 | 	$: isBandwidth = typeof $xScale.bandwidth === 'function';
16 | 
17 | 	$: tickVals = Array.isArray(ticks) ? ticks :
18 | 		isBandwidth ?
19 | 			$xScale.domain() :
20 | 			typeof ticks === 'function' ?
21 | 				ticks($xScale.ticks()) :
22 | 					$xScale.ticks(ticks);
23 | </script>
24 | 
25 | <div class='axis x-axis' class:snapTicks>
26 | 	{#each tickVals as tick, i}
27 | 		{#if gridlines !== false}
28 | 			<div class="gridline" style='left:{$xScale(tick)}%;top: -{$padding.top}px;bottom: 0;'></div>
29 | 		{/if}
30 | 		{#if tickMarks === true}
31 | 			<div class="tick-mark" style='left:{$xScale(tick) + (isBandwidth ? $xScale.bandwidth() / 2 : 0)}%;height:6px;bottom: -6px;'></div>
32 | 		{/if}
33 | 		<div
34 | 			class='tick tick-{ i }'
35 | 			style='left:{$xScale(tick) + (isBandwidth ? $xScale.bandwidth() / 2 : 0)}%;top:100%;'>
36 | 			<div
37 | 				class="text"
38 | 				style='top:{(yTick + dyTick)}px;'>{formatTick(tick)}</div>
39 | 		</div>
40 | 	{/each}
41 | 	{#if baseline === true}
42 | 		<div class="baseline" style='top: 100%;width: 100%;'></div>
43 | 	{/if}
44 | </div>
45 | 
46 | <style>
47 | 	.axis,
48 | 	.tick,
49 | 	.tick-mark,
50 | 	.gridline,
51 | 	.baseline {
52 | 		position: absolute;
53 | 	}
54 | 	.axis {
55 | 		width: 100%;
56 | 		height: 100%;
57 | 	}
58 | 	.tick {
59 | 		font-size: .725em;
60 | 		font-weight: 200;
61 | 	}
62 | 
63 | 	.gridline {
64 | 		border-left: 1px dashed #aaa;
65 | 	}
66 | 
67 | 	.tick-mark {
68 | 		border-left: 1px solid #aaa;
69 | 	}
70 | 	.baseline {
71 | 		border-top: 1px solid #aaa;
72 | 	}
73 | 
74 | 	.tick .text {
75 | 		color: #666;
76 | 		position: relative;
77 | 		white-space: nowrap;
78 | 		transform: translateX(-50%);
79 | 	}
80 | 	/* This looks a little better at 40 percent than 50 */
81 | 	.axis.snapTicks .tick:last-child {
82 | 		transform: translateX(-40%);
83 | 	}
84 | 	.axis.snapTicks .tick.tick-0 {
85 | 		transform: translateX(40%);
86 | 	}
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/CirclePackForce.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 	import {
 4 | 		forceSimulation,
 5 | 		forceX,
 6 | 		forceManyBody,
 7 | 		forceCollide,
 8 | 		forceCenter,
 9 | 	} from 'd3-force';
10 | 
11 | 	const { data, width, height, xScale, xGet, rGet, zGet } = getContext('LayerCake');
12 | 
13 | 	/* --------------------------------------------
14 | 	 * Here are some values to play with, but most every force layout
15 | 	 * is going be unique and this component will need to be customized
16 | 	 * See more: https://github.com/d3/d3-force/blob/master/README.md
17 | 	 */
18 | 	export let manyBodyStrength = 5;
19 | 	export let xStrength = 0.1;
20 | 	/* --------------------------------------------
21 | 	 * Set a manual color, otherwise it will default to using the zScale
22 | 	 */
23 | 	export let nodeColor = undefined;
24 | 	export let nodeStrokeWidth = 1;
25 | 	export let nodeStrokeColor = '#fff';
26 | 	export let groupBy = true;
27 | 
28 | 	/* --------------------------------------------
29 | 	 * Make a copy because the simulation will alter the objects
30 | 	 */
31 | 	const initialNodes = $data.map((d) => ({ ...d }));
32 | 
33 | 	const simulation = forceSimulation(initialNodes)
34 | 
35 | 	let nodes = [];
36 | 
37 | 	simulation.on("tick", () => {
38 | 		nodes = simulation.nodes()
39 | 	})
40 | 
41 | 	/* ----------------------------------------------
42 | 	 * When variables change, set forces and restart the simulation
43 | 	 */
44 | 	$: {
45 | 		simulation
46 | 			.force('x', forceX().x(d => {
47 | 				return groupBy === true ? $xGet(d) + $xScale.bandwidth() / 2 : $width / 2;
48 | 			}).strength(xStrength))
49 | 			.force('center', forceCenter($width / 2, $height / 2))
50 | 			.force('charge', forceManyBody().strength(manyBodyStrength))
51 | 			.force('collision', forceCollide().radius(d => {
52 | 				return $rGet(d) + nodeStrokeWidth / 2; // Divide this by two because an svg stroke is drawn halfway out
53 | 			}))
54 | 			.force('center', forceCenter($width / 2, $height / 2))
55 | 			.alpha(1)
56 | 			.restart()
57 | 	}
58 | 
59 | </script>
60 | 	{#each nodes as point}
61 |     <circle
62 | 			class='node'
63 | 			r={$rGet(point)}
64 | 			fill={nodeColor || $zGet(point)}
65 | 			stroke-width={nodeStrokeWidth}
66 | 			stroke={nodeStrokeColor}
67 | 			cx='{point.x}'
68 | 			cy='{point.y}'
69 | 		>
70 |     	<!-- <title>{point[$custom.title]}</title> -->
71 | 		</circle>
72 | 	{/each}
73 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Beeswarm.html.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { data, xGet, zGet, padding, height, config, custom } = getContext('LayerCake');
 5 | 
 6 | 	export let r = 3;
 7 | 	export let strokeWidth = 0;
 8 | 	export let strokeColor = '#fff';
 9 | 	export let spacing = 1.5;
10 | 
11 | 	$: circles = dodge($data, { rds: r * 2 + spacing + strokeWidth, x: $xGet });
12 | 
13 | 	function dodge(data, { rds = 1, x = d => d } = {}) {
14 | 	  const radius2 = rds ** 2;
15 | 	  const circles = data.map(d => ({ x: x(d), [$config.z]: d[$config.z], data: d })).sort((a, b) => a.x - b.x);
16 | 	  const epsilon = 1e-3;
17 | 	  let head = null, tail = null;
18 | 
19 | 	  // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue.
20 | 	  function intersects(x, y) {
21 | 	    let a = head;
22 | 	    while (a) {
23 | 	      if (radius2 - epsilon > (a.x - x) ** 2 + (a.y - y) ** 2) {
24 | 	        return true;
25 | 	      }
26 | 	      a = a.next;
27 | 	    }
28 | 	    return false;
29 | 	  }
30 | 
31 | 	  // Place each circle sequentially.
32 | 	  for (const b of circles) {
33 | 
34 | 	    // Remove circles from the queue that can’t intersect the new circle b.
35 | 	    while (head && head.x < b.x - radius2) head = head.next;
36 | 
37 | 	    // Choose the minimum non-intersecting tangent.
38 | 	    if (intersects(b.x, b.y = 0)) {
39 | 	      let a = head;
40 | 	      b.y = Infinity;
41 | 	      do {
42 | 	        let y = a.y + Math.sqrt(radius2 - (a.x - b.x) ** 2);
43 | 	        if (y < b.y && !intersects(b.x, y)) b.y = y;
44 | 	        a = a.next;
45 | 	      } while (a);
46 | 	    }
47 | 
48 | 	    // Add b to the queue.
49 | 	    b.next = null;
50 | 	    if (head === null) head = tail = b;
51 | 	    else tail = tail.next = b;
52 | 	  }
53 | 
54 | 	  return circles;
55 | 	}
56 | </script>
57 | 
58 | <div class='bee-group'>
59 | 	{#each circles as d}
60 | 		<div
61 | 			class="bee"
62 | 			style="
63 | 				background:{$zGet(d)};
64 | 				border-color:{strokeColor};
65 | 				border-width:{strokeWidth};
66 | 				left:{d.x}px;
67 | 				top:{$height - r - spacing - strokeWidth / 2 - d.y}px;
68 | 				width:{r * 2}px;
69 | 				height:{r * 2}px;
70 | 			"
71 | 		>
72 | 			<title>{$custom.getTitle(d)}</title>
73 | 		</div>
74 | 	{/each}
75 | 	</div>
76 | 
77 | <style>
78 | 	.bee {
79 | 		position: absolute;
80 | 		border-style: solid;
81 | 		border-radius: 50%;
82 | 		transform: translate(-50%, -50%);
83 | 	}
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/AxisX.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { width, height, xScale, yRange } = getContext('LayerCake');
 5 | 
 6 | 	export let gridlines = true;
 7 | 	export let tickMarks = false;
 8 | 	export let formatTick = d => d;
 9 | 	export let baseline = false;
10 | 	export let snapTicks = false;
11 | 	export let ticks = undefined;
12 | 	export let xTick = undefined;
13 | 	export let yTick = 16;
14 | 	export let dxTick = 0;
15 | 	export let dyTick = 0;
16 | 
17 | 	$: isBandwidth = typeof $xScale.bandwidth === 'function';
18 | 
19 | 	$: tickVals = Array.isArray(ticks) ? ticks :
20 | 		isBandwidth ?
21 | 			$xScale.domain() :
22 | 			typeof ticks === 'function' ?
23 | 				ticks($xScale.ticks()) :
24 | 					$xScale.ticks(ticks);
25 | 
26 | 	function textAnchor(i) {
27 | 		if (snapTicks === true) {
28 | 			if (i === 0) {
29 | 				return 'start';
30 | 			}
31 | 			if (i === tickVals.length - 1) {
32 | 				return 'end';
33 | 			}
34 | 		}
35 | 		return 'middle';
36 | 	}
37 | </script>
38 | 
39 | <g class='axis x-axis' class:snapTicks>
40 | 	{#each tickVals as tick, i}
41 | 		<g class='tick tick-{ i }' transform='translate({$xScale(tick)},{$yRange[0]})'>
42 | 			{#if gridlines !== false}
43 | 				<line class="gridline" y1='{$height * -1}' y2='0' x1='0' x2='0'></line>
44 | 			{/if}
45 | 			{#if tickMarks === true}
46 | 				<line class="tick-mark" y1='{0}' y2='{6}' x1='{xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}' x2='{xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}'></line>
47 | 			{/if}
48 | 			<text
49 | 				x="{xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}"
50 | 				y='{yTick}'
51 | 				dx='{dxTick}'
52 | 				dy='{dyTick}'
53 | 				text-anchor='{textAnchor(i)}'>{formatTick(tick)}</text>
54 | 		</g>
55 | 	{/each}
56 | 	{#if baseline === true}
57 | 		<line class="baseline" y1='{$height + 0.5}' y2='{$height + 0.5}' x1='0' x2='{$width}'></line>
58 | 	{/if}
59 | </g>
60 | 
61 | <style>
62 | 	.tick {
63 | 		font-size: .725em;
64 | 		font-weight: 200;
65 | 	}
66 | 
67 | 	line,
68 | 	.tick line {
69 | 		stroke: #aaa;
70 | 		stroke-dasharray: 2;
71 | 	}
72 | 
73 | 	.tick text {
74 | 		fill: #666;
75 | 	}
76 | 
77 | 	.tick .tick-mark,
78 | 	.baseline {
79 | 		stroke-dasharray: 0;
80 | 	}
81 | 	/* This looks slightly better */
82 | 	.axis.snapTicks .tick:last-child text {
83 | 		transform: translateX(3px);
84 | 	}
85 | 	.axis.snapTicks .tick.tick-0 text {
86 | 		transform: translateX(-3px);
87 | 	}
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/AxisY.html.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext } from 'svelte';
 3 | 
 4 | 	const { padding, xRange, yScale } = getContext('LayerCake');
 5 | 
 6 | 	export let ticks = 4;
 7 | 	export let tickMarks = false;
 8 | 	export let gridlines = true;
 9 | 	export let baseline = false;
10 | 	export let formatTick = d => d;
11 | 	export let xTick = -4;
12 | 	export let yTick = 2;
13 | 	// export let dxTick = 0;
14 | 	// export let dyTick = -4;
15 | 	// export let textAnchor = 'start';
16 | 
17 | 	$: isBandwidth = typeof $yScale.bandwidth === 'function';
18 | 
19 | 	$: tickVals = Array.isArray(ticks) ? ticks :
20 | 		isBandwidth ?
21 | 			$yScale.domain() :
22 | 			typeof ticks === 'function' ?
23 | 				ticks($yScale.ticks()) :
24 | 					$yScale.ticks(ticks);
25 | </script>
26 | 
27 | <div class='axis y-axis' style='transform:translate(-{$padding.left}px, 0)'>
28 | 	{#each tickVals as tick, i}
29 | 		<div class='tick tick-{i}' style='top:{$yScale(tick) + (isBandwidth ? $yScale.bandwidth () / 2 : 0)}%;left:{$xRange[0]}%;'>
30 | 			{#if gridlines !== false}
31 | 				<div class="gridline" style='top:0;left:{isBandwidth ? $padding.left : 0}px;right:-{$padding.left + $padding.right}px;'></div>
32 | 			{/if}
33 | 			{#if baseline !== false && i === 0}
34 | 				<div class="gridline baseline" style='top:0;left:{isBandwidth ? $padding.left : 0};right:-{$padding.left + $padding.right}px;'></div>
35 | 			{/if}
36 | 			{#if tickMarks === true}
37 | 				<div class="tick-mark" style='top:0;left:{isBandwidth ? $padding.left - 6 : 0}px;width:6px;'></div>
38 | 			{/if}
39 | 			<div
40 | 				class="text"
41 | 				style='
42 | 					top:{yTick - 3}px;
43 | 					left:{isBandwidth ? ($padding.left + xTick - 4) : 0}px;
44 | 					transform: translate({isBandwidth ? '-100%' : 0}, {isBandwidth ? -50 - Math.floor($yScale.bandwidth() / -2) : '-100'}%);
45 | 				'
46 | 			>{formatTick(tick)}</div>
47 | 		</div>
48 | 	{/each}
49 | </div>
50 | 
51 | <style>
52 | 	.axis,
53 | 	.tick,
54 | 	.tick-mark,
55 | 	.gridline,
56 | 	.baseline,
57 | 	.text {
58 | 		position: absolute;
59 | 	}
60 | 	.axis {
61 | 		width: 100%;
62 | 		height: 100%;
63 | 	}
64 | 	.tick {
65 | 		font-size: 12px;
66 | 		width: 100%;
67 | 		font-weight: 100;
68 | 	}
69 | 
70 | 	.gridline {
71 | 		border-top: 1px dashed #aaa;
72 | 	}
73 | 	.tick-mark {
74 | 		border-top: 1px solid #aaa;
75 | 	}
76 | 
77 | 	.baseline.gridline {
78 | 		border-top-style: solid;
79 | 	}
80 | 
81 | 	.tick .text {
82 | 		color: #666;
83 | 	}
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Map.svg.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext, createEventDispatcher } from 'svelte';
 3 | 	import { geoPath } from 'd3-geo';
 4 | 	import { raise } from 'layercake';
 5 | 
 6 | 	const { data, width, height, zGet } = getContext('LayerCake');
 7 | 
 8 | 	/* --------------------------------------------
 9 | 	 * Require a D3 projection function
10 | 	 */
11 | 	export let projection;
12 | 
13 | 	/* --------------------------------------------
14 | 	 * Optional aspect ratio
15 | 	 */
16 | 	export let fixedAspectRatio = undefined;
17 | 
18 | 	/* --------------------------------------------
19 | 	 * Allow for custom styling
20 | 	 */
21 | 	export let fill = undefined; // The fill will be determined by the scale, unless this prop is set
22 | 	export let stroke = '#333';
23 | 	export let strokeWidth = 0.5;
24 | 
25 | 	/* --------------------------------------------
26 | 	 * Add this optional export in case you want to plot only a subset of the features
27 | 	 * while keeping the zoom on the whole geojson feature set
28 | 	 */
29 | 	export let features = $data.features;
30 | 
31 | 	/* --------------------------------------------
32 | 	 * Here's how you would do cross-component hovers
33 | 	 */
34 | 	const dispatch = createEventDispatcher();
35 | 
36 | 	$: fitSizeRange = fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height];
37 | 
38 | 	$: projectionFn = projection()
39 | 		.fitSize(fitSizeRange, $data);
40 | 
41 | 	$: geoPathFn = geoPath(projectionFn);
42 | 
43 | 	function handleMousemove(feature) {
44 | 		return function handleMousemoveFn(e) {
45 | 			raise(this);
46 | 			// When the element gets raised, it flashes 0,0 for a second so skip that
47 | 			if (e.layerX !== 0 && e.layerY !== 0) {
48 | 				dispatch('mousemove', { e, props: feature.properties });
49 | 			}
50 | 		}
51 | 	}
52 | </script>
53 | 
54 | <g
55 | 	class="map-group"
56 | 	on:mouseout={(e) => dispatch('mouseout')}
57 | >
58 | 	{#each features as feature}
59 | 		<path
60 | 			class="feature-path"
61 | 			fill="{fill || $zGet(feature.properties)}"
62 | 			stroke={stroke}
63 | 			stroke-width={strokeWidth}
64 | 			d="{geoPathFn(feature)}"
65 | 			on:mouseover={(e) => dispatch('mousemove', { e, props: feature.properties })}
66 | 			on:mousemove={handleMousemove(feature)}
67 | 		></path>
68 | 	{/each}
69 | </g>
70 | 
71 | <style>
72 | 	/* .feature-path {
73 | 		stroke: #333;
74 | 		stroke-width: 0.5px;
75 | 	} */
76 | 	.feature-path:hover {
77 | 		stroke: #000;
78 | 		stroke-width: 2px;
79 | 	}
80 | </style>
81 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/SyncedBrushWrapper.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import { LayerCake, Svg, Html } from 'layercake';
  3 | 
  4 | 	import Line from './Line.svelte';
  5 | 	import Area from './Area.svelte';
  6 | 	import AxisX from './AxisX.svelte';
  7 | 	import AxisY from './AxisY.svelte';
  8 | 	import Brush from './Brush.svelte';
  9 | 
 10 | 	export let min = null;
 11 | 	export let max = null;
 12 | 	export let xKey = 'x';
 13 | 	export let yKey = 'y';
 14 | 	export let data = [];
 15 | 
 16 | 	let brushedData;
 17 | 	$: {
 18 | 		brushedData = data.slice((min || 0) * data.length, (max || 1) * data.length);
 19 | 		if (brushedData.length < 2) {
 20 | 			brushedData = data.slice(min * data.length, min * data.length + 2)
 21 | 		}
 22 | 	}
 23 | </script>
 24 | 
 25 | <style>
 26 | 	.chart-wrapper {
 27 | 		width: 48%;
 28 | 		height: 48%;
 29 | 	}
 30 | 	/*
 31 | 		The wrapper div needs to have an explicit width and height in CSS.
 32 | 		It can also be a flexbox child or CSS grid element.
 33 | 		The point being it needs dimensions since the <LayerCake> element will
 34 | 		expand to fill it.
 35 | 	*/
 36 | 	.chart-container {
 37 | 		width: 100%;
 38 | 		height: 80%;
 39 | 	}
 40 | 	.brush-container {
 41 | 		width: 100%;
 42 | 		height: 20%;
 43 | 	}
 44 | </style>
 45 | 
 46 | <div class="chart-wrapper">
 47 | 	<div class="chart-container">
 48 | 		<LayerCake
 49 | 			padding={{ right: 10, bottom: 20, left: 25 }}
 50 | 			x={xKey}
 51 | 			y={yKey}
 52 | 			yDomain={[0, null]}
 53 | 			data={brushedData}
 54 | 		>
 55 | 			<Svg>
 56 | 				<AxisX
 57 | 					ticks={ticks => {
 58 | 						const filtered = ticks.filter(t => t % 1 === 0);
 59 | 						if (filtered.length > 7) {
 60 | 							return filtered.filter((t, i) => i % 2 === 0);
 61 | 						}
 62 | 						return filtered;
 63 | 					}}
 64 | 				/>
 65 | 				<AxisY
 66 | 					ticks={2}
 67 | 				/>
 68 | 				<Line
 69 | 					stroke='#00e047'
 70 | 				/>
 71 | 				<Area
 72 | 					fill='#00e04710'
 73 | 				/>
 74 | 			</Svg>
 75 | 		</LayerCake>
 76 | 	</div>
 77 | 
 78 | 	<div class="brush-container">
 79 | 		<LayerCake
 80 | 			padding={{ top: 5 }}
 81 | 			x={xKey}
 82 | 			y={yKey}
 83 | 			yDomain={[0, null]}
 84 | 			data={data}
 85 | 		>
 86 | 			<Svg>
 87 | 				<Line
 88 | 					stroke='#00e047'
 89 | 				/>
 90 | 				<Area
 91 | 					fill='#00e04710'
 92 | 				/>
 93 | 			</Svg>
 94 | 			<Html>
 95 | 				<Brush
 96 | 					bind:min={min}
 97 | 					bind:max={max}
 98 | 				/>
 99 | 			</Html>
100 | 		</LayerCake>
101 | 	</div>
102 | </div>
103 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/SharedTooltip.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { getContext } from 'svelte';
 3 |   import { format } from 'd3-format';
 4 | 
 5 |   import QuadTree from './QuadTree.svelte';
 6 | 
 7 |   const { data, width, yScale, config } = getContext('LayerCake');
 8 | 
 9 |   const commas = format(',');
10 |   const titleCase = d => d.replace(/^\w/, w => w.toUpperCase());
11 | 
12 |   export let tooltipOffset = 20;
13 |   export let dataset = undefined;
14 |   export let formatTitle = d => d;
15 |   export let formatKey = d => titleCase(d);
16 |   export let formatValue = d => isNaN(+d) ? d : commas(d);
17 | 
18 |   const w = 150;
19 |   const w2 = w / 2;
20 |   let top = 0;
21 | 
22 | 	/* --------------------------------------------
23 | 	 * Sort the keys by the highest value
24 | 	 */
25 |   function sortResult(result) {
26 |     if (Object.keys(result).length === 0) return [];
27 |     const rows = Object.keys(result).filter(d => d !== $config.x).map(key => {
28 |       return {
29 |         key,
30 |         value: result[key]
31 |       };
32 |     }).sort((a, b) => b.value - a.value);
33 | 
34 |     return rows;
35 |   }
36 | </script>
37 | 
38 | <style>
39 | 	.tooltip {
40 | 		position: absolute;
41 | 		font-size: 13px;
42 | 		pointer-events: none;
43 | 		border: 1px solid #ccc;
44 | 		background: rgba(255, 255, 255, 0.85);
45 | 		transform: translate(-50%, -100%);
46 |     padding: 5px;
47 |     z-index: 15;
48 |     pointer-events: none;
49 |   }
50 |   .line {
51 |     position: absolute;
52 |     top: 0;
53 |     bottom: 0;
54 |     width: 1px;
55 |     border-left: 1px dotted #666;
56 |     pointer-events: none;
57 |   }
58 |   .tooltip,
59 |   .line {
60 |     transition: left 250ms ease-out, top 250ms ease-out;
61 |   }
62 |   .title {
63 |     font-weight: bold;
64 |   }
65 |   .key {
66 |     color: #999;
67 |   }
68 | </style>
69 | 
70 | <QuadTree
71 |   dataset={dataset || $data}
72 |   y='x'
73 |   let:x
74 |   let:y
75 |   let:visible
76 |   let:found
77 |   let:e
78 | >
79 |   {#if visible === true}
80 |     <div
81 |       style="left:{x}px;"
82 |       class="line"></div>
83 |     <div
84 |       class="tooltip"
85 |       style="
86 |         width:{w}px;
87 |         display: { visible ? 'block' : 'none' };
88 |         top:{$yScale(sortResult(found)[0].value) - tooltipOffset}px;
89 |         left:{Math.min(Math.max(w2, x), $width - w2)}px;"
90 |       >
91 |         <div class="title">{formatTitle(found[$config.x])}</div>
92 |         {#each sortResult(found) as row}
93 |           <div class="row"><span class="key">{formatKey(row.key)}:</span> {formatValue(row.value)}</div>
94 |         {/each}
95 |     </div>
96 |   {/if}
97 | </QuadTree>
98 | 
99 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/SyncedBrushWrapper.percent-range.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import { LayerCake, ScaledSvg, Html } from 'layercake';
  3 | 
  4 | 	import Line from './Line.svelte';
  5 | 	import Area from './Area.svelte';
  6 | 	import AxisX from './AxisX.html.svelte';
  7 | 	import AxisY from './AxisY.html.svelte';
  8 | 	import Brush from './Brush.svelte';
  9 | 
 10 | 	export let min = null;
 11 | 	export let max = null;
 12 | 	export let xKey = 'x';
 13 | 	export let yKey = 'y';
 14 | 	export let data = [];
 15 | 
 16 | 	let brushedData;
 17 | 	$: {
 18 | 		brushedData = data.slice((min || 0) * data.length, (max || 1) * data.length);
 19 | 		if (brushedData.length < 2) {
 20 | 			brushedData = data.slice(min * data.length, min * data.length + 2)
 21 | 		}
 22 | 	}
 23 | </script>
 24 | 
 25 | <style>
 26 | 	.chart-wrapper {
 27 | 		width: 48%;
 28 | 		height: 48%;
 29 | 	}
 30 | 	/*
 31 | 		The wrapper div needs to have an explicit width and height in CSS.
 32 | 		It can also be a flexbox child or CSS grid element.
 33 | 		The point being it needs dimensions since the <LayerCake> element will
 34 | 		expand to fill it.
 35 | 	*/
 36 | 	.chart-container {
 37 | 		width: 100%;
 38 | 		height: 80%;
 39 | 	}
 40 | 	.brush-container {
 41 | 		width: 100%;
 42 | 		height: 20%;
 43 | 	}
 44 | </style>
 45 | 
 46 | <div class="chart-wrapper">
 47 | 	<div class="chart-container">
 48 | 		<LayerCake
 49 | 			ssr={true}
 50 | 			percentRange={true}
 51 | 			padding={{ right: 10, bottom: 20, left: 25 }}
 52 | 			x={xKey}
 53 | 			y={yKey}
 54 | 			yDomain={[0, null]}
 55 | 			data={brushedData}
 56 | 		>
 57 | 			<Html>
 58 | 				<AxisX
 59 | 					ticks={ticks => {
 60 | 						const filtered = ticks.filter(t => t % 1 === 0);
 61 | 						if (filtered.length > 7) {
 62 | 							return filtered.filter((t, i) => i % 2 === 0);
 63 | 						}
 64 | 						return filtered;
 65 | 					}}
 66 | 				/>
 67 | 				<AxisY
 68 | 					ticks={2}
 69 | 				/>
 70 | 			</Html>
 71 | 			<ScaledSvg>
 72 | 				<Line
 73 | 					stroke='#00e047'
 74 | 				/>
 75 | 				<Area
 76 | 					fill='#00e04710'
 77 | 				/>
 78 | 			</ScaledSvg>
 79 | 		</LayerCake>
 80 | 	</div>
 81 | 
 82 | 	<div class="brush-container">
 83 | 		<LayerCake
 84 | 			ssr={true}
 85 | 			percentRange={true}
 86 | 			padding={{ top: 5 }}
 87 | 			x={xKey}
 88 | 			y={yKey}
 89 | 			yDomain={[0, null]}
 90 | 			data={data}
 91 | 		>
 92 | 			<ScaledSvg>
 93 | 				<Line
 94 | 					stroke='#00e047'
 95 | 				/>
 96 | 				<Area
 97 | 					fill='#00e04710'
 98 | 				/>
 99 | 			</ScaledSvg>
100 | 			<Html>
101 | 				<Brush
102 | 					bind:min={min}
103 | 					bind:max={max}
104 | 				/>
105 | 			</Html>
106 | 		</LayerCake>
107 | 	</div>
108 | </div>
109 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/SharedTooltip.percent-range.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { getContext } from 'svelte';
 3 |   import { format } from 'd3-format';
 4 | 
 5 |   import QuadTree from './QuadTree.percent-range.svelte';
 6 | 
 7 |   const { data, width, yScale, config } = getContext('LayerCake');
 8 | 
 9 |   const commas = format(',');
10 |   const titleCase = d => d.replace(/^\w/, w => w.toUpperCase());
11 | 
12 |   export let tooltipOffset = 20;
13 |   export let dataset;
14 |   export let formatTitle = d => d;
15 |   export let formatKey = d => titleCase(d);
16 |   export let formatValue = d => isNaN(+d) ? d : commas(d);
17 | 
18 |   const w = 150;
19 |   const w2 = w / 2;
20 |   let top = 0;
21 | 
22 | 	/* --------------------------------------------
23 | 	 * Sort the keys by the highest value
24 | 	 */
25 |   function sortResult(result) {
26 |     if (Object.keys(result).length === 0) return [];
27 |     const rows = Object.keys(result).filter(d => d !== $config.x).map(key => {
28 |       return {
29 |         key,
30 |         value: result[key]
31 |       };
32 |     }).sort((a, b) => b.value - a.value);
33 | 
34 |     return rows;
35 |   }
36 | </script>
37 | 
38 | <style>
39 | 	.tooltip {
40 | 		position: absolute;
41 | 		font-size: 13px;
42 | 		pointer-events: none;
43 | 		border: 1px solid #ccc;
44 | 		background: rgba(255, 255, 255, 0.85);
45 | 		transform: translate(-50%, -100%);
46 |     padding: 5px;
47 |     z-index: 15;
48 |   }
49 |   .line {
50 |     position: absolute;
51 |     top: 0;
52 |     bottom: 0;
53 |     width: 1px;
54 |     border-left: 1px dotted #666;
55 |     pointer-events: none;
56 |   }
57 |   .tooltip,
58 |   .line {
59 |     transition: left 250ms ease-out, top 250ms ease-out;
60 |   }
61 |   .title {
62 |     font-weight: bold;
63 |   }
64 |   .key {
65 |     color: #999;
66 |   }
67 | </style>
68 | 
69 | <QuadTree
70 |   dataset={dataset || $data}
71 |   y='x'
72 |   let:x
73 |   let:y
74 |   let:visible
75 |   let:found
76 |   let:e
77 | >
78 |   {#if visible === true}
79 |     <div
80 |       style="left:{(x / 100) * $width }px;"
81 |       class="line"></div>
82 |     <div
83 |       class="tooltip"
84 |       style="
85 |         width:{w}px;
86 |         display: { visible ? 'block' : 'none' };
87 |         top:calc({$yScale(sortResult(found)[0].value)}% - {tooltipOffset}px);
88 |         left:{Math.min(Math.max(w2, (x / 100) * $width), $width - w2)}px;"
89 |       >
90 |         <div class="title">{formatTitle(found[$config.x])}</div>
91 |         {#each sortResult(found) as row}
92 |           <div class="row"><span class="key">{formatKey(row.key)}:</span> {formatValue(row.value)}</div>
93 |         {/each}
94 |     </div>
95 |   {/if}
96 | </QuadTree>
97 | 
98 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/ForceDirectedGraph.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	// Based on this example https://observablehq.com/@d3/force-directed-graph
 3 | 	import { getContext } from 'svelte';
 4 | 	import {
 5 | 		forceSimulation,
 6 | 		forceLink,
 7 | 		forceManyBody,
 8 | 		forceCenter
 9 | 	} from 'd3-force';
10 | 
11 | 	const { data, width, height, zGet, x } = getContext('LayerCake');
12 | 
13 | 	/* --------------------------------------------
14 | 	 * Here are some values to play with, but most every force layout
15 | 	 * is going be unique and this component will need to be customized
16 | 	 * See more: https://github.com/d3/d3-force/blob/master/README.md
17 | 	 */
18 | 	export let linkDistance = 30;
19 | 	export let nodeRadius = 5;
20 | 	export let manyBodyStrength = -30;
21 | 	/* --------------------------------------------
22 | 	 * Set a manual color, otherwise it will default to using the zScale
23 | 	 */
24 | 	export let nodeColor = undefined;
25 | 	export let linkColor = '#999';
26 | 	export let linkOpacity = 0.6;
27 | 	export let nodeStrokeColor = '#fff';
28 | 	export let nodeStrokeWidth = 1;
29 | 	export let ticks = 150;
30 | 
31 | 	let nodes = $data.nodes;
32 | 	let links = $data.links;
33 | 
34 | 	$: simulation = forceSimulation($data.nodes)
35 | 		.force('link', forceLink($data.links).id($x).distance(linkDistance))
36 | 		.force('charge', forceManyBody().strength(manyBodyStrength))
37 | 		.force('center', forceCenter($width / 2, $height / 2))
38 | 		// .on('tick', simulationUpdate)
39 | 		.stop();
40 | 
41 | 		// $: {
42 | 		// 	for ( let i = 0; i < ticks; i += 1 ) {
43 | 		// 		requestAnimationFrame(() => {
44 | 		// 			simulation.tick();
45 | 		// 			nodes = [...nodes];
46 | 		// 			links = [...links];
47 | 		// 		});
48 | 		// 	}
49 | 		// }
50 | 
51 | 	function simulationUpdate (i) {
52 | 		simulation.tick();
53 | 		nodes = [...nodes];
54 | 		links = [...links];
55 | 		if (i >= ticks) {
56 | 			simulation.stop();
57 | 		} else {
58 | 			requestAnimationFrame(() => {
59 | 				simulationUpdate(++i);
60 | 			});
61 | 		}
62 | 	}
63 | 
64 | 	$: if (simulation) {
65 | 		simulationUpdate(0);
66 | 	};
67 | </script>
68 | 	{#each links as link}
69 | 		<g stroke='{linkColor}' stroke-opacity='{linkOpacity}'>
70 | 			<line
71 | 				x1='{link.source.x}'
72 | 				y1='{link.source.y}'
73 | 				x2='{link.target.x}'
74 | 				y2='{link.target.y}'
75 | 			>
76 | 				<title>{$x(link.source)}</title>
77 | 			</line>
78 | 		</g>
79 | 	{/each}
80 | 
81 | 	{#each nodes as point}
82 |     <circle
83 | 			class='node'
84 | 			r={nodeRadius}
85 | 			fill={nodeColor || $zGet(point)}
86 | 			stroke-width={nodeStrokeWidth}
87 | 			stroke={nodeStrokeColor}
88 | 			cx='{point.x}'
89 | 			cy='{point.y}'
90 | 		>
91 |     	<title>{$x(point)}</title>
92 | 		</circle>
93 | 	{/each}
94 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Arrows.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { getContext, onMount } from 'svelte';
 3 | 
 4 | 	import { swoopyArrow, getElPosition, parseCssValue } from '../modules/arrowUtils.js';
 5 | 
 6 | 	export let annotations = [];
 7 | 
 8 | 	// If you're loading this component via sapper or another multi-page app
 9 | 	// you will likely need to set an explicit path to the svg marker definition
10 | 	// for Safari compatibility. See https://github.com/sveltejs/svelte/issues/3450
11 | 	// Otherwise, you can remove this variable from here and from the template below
12 | 	$: basePath = typeof window !== 'undefined' ? window.location.href : '';
13 | 
14 | 	const { width, height } = getContext('LayerCake');
15 | 
16 | 	/* --------------------------------------------
17 | 	 * Some lookups to convert between x, y / width, height terminology
18 | 	 * and CSS names
19 | 	 */
20 | 	const lookups = [
21 | 		{ dimension: 'width', css: 'left', position: 'x' },
22 | 		{ dimension: 'height', css: 'top', position: 'y' }
23 | 	];
24 | 
25 | 	let d = () => '';
26 | 	let annotationEls;
27 | 
28 | 	onMount(() => {
29 | 		annotationEls = getContext('annotation-els');
30 | 	});
31 | 
32 | 	function setPath (w, h) {
33 | 		return (anno, i, arrow) => {
34 | 			const el = annotationEls[i];
35 | 			/* --------------------------------------------
36 | 			 * Parse our attachment directives to know where to start the arrowhead
37 | 			 * measuring a bounding box based on our annotation el
38 | 			 */
39 | 			const arrowSource = getElPosition(el);
40 | 			const sourceCoords = arrow.source.anchor.split('-').map((q, j) => {
41 | 				const point = q === 'middle' ? arrowSource[lookups[j].css] + (arrowSource[lookups[j].dimension] / 2) : arrowSource[q];
42 | 				return point + (parseCssValue(arrow.source[`d${lookups[j].position}`], i, arrowSource.width, arrowSource.height));
43 | 			});
44 | 
45 | 			/* --------------------------------------------
46 | 			 * Default to clockwise
47 | 			 */
48 | 			const clockwise = typeof arrow.clockwise === 'undefined' ? true : arrow.clockwise;
49 | 
50 | 			/* --------------------------------------------
51 | 			 * Parse where we're drawing to
52 | 			 */
53 | 			const targetCoords = [arrow.target.x, arrow.target.y].map((q, j) => {
54 | 				return parseCssValue(q, j, w, h);
55 | 			});
56 | 
57 | 			/* --------------------------------------------
58 | 			 * Create arrow path
59 | 			 */
60 | 			return swoopyArrow()
61 | 				.angle(Math.PI / 2)
62 | 				.clockwise(clockwise)
63 | 				.x(q => q[0])
64 | 				.y(q => q[1])([sourceCoords, targetCoords]);
65 | 		};
66 | 	}
67 | 
68 | 	$: if (annotationEls) d = setPath($width, $height);
69 | </script>
70 | 
71 | 
72 | {#if annotations.length}
73 | 	<g class="swoops">
74 | 		{#each annotations as anno, i}
75 | 			{#if anno.arrows}
76 | 				{#each anno.arrows as arrow}
77 | 					<path
78 | 						marker-end='url({ basePath }#arrowhead)'
79 | 						d='{d(anno, i, arrow)}'></path>
80 | 				{/each}
81 | 			{/if}
82 | 		{/each}
83 | 	</g>
84 | {/if}
85 | 
86 | <style>
87 | 	.swoops {
88 | 		position: absolute;
89 | 		max-width: 200px;
90 | 		line-height: 14px;
91 | 	}
92 | 	.swoops path {
93 | 		fill: none;
94 | 		stroke: #000;
95 | 		stroke-width: 1;
96 | 	}
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Brush.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import { clamp } from 'yootils';
  3 | 
  4 | 	export let min;
  5 | 	export let max;
  6 | 
  7 | 	let brush;
  8 | 
  9 | 	const p = x => {
 10 | 		const { left, right } = brush.getBoundingClientRect();
 11 | 		return clamp((x - left) / (right - left), 0, 1);
 12 | 	};
 13 | 
 14 | 	const handler = fn => {
 15 | 		return e => {
 16 | 			if (e.type === 'touchstart') {
 17 | 				if (e.touches.length !== 1) return;
 18 | 				e = e.touches[0];
 19 | 			}
 20 | 
 21 | 			const id = e.identifier;
 22 | 			const start = { min, max, p: p(e.clientX) };
 23 | 
 24 | 			const handle_move = e => {
 25 | 				if (e.type === 'touchmove') {
 26 | 					if (e.changedTouches.length !== 1) return;
 27 | 					e = e.changedTouches[0];
 28 | 					if (e.identifier !== id) return;
 29 | 				}
 30 | 
 31 | 				fn(start, p(e.clientX));
 32 | 			};
 33 | 
 34 | 			const handle_end = e => {
 35 | 				if (e.type === 'touchend') {
 36 | 					if (e.changedTouches.length !== 1) return;
 37 | 					if (e.changedTouches[0].identifier !== id) return;
 38 | 				} else if (e.target === brush) {
 39 | 					clear();
 40 | 				}
 41 | 
 42 | 				window.removeEventListener('mousemove', handle_move);
 43 | 				window.removeEventListener('mouseup', handle_end);
 44 | 
 45 | 				window.removeEventListener('touchmove', handle_move);
 46 | 				window.removeEventListener('touchend', handle_end);
 47 | 			};
 48 | 
 49 | 			window.addEventListener('mousemove', handle_move);
 50 | 			window.addEventListener('mouseup', handle_end);
 51 | 
 52 | 			window.addEventListener('touchmove', handle_move);
 53 | 			window.addEventListener('touchend', handle_end);
 54 | 		};
 55 | 	};
 56 | 
 57 | 	const clear = () => {
 58 | 		min = null;
 59 | 		max = null;
 60 | 	}
 61 | 
 62 | 	const reset = handler((start, p) => {
 63 | 		min = clamp(Math.min(start.p, p), 0, 1);
 64 | 		max = clamp(Math.max(start.p, p), 0, 1);
 65 | 	});
 66 | 
 67 | 	const move = handler((start, p) => {
 68 | 		const d = clamp(p - start.p, -start.min, 1 - start.max);
 69 | 		min = start.min + d;
 70 | 		max = start.max + d;
 71 | 	});
 72 | 
 73 | 	const adjust_min = handler((start, p) => {
 74 | 		min = p > start.max ? start.max : p;
 75 | 		max = p > start.max ? p : start.max;
 76 | 	});
 77 | 
 78 | 	const adjust_max = handler((start, p) => {
 79 | 		min = p < start.min ? p : start.min;
 80 | 		max = p < start.min ? start.min : p;
 81 | 	});
 82 | 
 83 | 	$: left = 100 * min;
 84 | 	$: right = 100 * (1 - max);
 85 | </script>
 86 | 
 87 | <div bind:this={brush} class="brush-outer" on:mousedown|stopPropagation={reset} on:touchstart|stopPropagation={reset}>
 88 | 	{#if min !== null}
 89 | 		<div class="brush-inner" on:mousedown|stopPropagation={move} on:touchstart|stopPropagation={move} style="left: {left}%; right: {right}%"></div>
 90 | 		<div class="brush-handle" on:mousedown|stopPropagation={adjust_min} on:touchstart|stopPropagation={adjust_min} style="left: {left}%"></div>
 91 | 		<div class="brush-handle" on:mousedown|stopPropagation={adjust_max} on:touchstart|stopPropagation={adjust_max} style="right: {right}%"></div>
 92 | 	{/if}
 93 | </div>
 94 | 
 95 | <style>
 96 | 	.brush-outer {
 97 | 		position: relative;
 98 | 		width: 100%;
 99 | 		height: calc(100% + 5px);
100 | 		top: -5px;
101 | 	}
102 | 
103 | 	.brush-inner {
104 | 		position: absolute;
105 | 		height: 100%;
106 | 		cursor: move;
107 | 		/* mix-blend-mode: difference; */
108 | 		background-color: #cccccc90;
109 | 		/* border: 1px solid #000; */
110 | 	}
111 | 
112 | 	.brush-handle {
113 | 		position: absolute;
114 | 		width: 0;
115 | 		height: 100%;
116 | 		cursor: ew-resize;
117 | 	}
118 | 
119 | 	.brush-handle::before {
120 | 		position: absolute;
121 | 		content: '';
122 | 		width: 8px;
123 | 		left: -4px;
124 | 		height: 100%;
125 | 		background: transparent;
126 | 	}
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/CirclePack.html.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import { stratify, pack, hierarchy } from 'd3-hierarchy'
  3 | 	import { getContext } from 'svelte';
  4 | 	import { format } from 'd3-format';
  5 | 
  6 | 	const { width, height, data } = getContext('LayerCake');
  7 | 
  8 |   // export let name = '';
  9 |   export let idKey = 'id';
 10 |   export let parentKey = undefined;
 11 |   export let valueKey = 'value';
 12 |   export let labelVisibilityThreshold = r => r > 25;
 13 |   export let fill = '#fff';
 14 | 	export let stroke = '#999';
 15 | 	export let textColor = '#333';
 16 | 	export let textStroke = 0;
 17 | 	export let textStrokeColor = '#000';
 18 | 	export let sortBy = (a, b) => b.value - a.value; // 'depth' is also a popular choice
 19 | 
 20 |   export let circlePadding = 0;
 21 | 
 22 |   /* --------------------------------------------
 23 |    * This component will automatically group your data
 24 |    * into one group if no `parentKey` was passed in.
 25 |    * Stash $data here so we can add our own parent
 26 |    * if there's no `parentKey`
 27 |    */
 28 |   let parent = {};
 29 |   $: dataset = $data;
 30 | 
 31 |   $: if (parentKey === undefined) {
 32 |     parent = { [idKey]: 'all' };
 33 |     dataset = [...dataset, parent]
 34 |   }
 35 | 
 36 | 	$: stratifier = stratify()
 37 | 		.id(d => d[idKey])
 38 |     .parentId(d => {
 39 |       if (d[idKey] === parent[idKey]) return '';
 40 |       return d[parentKey] || parent[idKey];
 41 |     });
 42 | 
 43 | 	$: packer = pack()
 44 | 		.size([$width, $height])
 45 | 		.padding(circlePadding);
 46 | 
 47 | 	$: stratified = stratifier(dataset);
 48 | 
 49 | 	$: root = hierarchy(stratified)
 50 | 		.sum((d, i) => {
 51 | 			return d.data[valueKey] || 1;
 52 | 		})
 53 | 		.sort(sortBy);
 54 | 
 55 | 	$: packed = packer(root);
 56 | 
 57 |   $: descendants = packed.descendants();
 58 | 
 59 | 	const titleCase = d => d.replace(/^\w/, w => w.toUpperCase());
 60 | 	const commas = format(',');
 61 | </script>
 62 | 
 63 | <div class="circle-pack" data-has-parent-key="{parentKey !== undefined}">
 64 | 	{#each descendants as d}
 65 | 		<div
 66 |       class="circle-group"
 67 |       data-id="{d.data.id}"
 68 |       data-visible="{labelVisibilityThreshold(d.r)}"
 69 |     >
 70 | 			<div
 71 | 				class="circle"
 72 | 				style="left:{d.x}px;top:{d.y}px;width:{d.r * 2}px;height:{d.r * 2}px;background-color:{fill};border: 1px solid {stroke};"
 73 | 			/>
 74 | 				<div
 75 | 					class="text-group"
 76 | 					style="
 77 | 						color:{textColor};
 78 | 						text-shadow:
 79 | 							-{textStroke}px -{textStroke}px 0 {textStrokeColor},
 80 | 							{textStroke}px -{textStroke}px 0 {textStrokeColor},
 81 | 							-{textStroke}px {textStroke}px 0 {textStrokeColor},
 82 | 							{textStroke}px {textStroke}px 0 {textStrokeColor};
 83 | 						left:{d.x}px;
 84 | 						top:{d.y - (labelVisibilityThreshold(d.r) ? 0 : (d.r + 4))}px;
 85 | 					"
 86 | 				>
 87 | 					<div class="text">{titleCase(d.data.id)}</div>
 88 | 					{#if d.data.data[valueKey]}
 89 | 						<div class="text value" >{commas(d.data.data[valueKey])}</div>
 90 | 					{/if}
 91 | 				</div>
 92 | 		</div>
 93 | 	{/each}
 94 | </div>
 95 | 
 96 | <style>
 97 | 	.circle-pack {
 98 | 		position: relative;
 99 | 		width: 100%;
100 | 		height: 100%;
101 | 	}
102 | 	.circle,
103 | 	.text-group {
104 | 		position: absolute;
105 | 	}
106 |   .circle {
107 | 		transform: translate(-50%, -50%);
108 |   }
109 | 	/* Hide the root node if we want, useful if we are creating our own root */
110 |   .circle-pack[data-has-parent-key="false"]	.circle-group[data-id="all"] {
111 | 		display: none;
112 | 	}
113 |   /* .circle-group:hover {
114 |     z-index: 9999;
115 |   } */
116 | 	.circle-group[data-visible="false"] .text-group {
117 | 		display: none;
118 | 		padding: 4px 7px;
119 | 		background: #fff;
120 | 		border: 1px solid #ccc;
121 | 		transform: translate(-50%, -100%);
122 |     top: -4px;
123 | 	}
124 |   .circle-group[data-visible="false"]:hover .text-group {
125 | 		z-index: 999;
126 | 		display: block !important;
127 | 	}
128 | 	.circle-group[data-visible="false"]:hover .circle {
129 | 		border-color: #000 !important;
130 | 	}
131 | 	.text-group {
132 | 		width: auto;
133 |     top: 50%;
134 |     left: 50%;
135 | 		text-align: center;
136 | 		transform: translate(-50%, -50%);
137 | 		white-space: nowrap;
138 | 		pointer-events: none;
139 | 		cursor: pointer;
140 | 		line-height: 13px;
141 | 	}
142 | 	.text {
143 | 		width: 100%;
144 | 		font-size: 11px;
145 | 		/* text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; */
146 | 	}
147 | 	.text.value{
148 | 		font-size: 11px;
149 | 	}
150 | 	.circle {
151 |     border-radius: 50%;
152 |     top: 0;
153 |     left: 0;
154 | 	}
155 | </style>
156 | 


--------------------------------------------------------------------------------
/src/lib/layercake-components/Scatter.webgl.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import reglWrapper from 'regl';
  3 | 	import { getContext } from 'svelte';
  4 | 	import { scaleCanvas } from 'layercake';
  5 | 
  6 | 	const { data, xGet, yGet, width, height } = getContext('LayerCake');
  7 | 
  8 | 	export let diameter;
  9 | 
 10 | 	const { gl } = getContext('gl');
 11 | 
 12 | 	function resize () {
 13 | 		if ($gl) {
 14 | 			const canvas = $gl.canvas;
 15 | 			// Lookup the size the browser is displaying the canvas.
 16 | 			const displayWidth = canvas.clientWidth;
 17 | 			const displayHeight = canvas.clientHeight;
 18 | 
 19 | 			// Check if the canvas is not the same size.
 20 | 			if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
 21 | 				// Make the canvas the same size
 22 | 				canvas.width = displayWidth;
 23 | 				canvas.height = displayHeight;
 24 | 			}
 25 | 			$gl.viewport(0, 0, canvas.width, canvas.height);
 26 | 		}
 27 | 	}
 28 | 
 29 | 	let regl;
 30 | 
 31 | 	function render () {
 32 | 		if ($gl) {
 33 | 			regl = reglWrapper({
 34 | 				gl: $gl,
 35 | 				extensions: ['oes_standard_derivatives']
 36 | 			});
 37 | 
 38 | 			// console.log('rendering', regl);
 39 | 			regl.clear({
 40 | 				color: [0, 0, 0, 0],
 41 | 				depth: 1
 42 | 			});
 43 | 
 44 | 			const draw = regl({
 45 | 				// circle code comes from:
 46 | 				// https://www.desultoryquest.com/blog/drawing-anti-aliased-circular-points-using-opengl-slash-webgl/
 47 | 				frag: `
 48 | 				#extension GL_OES_standard_derivatives : enable
 49 | 				precision mediump float;
 50 | 				uniform vec3 fill_color;
 51 | 				uniform vec3 stroke_color;
 52 | 				varying float s_s;
 53 | 				void main () {
 54 | 
 55 | 					vec2 cxy = 2.0 * gl_PointCoord - 1.0;
 56 | 
 57 | 					float dist = dot(cxy, cxy);
 58 | 
 59 | 					float delta = fwidth(dist);
 60 | 
 61 | 					float alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, dist);
 62 | 
 63 | 					float outer_edge_center = 1.0 - s_s;
 64 | 					float stroke = 1.0 - smoothstep(outer_edge_center - delta, outer_edge_center + delta, dist);
 65 | 
 66 | 					// gl_FragColor = vec4(fill_color,1.0) * alpha;
 67 | 					gl_FragColor = vec4( mix(stroke_color, fill_color, stroke), 1.0 ) * alpha;
 68 | 					gl_FragColor.rgb *= gl_FragColor.a;
 69 | 				}`,
 70 | 				vert: `
 71 | 				precision mediump float;
 72 | 				attribute vec2 position;
 73 | 				attribute float r;
 74 | 				attribute float stroke_size;
 75 | 
 76 | 				varying float s_s;
 77 | 
 78 | 				uniform float stage_width;
 79 | 				uniform float stage_height;
 80 | 
 81 | 				// http://peterbeshai.com/beautifully-animate-points-with-webgl-and-regl.html
 82 | 				vec2 normalizeCoords(vec2 position) {
 83 | 					// read in the positions into x and y vars
 84 | 					float x = position[0];
 85 | 					float y = position[1];
 86 | 					return vec2(
 87 | 						2.0 * ((x / stage_width) - 0.5),
 88 | 						// invert y to treat [0,0] as bottom left in pixel space
 89 | 						-(2.0 * ((y / stage_height) - 0.5))
 90 | 					);
 91 | 				}
 92 | 
 93 | 				void main () {
 94 | 					s_s = stroke_size;
 95 | 					gl_PointSize = r;
 96 | 					gl_Position = vec4(normalizeCoords(position), 0.0, 1.0);
 97 | 				}`,
 98 | 				attributes: {
 99 | 					// There will be a position value for each point
100 | 					// we pass in
101 | 					position: (context, props) => {
102 | 						return props.points.map(point => {
103 | 							return [$xGet(point), $yGet(point)];
104 | 						});
105 | 					},
106 | 					r: (context, props) => {
107 | 						// const m = window.devicePixelRatio > 1 ? 4.0 : 2.0
108 | 						// If using an r-scale, set width here
109 | 						return props.points.map(point => props.pointWidth);
110 | 					},
111 | 					stroke_size: (context, props) => {
112 | 						// If using an r-scale, set width here
113 | 						return props.points.map(point => 0);
114 | 					}
115 | 				},
116 | 				uniforms: {
117 | 					fill_color: [0.6705882352941176, 0, 0.8392156862745098],
118 | 					// stroke_color: [0.6705882352941176, 0, 0.8392156862745098],
119 | 					stroke_color: [0, 0, 0],
120 | 					// FYI: there is a helper method for grabbing
121 | 					// values out of the context as well.
122 | 					// These uniforms are used in our fragment shader to
123 | 					// convert our x / y values to WebGL coordinate space.
124 | 					stage_width: regl.context('drawingBufferWidth'),
125 | 					stage_height: regl.context('drawingBufferHeight')
126 | 				},
127 | 				count: (context, props) => {
128 | 					// set the count based on the number of points we have
129 | 					return props.points.length;
130 | 				},
131 | 				primitive: 'points',
132 | 				blend: {
133 | 					enable: true,
134 | 					func: {
135 | 						srcRGB: 'src alpha',
136 | 						srcAlpha: 'src alpha',
137 | 						dstRGB: 'one minus src alpha',
138 | 						dstAlpha: 'one minus src alpha'
139 | 					}
140 | 				},
141 | 				depth: { enable: false }
142 | 			});
143 | 
144 | 			draw({
145 | 				pointWidth: diameter,
146 | 				points: $data
147 | 			});
148 | 		}
149 | 	}
150 | 
151 | 	$: ($width, $height, $gl, resize(), render());
152 | 
153 | </script>
154 | 


--------------------------------------------------------------------------------