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)
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