Skip to content

Commit 4463c88

Browse files
gkagka
committed
docs: add more geo examples
1 parent 0a88a62 commit 4463c88

File tree

13 files changed

+156
-1
lines changed

13 files changed

+156
-1
lines changed

‎src/lib/ui/Slider.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
type = 'range'
99
}: {
1010
label: string;
11-
type: 'range' | 'number';
11+
type?: 'range' | 'number';
1212
value: number;
1313
min?: number;
1414
max?: number;

‎src/routes/examples/[group]/[page]/+page.svelte

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,13 @@
7474
)} />
7575
</div>
7676
</div>
77+
78+
{#if pages[plotKey].repl}
79+
<p>
80+
<a href={pages[plotKey].repl} target="_blank"
81+
>Open in Svelte playground</a>
82+
</p>
83+
{/if}
7784
{:else}
7885
<h2>Not found</h2>
7986
{/if}

‎src/routes/examples/geo/custom-proj.svelte

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script module>
2+
export const title = 'Custom projection';
3+
export const description =
4+
'Demonstrates how to use a custom projection in SveltePlot.';
5+
</script>
6+
7+
<script lang="ts">
8+
import { Slider } from '$lib/ui';
9+
import { Plot, Geo, Graticule } from 'svelteplot';
10+
import { page } from '$app/state';
11+
import * as topojson from 'topojson-client';
12+
import { geoOrthographic } from 'd3-geo';
13+
14+
const { world } = $derived(page.data.data);
15+
16+
let lat = $state(0);
17+
let lon = $state(0);
18+
let zoom = $state(1);
19+
20+
const countries = $derived(
21+
topojson.feature(world, world.objects.countries)
22+
.features
23+
);
24+
</script>
25+
26+
<Slider bind:value={lat} min={-90} max={90} label="lat" />
27+
<Slider bind:value={lon} min={-180} max={180} label="lon" />
28+
<Slider
29+
bind:value={zoom}
30+
min={0.1}
31+
max={10}
32+
step={0.01}
33+
label="zoom" />
34+
<Plot
35+
inset={5}
36+
projection={{
37+
type: ({
38+
width,
39+
height
40+
}: {
41+
width: number;
42+
height: number;
43+
}) =>
44+
geoOrthographic()
45+
.translate([width * 0.5, height * 0.5])
46+
.scale(width * 0.5 * zoom)
47+
.rotate([-lon, -lat])
48+
}}
49+
height={(w) => w}>
50+
<Graticule opacity={0.1} />
51+
<Geo
52+
data={countries}
53+
fill="currentColor"
54+
opacity={0.3}
55+
stroke="var(--svelteplot-bg)" />
56+
</Plot>

‎src/routes/examples/geo/inset-aspect.svelte

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script module>
2+
export const title = 'Inset and Aspect Ratio';
3+
export const description =
4+
'Demonstrates how to use inset and aspect ratio in geographic projections.';
5+
</script>
6+
7+
<script>
8+
import { Slider } from '$lib/ui';
9+
import {
10+
Plot,
11+
Geo,
12+
Sphere,
13+
Graticule
14+
} from 'svelteplot';
15+
import { page } from '$app/state';
16+
import * as topojson from 'topojson-client';
17+
import { geoCentroid } from 'd3-geo';
18+
19+
let aspect = $state(0.75);
20+
let inset = $state(10);
21+
22+
let { world } = $derived(page.data.data);
23+
24+
let countries = $derived(
25+
topojson.feature(world, world.objects.countries)
26+
.features
27+
);
28+
let selected = $state(
29+
topojson
30+
.feature(world, world.objects.countries)
31+
.features.find(
32+
(d) => d.properties.name === 'Germany'
33+
)
34+
);
35+
let centroid = $derived(geoCentroid(selected));
36+
</script>
37+
38+
<Slider bind:value={inset} min={0} max={50} label="inset" />
39+
<Slider
40+
bind:value={aspect}
41+
min={0.35}
42+
max={2}
43+
step={0.01}
44+
label="aspect" />
45+
<Plot
46+
projection={{
47+
type: 'transverse-mercator',
48+
rotate: [-centroid[0], -centroid[1]],
49+
inset,
50+
domain: selected
51+
}}
52+
height={(w) => w * aspect}>
53+
<Geo
54+
data={countries}
55+
opacity={0.2}
56+
fill="currentColor"
57+
href={(d) => `#/${d.properties.name}`}
58+
stroke="var(--svelteplot-bg)"
59+
onclick={(d, e) => (selected = e)} />
60+
<Geo data={[selected]} />
61+
</Plot>

‎src/routes/examples/line/geo-line.svelte

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script module lang="ts">
2+
export const title = 'Geo line';
3+
export const description =
4+
'Demonstrates how to use Line mark together with projections.';
5+
export const repl =
6+
'https://svelte.dev/playground/8f433172583d4b7eb4ae1d72572d2e31?version=5.33.14';
7+
</script>
8+
9+
<script lang="ts">
10+
import { Plot, Geo, Dot, Line } from 'svelteplot';
11+
import { page } from '$app/state';
12+
import * as topojson from 'topojson-client';
13+
const { world, beagle } = $derived(page.data.data);
14+
const land = $derived(
15+
topojson.feature(world, world.objects.land)
16+
);
17+
</script>
18+
19+
<Plot projection="equirectangular">
20+
<Geo data={[land]} stroke="currentColor" />
21+
<Line
22+
data={beagle}
23+
x="lon"
24+
y="lat"
25+
stroke="var(--svp-red)" />
26+
<Geo
27+
data={[
28+
{ type: 'Point', coordinates: [-0.13, 51.5] }
29+
]}
30+
fill="var(--svp-red)" />
31+
</Plot>

‎static/examples/geo/custom-proj.dark.png

153 KB
Loading

‎static/examples/geo/custom-proj.png

157 KB
Loading

‎static/examples/geo/inset-aspect.dark.png

33.9 KB
Loading

‎static/examples/geo/inset-aspect.png

32.5 KB
Loading

‎static/examples/line/geo-line.dark.png

52.5 KB
Loading

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy