Geo

package.json

@@ -23,12 +23,16 @@
 		"@types/d3-array": "^3.0.4",
 		"@types/d3-delaunay": "^6.0.1",
 		"@types/d3-dsv": "^3.0.1",
+		"@types/d3-geo": "^3.0.3",
 		"@types/d3-hierarchy": "^3.1.2",
+		"@types/d3-interpolate": "^3.0.1",
 		"@types/d3-quadtree": "^3.0.2",
+		"@types/d3-random": "^3.0.1",
 		"@types/d3-sankey": "^0.12.0",
 		"@types/d3-scale": "^4.0.3",
 		"@types/d3-shape": "^3.1.1",
 		"@types/lodash-es": "^4.17.6",
+		"@types/topojson-client": "^3.1.1",
 		"autoprefixer": "^10.4.13",
 		"mdsvex": "^0.10.6",
 		"prettier": "^2.8.3",
@@ -42,6 +46,7 @@
 		"tslib": "^2.5.0",
 		"typescript": "^4.9.4",
 		"unist-util-visit": "^4.1.2",
+		"us-atlas": "^3.0.0",
 		"vite": "^4.0.4",
 		"vite-plugin-sveld": "^1.1.0"
 	},
@@ -51,17 +56,22 @@
 		"d3-array": "^3.2.2",
 		"d3-delaunay": "^6.0.2",
 		"d3-dsv": "^3.0.1",
+		"d3-geo": "^3.1.0",
 		"d3-hierarchy": "^3.1.2",
+		"d3-interpolate": "^3.0.1",
 		"d3-interpolate-path": "^2.3.0",
 		"d3-quadtree": "^3.0.1",
+		"d3-random": "^3.0.1",
 		"d3-sankey": "^0.12.3",
 		"d3-scale": "^4.0.2",
 		"d3-scale-chromatic": "^3.0.0",
 		"d3-shape": "^3.2.0",
+		"d3-tile": "^1.0.0",
 		"date-fns": "^2.29.3",
 		"layercake": "^7.2.2",
 		"lodash-es": "^4.17.21",
 		"svelte": "^3.55.1",
-		"svelte-ux": "^0.26.0"
+		"svelte-ux": "^0.26.0",
+		"topojson-client": "^3.1.0"
 	}
 }

