Add single/multi GeoCircle example toggle to visualize projection distortion

Author: techniq

packages/layerchart/src/routes/docs/components/GeoCircle/+page.svelte

@@ -8,9 +8,10 @@
     geoNaturalEarth1,
     geoOrthographic,
   } from 'd3-geo';
+  import { range } from 'd3-array';
   import { feature } from 'topojson-client';
 
-  import { RangeField, SelectField } from 'svelte-ux';
+  import { Field, RangeField, SelectField, ToggleGroup, ToggleOption } from 'svelte-ux';
 
   import Chart, { Svg } from '$lib/components/Chart.svelte';
   import GeoCircle from '$lib/components/GeoCircle.svelte';
@@ -20,6 +21,7 @@
 
   export let data;
 
+  let example: 'single' | 'multi' = 'single';
   let latitude = 0;
   let longitude = 0;
   let radius = 600;
@@ -41,6 +43,13 @@
     projection === geoAlbersUsa
       ? geojson.features.filter((f) => f.properties.name === 'United States of America')
       : geojson.features;
+
+  const step = 10;
+  const coordinates = range(-80, 80 + step, step).flatMap((y) => {
+    return range(-180, 180 + step, step).map((x) => {
+      return [x, y];
+    });
+  });
 </script>
 
 <div class="grid grid-cols-2 gap-2 my-2">
@@ -51,12 +60,30 @@
     clearable={false}
     toggleIcon={null}
     stepper
-    class="col-span-2"
   />
-  <RangeField label="Latitude" bind:value={latitude} min={-90} max={90} />
-  <RangeField label="Longitude" bind:value={longitude} min={-180} max={180} />
-  <RangeField label="Radius (km)" bind:value={radius} max={6371} />
-  <RangeField label="Precision" bind:value={precision} max={90} />
+  <Field label="Example">
+    <ToggleGroup bind:value={example} variant="outline" inset class="w-full">
+      <ToggleOption value="single">Single</ToggleOption>
+      <ToggleOption value="multi">Multi</ToggleOption>
+    </ToggleGroup>
+  </Field>
+
+  <RangeField
+    label="Latitude"
+    bind:value={latitude}
+    min={-90}
+    max={90}
+    disabled={example != 'single'}
+  />
+  <RangeField
+    label="Longitude"
+    bind:value={longitude}
+    min={-180}
+    max={180}
+    disabled={example != 'single'}
+  />
+  <RangeField label="Radius (km)" bind:value={radius} max={6371} disabled={example != 'single'} />
+  <RangeField label="Precision" bind:value={precision} max={90} disabled={example != 'single'} />
 </div>
 
 <h1>Examples</h1>
@@ -76,21 +103,25 @@
         <GeoPath geojson={{ type: 'Sphere' }} class="stroke-surface-content/30" id="globe" />
         <Graticule class="stroke-surface-content/20" />
 
-        <GeoPath {geojson} id="clip" />
-
         {#each features as feature}
           <GeoPath
             geojson={feature}
-            class="stroke-gray-900/10 fill-gray-900/20 pointer-events-none"
+            class="stroke-surface-content/30 fill-surface-content/20 pointer-events-none"
           />
         {/each}
 
-        <GeoCircle
-          center={[longitude, latitude]}
-          radius={(radius / (6371 * Math.PI * 2)) * 360}
-          {precision}
-          class="fill-danger stroke-none"
-        />
+        {#if example === 'single'}
+          <GeoCircle
+            center={[longitude, latitude]}
+            radius={(radius / (6371 * Math.PI * 2)) * 360}
+            {precision}
+            class="fill-danger stroke-none"
+          />
+        {:else if example === 'multi'}
+          {#each coordinates as coords}
+            <GeoCircle center={coords} radius={step / 4} {precision} class="stroke-danger" />
+          {/each}
+        {/if}
       </Svg>
     </Chart>
   </div>