Skip to content

Commit d04c61e

Browse files
gkagka
committed
docs: add regression examples
1 parent edb7ba3 commit d04c61e

19 files changed

+220
-0
lines changed

‎src/routes/examples/geo/earthquakes.svelte

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script module>
2+
export const title = 'Earthquakes';
3+
export const description =
4+
'A map of earthquakes around the world, with markers sized by magnitude.';
5+
</script>
6+
7+
<script>
8+
import {
9+
Plot,
10+
Geo,
11+
Sphere,
12+
Graticule
13+
} from 'svelteplot';
14+
import { page } from '$app/state';
15+
import * as topojson from 'topojson-client';
16+
17+
let { world, earthquakes } = $derived(page.data.data);
18+
let land = $derived(
19+
topojson.feature(world, world.objects.land)
20+
);
21+
</script>
22+
23+
<Plot
24+
height={500}
25+
r={{ range: [0.5, 25] }}
26+
projection={{
27+
type: 'orthographic',
28+
rotate: [-120, 10, 0]
29+
}}>
30+
<Geo data={[land]} fillOpacity={0.2} />
31+
<Graticule strokeOpacity={0.1} />
32+
<Sphere stroke="currentColor" />
33+
<Geo
34+
data={earthquakes.features}
35+
stroke="var(--svp-red)"
36+
fill="var(--svp-red)"
37+
fillOpacity={0.2}
38+
title={(d) => d.properties.title}
39+
href={(d) => d.properties.url}
40+
r={(d) => Math.pow(10, d.properties.mag)} />
41+
</Plot>

‎src/routes/examples/regression/_index.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script module>
2+
export const title = 'Regression';
3+
</script>
4+
5+
<h1>Regression examples</h1>

‎src/routes/examples/regression/cars.svelte

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script module>
2+
export const title = 'Regression scatterplot';
3+
</script>
4+
5+
<script lang="ts">
6+
import { Plot, Dot, RegressionY } from 'svelteplot';
7+
import { page } from '$app/state';
8+
import { Select, Slider } from '$lib/ui';
9+
10+
let { cars } = $derived(page.data.data);
11+
12+
let type = $state('linear');
13+
let order = $state(3);
14+
let span = $state(0.7);
15+
let confidence = $state(0.99);
16+
const types = ['linear', 'quad', 'exp', 'log', 'pow'];
17+
</script>
18+
19+
<Select label="Type" bind:value={type} options={types} />
20+
21+
{#if type.startsWith('loess')}
22+
<Slider
23+
label="span"
24+
bind:value={span}
25+
min={0.1}
26+
max={2}
27+
step={0.01} />{/if}
28+
<Select
29+
label="confidence:"
30+
bind:value={confidence}
31+
format={(d) => `${d * 100}%`}
32+
options={[0.8, 0.9, 0.95, 0.99, 0.999, 0.9999]} />
33+
34+
<Plot grid>
35+
<Dot
36+
data={cars}
37+
y="weight (lb)"
38+
x="power (hp)"
39+
symbol="plus"
40+
opacity={0.6} />
41+
<RegressionY
42+
data={cars}
43+
{type}
44+
{order}
45+
{span}
46+
{confidence}
47+
stroke="var(--svp-red)"
48+
x="power (hp)"
49+
y="weight (lb)" />
50+
</Plot>

‎src/routes/examples/regression/faceted.svelte

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script module>
2+
export const title = 'Faceted regression';
3+
4+
export const description =
5+
'Regression lines grouped by a categorical variable, with different colors for each group.';
6+
</script>
7+
8+
<script>
9+
import { Plot, Dot, RegressionY } from 'svelteplot';
10+
import { page } from '$app/state';
11+
let { penguins } = $derived(page.data.data);
12+
</script>
13+
14+
<Plot grid frame aspectRatio={1} inset={5}>
15+
<Dot
16+
data={penguins}
17+
x="culmen_length_mm"
18+
y="culmen_depth_mm"
19+
fill="#999"
20+
opacity={0.2} />
21+
<Dot
22+
data={penguins}
23+
x="culmen_length_mm"
24+
fx="species"
25+
y="culmen_depth_mm"
26+
fill="species" />
27+
<RegressionY
28+
data={penguins}
29+
x="culmen_length_mm"
30+
fx="species"
31+
y="culmen_depth_mm"
32+
stroke="species" />
33+
</Plot>

‎src/routes/examples/regression/grouped.svelte

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script module>
2+
export const title = 'Grouped regression';
3+
4+
export const description =
5+
'Regression lines grouped by a categorical variable, with different colors for each group.';
6+
</script>
7+
8+
<script>
9+
import { Plot, Dot, RegressionY } from 'svelteplot';
10+
import { page } from '$app/state';
11+
let { penguins } = $derived(page.data.data);
12+
</script>
13+
14+
<Plot grid height={500} color={{ legend: true }}>
15+
<Dot
16+
data={penguins}
17+
x="culmen_length_mm"
18+
y="culmen_depth_mm"
19+
fill="species" />
20+
<RegressionY
21+
data={penguins}
22+
x="culmen_length_mm"
23+
y="culmen_depth_mm" />
24+
<RegressionY
25+
data={penguins}
26+
x="culmen_length_mm"
27+
y="culmen_depth_mm"
28+
stroke="species" />
29+
</Plot>

‎src/routes/examples/regression/loess.svelte

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script module>
2+
export const title = 'Loess regression';
3+
</script>
4+
5+
<script lang="ts">
6+
import { Plot, Dot, RegressionY } from 'svelteplot';
7+
import { page } from '$app/state';
8+
import { Slider } from '$lib/ui';
9+
10+
let { cars } = $derived(page.data.data);
11+
12+
let span = $state(0.7);
13+
</script>
14+
15+
<Slider
16+
label="span"
17+
bind:value={span}
18+
min={0.1}
19+
max={1}
20+
step={0.01} />
21+
22+
<Plot grid>
23+
<Dot
24+
data={cars}
25+
y="weight (lb)"
26+
x="power (hp)"
27+
symbol="plus"
28+
opacity={0.6} />
29+
<RegressionY
30+
data={cars}
31+
type="loess"
32+
{span}
33+
stroke="var(--svp-red)"
34+
x="power (hp)"
35+
y="weight (lb)" />
36+
</Plot>

‎src/routes/examples/regression/log.svelte

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script module>
2+
export const title = 'Log regression';
3+
</script>
4+
5+
<script lang="ts">
6+
import { Plot, Dot, RegressionY } from 'svelteplot';
7+
import { page } from '$app/state';
8+
9+
let { cars } = $derived(page.data.data);
10+
</script>
11+
12+
<Plot grid x={{ type: 'log' }} y={{ type: 'log' }}>
13+
<Dot
14+
data={cars}
15+
y="weight (lb)"
16+
x="power (hp)"
17+
symbol="plus"
18+
opacity={0.6} />
19+
<RegressionY
20+
data={cars}
21+
type="pow"
22+
confidence={0.95}
23+
stroke="var(--svp-red)"
24+
x="power (hp)"
25+
y="weight (lb)" />
26+
</Plot>

‎static/examples/bar/linked-bars.dark.png

6.46 KB
Loading

‎static/examples/bar/linked-bars.png

6.49 KB
Loading

‎static/examples/regression/cars.dark.png

66.7 KB
Loading

0 commit comments

Comments
 (0)