Skip to content

Commit 57bd3ee

Browse files
gkagka
committed
docs: add brush examples
1 parent 100bb88 commit 57bd3ee

File tree

6 files changed

+266
-0
lines changed

6 files changed

+266
-0
lines changed

‎src/routes/examples/bar/defaults.svelte

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script module>
2+
export const title = 'Bar defaults';
3+
export const fullCode = true;
4+
export const sortKey = 99;
5+
</script>
6+
7+
<script lang="ts">
8+
import { Plot, BarX } from 'svelteplot';
9+
import { setContext } from 'svelte';
10+
11+
setContext('svelteplot/defaults', {
12+
bar: {
13+
borderRadius: 4,
14+
stroke: 'currentColor',
15+
fill: null
16+
}
17+
});
18+
</script>
19+
20+
<Plot>
21+
<BarX data={[1, 2, 3, 4, 5, 6]} />
22+
</Plot>

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

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

‎src/routes/examples/brush/constrained.svelte

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script module>
2+
export const title = 'Constrained brush';
3+
</script>
4+
5+
<script>
6+
import { Plot, Dot, Rect, Brush } from 'svelteplot';
7+
import { page } from '$app/state';
8+
9+
const { penguins } = $derived(page.data.data);
10+
11+
let brush = $state({
12+
enabled: true,
13+
x1: 42,
14+
x2: 55,
15+
y1: 16,
16+
y2: 20
17+
});
18+
</script>
19+
20+
<Plot grid>
21+
<Dot
22+
data={penguins}
23+
x="culmen_length_mm"
24+
y="culmen_depth_mm"
25+
opacity={brush.enabled ? 0.3 : 1}
26+
stroke={(d) => (brush.enabled ? 'gray' : d.species)}
27+
symbol="species" />
28+
{#if brush.enabled}
29+
<Rect {...brush} opacity={0.1} />
30+
<Dot
31+
data={penguins}
32+
filter={(d) =>
33+
d.culmen_length_mm >= brush.x1 &&
34+
d.culmen_length_mm <= brush.x2 &&
35+
d.culmen_depth_mm >= brush.y1 &&
36+
d.culmen_depth_mm <= brush.y2}
37+
x="culmen_length_mm"
38+
y="culmen_depth_mm"
39+
stroke="species"
40+
symbol="species" />
41+
{/if}
42+
<Brush bind:brush constrainToDomain stroke={false} />
43+
</Plot>

‎src/routes/examples/brush/filter.svelte

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script module>
2+
export const title = 'Brush filter';
3+
</script>
4+
5+
<script>
6+
import { Plot, Dot, Rect, Brush } from 'svelteplot';
7+
import { page } from '$app/state';
8+
9+
const { penguins } = $derived(page.data.data);
10+
11+
let brush = $state({
12+
enabled: true,
13+
x1: 42,
14+
x2: 55,
15+
y1: 16,
16+
y2: 20
17+
});
18+
</script>
19+
20+
<Plot grid>
21+
<Dot
22+
data={penguins}
23+
x="culmen_length_mm"
24+
y="culmen_depth_mm"
25+
opacity={brush.enabled ? 0.3 : 1}
26+
stroke={(d) => (brush.enabled ? 'gray' : d.species)}
27+
symbol="species" />
28+
{#if brush.enabled}
29+
<Rect {...brush} opacity={0.1} />
30+
<Dot
31+
data={penguins}
32+
filter={(d) =>
33+
d.culmen_length_mm >= brush.x1 &&
34+
d.culmen_length_mm <= brush.x2 &&
35+
d.culmen_depth_mm >= brush.y1 &&
36+
d.culmen_depth_mm <= brush.y2}
37+
x="culmen_length_mm"
38+
y="culmen_depth_mm"
39+
stroke="species"
40+
symbol="species" />
41+
{/if}
42+
<Brush bind:brush stroke={false} />
43+
</Plot>

‎src/routes/examples/brush/overview-detail.svelte

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script module lang="ts">
2+
export const title = 'Overview and detail';
3+
export const fullCode = true;
4+
</script>
5+
6+
<script lang="ts">
7+
import {
8+
Plot,
9+
Frame,
10+
Line,
11+
AreaY,
12+
RectX,
13+
BrushX
14+
} from 'svelteplot';
15+
import { page } from '$app/state';
16+
17+
const { aapl } = $derived(page.data.data);
18+
19+
let brush = $state({
20+
enabled: true,
21+
x1: new Date(2017, 0, 1),
22+
x2: new Date(2018, 0, 1)
23+
});
24+
25+
const filteredData = $derived(
26+
brush.enabled
27+
? aapl.filter(
28+
(d) =>
29+
d.Date >= brush.x1 &&
30+
d.Date <= brush.x2
31+
)
32+
: aapl
33+
);
34+
</script>
35+
36+
<!-- overview plot -->
37+
<div style="touch-action: none">
38+
<Plot
39+
height={90}
40+
x={{ label: '', grid: true }}
41+
y={{ axis: false, label: '' }}>
42+
<Frame opacity={0.4} />
43+
<Line
44+
data={aapl}
45+
x="Date"
46+
y="Close"
47+
opacity={0.3} />
48+
{#if brush.enabled}
49+
<RectX
50+
{...brush}
51+
fill="var(--svp-blue)"
52+
opacity={0.2} />
53+
<Line data={filteredData} x="Date" y="Close" />
54+
{/if}
55+
<BrushX
56+
bind:brush
57+
stroke={false}
58+
constrainToDomain />
59+
</Plot>
60+
</div>
61+
<!-- detail plot -->
62+
<Plot
63+
y={{ insetTop: 10, insetBottom: 10 }}
64+
grid
65+
marginBottom={30}>
66+
<AreaY
67+
data={filteredData}
68+
x="Date"
69+
y="Close"
70+
fill="var(--svp-blue)"
71+
opacity={0.1} />
72+
<Line data={filteredData} x="Date" y="Close" />
73+
</Plot>

‎src/routes/examples/brush/zoomable-scatter.svelte

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<script module lang="ts">
2+
export const title = 'Zoomable scatter plot';
3+
export const fullCode = true;
4+
</script>
5+
6+
<script lang="ts">
7+
import { Plot, Dot, Brush, Frame } from 'svelteplot';
8+
import { Tween } from 'svelte/motion';
9+
import { cubicInOut } from 'svelte/easing';
10+
import { page } from '$app/state';
11+
import { extent } from 'd3-array';
12+
13+
const { penguins } = $derived(page.data.data);
14+
15+
let brush = $state({ enabled: false });
16+
let isZoomedIn = $state(false);
17+
18+
const fullDomainX = extent(
19+
penguins,
20+
(d) => d.culmen_length_mm
21+
);
22+
const fullDomainY = extent(
23+
penguins,
24+
(d) => d.culmen_depth_mm
25+
);
26+
27+
let domainX = $state(fullDomainX);
28+
let domainY = $state(fullDomainY);
29+
30+
function resetZoom() {
31+
domainX = fullDomainX;
32+
domainY = fullDomainY;
33+
isZoomedIn = false;
34+
}
35+
36+
const domainXT = Tween.of(() => domainX, {
37+
easing: cubicInOut
38+
});
39+
const domainYT = Tween.of(() => domainY, {
40+
easing: cubicInOut
41+
});
42+
</script>
43+
44+
<div style="touch-action: none">
45+
<Plot
46+
grid
47+
x={{
48+
domain: domainXT.current,
49+
label: 'culmen_length_mm'
50+
}}
51+
y={{
52+
domain: domainYT.current,
53+
label: 'culmen_depth_mm'
54+
}}>
55+
<Dot
56+
data={penguins}
57+
x="culmen_length_mm"
58+
y="culmen_depth_mm"
59+
stroke="species"
60+
symbol="species" />
61+
{#if !isZoomedIn}
62+
<Brush
63+
bind:brush
64+
cursor="zoom-in"
65+
onbrushend={(e) => {
66+
if (e.brush.enabled) {
67+
domainX = [e.brush.x1, e.brush.x2];
68+
domainY = [e.brush.y1, e.brush.y2];
69+
brush.enabled = false;
70+
isZoomedIn = true;
71+
}
72+
}} />
73+
{:else}
74+
<Frame
75+
fill="transparent"
76+
cursor="zoom-out"
77+
onpointerup={resetZoom} />
78+
{/if}
79+
</Plot>
80+
</div>

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