src/lib/components/Blur.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { uniqueId } from 'svelte-ux/utils/string';
+
+	export let id: string = uniqueId('blur-');
+	export let stdDeviation = 5;
+</script>
+
+<defs>
+	<filter {id}>
+		<feGaussianBlur in="SourceGraphic" {stdDeviation} />
+	</filter>
+</defs>
+
+{#if $$slots.default}
+	<g filter="url(#{id})">
+		<slot {id} />
+	</g>
+{/if}

src/lib/components/Chart.svelte

@@ -4,10 +4,18 @@
 
 	// TODO: Workaround for sveld error: `Cannot read properties of null (reading 'type')` in `ComponentParser`
 	// See: https://github.com/carbon-design-system/sveld/issues/104
-	import { LayerCake, Svg as _Svg, Html as _Html } from 'layercake';
+	import {
+		LayerCake,
+		Svg as _Svg,
+		Html as _Html,
+		Canvas as _Canvas,
+		WebGL as _WebGL
+	} from 'layercake';
 
 	export const Svg = _Svg;
 	export const Html = _Html;
+	export const Canvas = _Canvas;
+	export const WebGL = _WebGL;
 </script>
 
 <script lang="ts">
@@ -16,6 +24,7 @@
 	import { get } from 'lodash-es';
 	import { isScaleBand } from '$lib/utils/scales';
 	import TooltipContext from './TooltipContext.svelte';
+	import GeoContext from './GeoContext.svelte';
 
 	type Accessor = string | ((d: any) => number);
 
@@ -70,6 +79,8 @@
 	$: yReverse = yScale ? !isScaleBand(yScale) : true;
 
 	export let tooltip: ComponentProps<TooltipContext> | undefined = undefined;
+
+	export let geo: ComponentProps<GeoContext> | undefined = undefined;
 </script>
 
 <LayerCake
@@ -88,11 +99,30 @@
 	let:width
 	let:element
 >
-	{#if tooltip}
-		<TooltipContext {...tooltip} let:tooltip>
-			<slot {aspectRatio} {containerHeight} {containerWidth} {height} {width} {element} {tooltip} />
-		</TooltipContext>
-	{:else}
-		<slot {aspectRatio} {containerHeight} {containerWidth} {height} {width} {element} />
-	{/if}
+	<GeoContext {...geo} let:projection>
+		{#if tooltip}
+			<TooltipContext {...tooltip} let:tooltip>
+				<slot
+					{aspectRatio}
+					{containerHeight}
+					{containerWidth}
+					{height}
+					{width}
+					{element}
+					{projection}
+					{tooltip}
+				/>
+			</TooltipContext>
+		{:else}
+			<slot
+				{aspectRatio}
+				{containerHeight}
+				{containerWidth}
+				{height}
+				{width}
+				{element}
+				{projection}
+			/>
+		{/if}
+	</GeoContext>
 </LayerCake>

src/lib/components/ClipPathUse.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { uniqueId } from 'svelte-ux/utils/string';
+
+	import ClipPath from './ClipPath.svelte';
+
+	/** Id of path or shape */
+	export let refId: string;
+
+	/** Unique id for clipPath */
+	export let clipPathId: string = uniqueId('clipPath-');
+</script>
+
+<ClipPath id={clipPathId}>
+	<use href="#{refId}" />
+</ClipPath>
+
+{#if $$slots.default}
+	<g style="clip-path: url(#{clipPathId})" on:click on:mousemove on:mouseleave on:keydown>
+		<slot {refId} {clipPathId} />
+	</g>
+{/if}

src/lib/components/ColorRamp.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let interpolator: (t: number) => string;
+	export let steps = 10;
+	export let height: string | number = '20px';
+	export let width: string | number = '100%';
+
+	let href = '';
+	$: {
+		const canvas = document.createElement('canvas');
+		canvas.width = steps;
+		canvas.height = 1;
+		const context = canvas.getContext('2d')!;
+		for (let i = 0; i < steps; ++i) {
+			context.fillStyle = interpolator(i / (steps - 1));
+			context.fillRect(i, 0, 1, 1);
+		}
+		href = canvas.toDataURL();
+	}
+</script>
+
+<image {href} preserveAspectRatio="none" style:height style:width {...$$restProps} />

src/lib/components/GeoContext.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" context="module">
+	import { getContext, setContext } from 'svelte';
+	import { writable, type Writable } from 'svelte/store';
+	import {
+		geoMercator,
+		type GeoIdentityTransform,
+		type GeoPermissibleObjects,
+		type GeoProjection
+	} from 'd3-geo';
+
+	export const geoContextKey = {};
+
+	export type GeoContext = Writable<GeoProjection | GeoIdentityTransform>;
+
+	export function geoContext() {
+		return getContext<GeoContext>(geoContextKey);
+	}
+
+	function setGeoContext(geo: GeoContext) {
+		setContext(geoContextKey, geo);
+	}
+</script>
+
+<script lang="ts">
+	const { width, height } = getContext('LayerCake');
+
+	/** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
+	export let projection: () => GeoProjection | GeoIdentityTransform = geoMercator;
+
+	export let fitGeojson: GeoPermissibleObjects;
+
+	/** By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */
+	export let fixedAspectRatio: number | undefined = undefined;
+
+	export let clipAngle: number | undefined = undefined;
+	export let clipExtent: [[number, number], [number, number]] | undefined = undefined;
+	export let rotate:
+		| {
+				/** Lambda (Center Meridian) */
+				yaw: number;
+				/** Phi */
+				pitch: number;
+				/** Gamma */
+				roll: number;
+		  }
+		| undefined = undefined;
+	export let scale: number | undefined = undefined;
+	export let translate: [number, number] | undefined = undefined;
+	export let center: [number, number] | undefined = undefined;
+
+	const geo = writable(projection());
+	setGeoContext(geo);
+
+	$: fitSizeRange = (fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]) as [
+		number,
+		number
+	];
+
+	$: {
+		const _projection = projection();
+
+		if (fitGeojson && 'fitSize' in _projection) {
+			_projection.fitSize(fitSizeRange, fitGeojson);
+		}
+
+		if (scale && 'scale' in _projection) {
+			_projection.scale(scale);
+		}
+
+		if (rotate && 'rotate' in _projection) {
+			_projection.rotate([rotate.yaw, rotate.pitch, rotate.roll]);
+		}
+
+		if (translate && 'translate' in _projection) {
+			_projection.translate(translate);
+		}
+
+		if (center && 'center' in _projection) {
+			_projection.center(center);
+		}
+
+		if (clipAngle && 'clipAngle' in _projection) {
+			_projection.clipAngle(clipAngle);
+		}
+
+		if (clipExtent && 'clipExtent' in _projection) {
+			_projection.clipExtent(clipExtent);
+		}
+
+		geo.set(_projection);
+	}
+</script>
+
+<slot projection={$geo} />

src/lib/components/GeoPath.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { createEventDispatcher, getContext } from 'svelte';
+	import { geoPath as d3geoPath, type GeoPath, type GeoPermissibleObjects } from 'd3-geo';
+
+	import { geoContext } from './GeoContext.svelte';
+	import type { TooltipContextValue } from './TooltipContext.svelte';
+	import { scaleCanvas } from 'layercake';
+
+	export let geojson: GeoPermissibleObjects;
+
+	export let fill: string | undefined = undefined;
+	export let fillScale: Object | undefined = undefined;
+	export let stroke: string | undefined = undefined;
+	export let strokeWidth: number | string | undefined = undefined;
+
+	/** Render to canvas */
+	export let render: ((ctx: CanvasRenderingContext2D, { geoPath: GeoPath }) => any) | undefined =
+		undefined;
+
+	/**
+	 * Tooltip context to setup mouse events to show tooltip for related data
+	 */
+	export let tooltip: TooltipContextValue | undefined = undefined;
+
+	const dispatch = createEventDispatcher<{ click: { geoPath: GeoPath; event: MouseEvent } }>();
+
+	const { rGet, width, height } = getContext('LayerCake');
+	const canvas = getContext('canvas');
+	const geo = geoContext();
+
+	$: geoPath = d3geoPath($geo);
+
+	$: renderContext = canvas ? 'canvas' : 'svg';
+
+	$: ctx = canvas?.ctx;
+	$: if (renderContext === 'canvas' && $ctx) {
+		// console.count('render');
+		scaleCanvas($ctx, $width, $height);
+		$ctx.clearRect(0, 0, $width, $height);
+
+		if (render) {
+			render($ctx, { geoPath });
+		} else {
+			$ctx.beginPath();
+			// Set the context here since setting it in `$: geoPath` is a circular reference
+			geoPath.context($ctx);
+			geoPath(geojson);
+
+			$ctx.fillStyle = fill || (fillScale && $rGet(fillScale)) || 'transparent';
+			$ctx.fill();
+
+			$ctx.lineWidth = strokeWidth;
+			$ctx.strokeStyle = stroke;
+			$ctx.stroke();
+		}
+	}
+</script>
+
+{#if renderContext === 'svg'}
+	<slot {geoPath}>
+		<path
+			d={geoPath(geojson)}
+			fill={fill || (fillScale && $rGet(fillScale)) || 'transparent'}
+			stroke={stroke || 'black'}
+			on:mousemove={(e) => tooltip?.show(e, geojson)}
+			on:mouseleave={(e) => tooltip?.hide()}
+			on:click={(event) => dispatch('click', { geoPath, event })}
+			{...$$restProps}
+		/>
+	</slot>
+{/if}

src/lib/components/GeoPoint.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { scaleCanvas } from 'layercake';
+
+	import { geoContext } from './GeoContext.svelte';
+
+	/** Latitude */
+	export let lat: number;
+	/** Longitude */
+	export let long: number;
+
+	/** Render to canvas */
+	export let render: (
+		ctx: CanvasRenderingContext2D,
+		coords: { x: number; y: number }
+	) => any = () => {};
+
+	const { width, height } = getContext('LayerCake');
+	const canvas = getContext('canvas');
+	const geo = geoContext();
+
+	$: [x, y] = $geo([long, lat]) ?? [0, 0];
+
+	$: renderContext = canvas ? 'canvas' : 'svg';
+
+	$: ctx = canvas?.ctx;
+	$: if (renderContext === 'canvas' && $ctx) {
+		// console.count('render');
+		scaleCanvas($ctx, $width, $height);
+		$ctx.clearRect(0, 0, $width, $height);
+
+		render($ctx, { x, y });
+	}
+</script>
+
+{#if renderContext === 'svg'}
+	<g transform="translate({x},{y})">
+		<slot />
+	</g>
+{/if}