Skip to content

Commit 225ffff

Browse files
gkagka
committed
docs: add link examples
1 parent 2e02df0 commit 225ffff

File tree

10 files changed

+132
-5
lines changed

10 files changed

+132
-5
lines changed

‎src/lib/marks/Link.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
*/
3535
text?: ConstantAccessor<string, Datum>;
3636
}
37-
import { getContext, type Snippet } from 'svelte';
37+
import { getContext } from 'svelte';
3838
import type {
3939
PlotContext,
4040
DataRecord,

‎src/lib/types.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -543,6 +543,15 @@ export type MarkerOptions = {
543543
export type PlotScales = Record<ScaleName, PlotScale>;
544544

545545
export type ChannelAccessor<T = Record<string | symbol, RawValue>> =
546+
| ChannelValue<T>
547+
| {
548+
/** the channel value */
549+
value: ChannelValue<T>;
550+
/** you can bypass the scale by passing null */
551+
scale: boolean | null;
552+
};
553+
554+
export type ChannelValue<T = Record<string | symbol, RawValue>> =
546555
| RawValue
547556
| keyof T
548557
| ((d: T) => RawValue)

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script module>
2+
export const title = 'Link';
3+
</script>
4+
5+
<h1>Link examples</h1>
6+
7+
<p>
8+
Here are examples related to the <a href="/marks/link"
9+
>Link</a> mark.
10+
</p>

‎src/routes/examples/link/metros.svelte

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script module>
2+
export const title = 'Link';
3+
</script>
4+
5+
<script lang="ts">
6+
import { Plot, Link, Dot, Text } from '$lib/index.js';
7+
import { page } from '$app/state';
8+
import type { ExamplesData } from '../types';
9+
let { metros } = $derived(
10+
page.data.data
11+
) as ExamplesData;
12+
13+
let hl: false | (typeof metros)[0] = $state(false);
14+
</script>
15+
16+
<Plot
17+
grid
18+
marginRight={20}
19+
inset={10}
20+
height={450}
21+
x={{ type: 'log', label: 'Population' }}
22+
y={{ label: 'Inequality' }}
23+
color={{
24+
scheme: 'BuRd',
25+
pivot: 1.5,
26+
label: 'Change in inequality from 1980 to 2015',
27+
legend: true
28+
}}>
29+
<Link
30+
data={metros}
31+
x1="POP_1980"
32+
y1="R90_10_1980"
33+
x2="POP_2015"
34+
y2="R90_10_2015"
35+
bend
36+
markerEnd="arrow"
37+
style="transition: opacity 0.2s ease-in"
38+
opacity={{
39+
scale: null,
40+
value: (d) =>
41+
!hl || hl.Metro === d.Metro ? 1 : 0.1
42+
}}
43+
onmouseenter={(event, d) => (hl = d)}
44+
onmouseleave={() => (hl = null)}
45+
stroke={(d) => d.R90_10_2015 - d.R90_10_1980} />
46+
<Text
47+
data={metros}
48+
x="POP_2015"
49+
y="R90_10_2015"
50+
filter={(d) =>
51+
hl ? d.Metro === hl.Metro : d.highlight}
52+
text="nyt_display"
53+
fill="currentColor"
54+
stroke="var(--svelteplot-bg)"
55+
strokeWidth={4}
56+
lineAnchor="bottom"
57+
dy={-6} />
58+
</Plot>

‎src/routes/examples/link/spherical-link.svelte

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script module>
2+
export const title = 'Spherical Link';
3+
</script>
4+
5+
<script lang="ts">
6+
import { Plot, Geo, Sphere, Link } from '$lib/index.js';
7+
import { page } from '$app/state';
8+
import * as topojson from 'topojson-client';
9+
import type { ExamplesData } from '../types';
10+
11+
let { world } = $derived(
12+
page.data.data
13+
) as ExamplesData;
14+
15+
let land = $derived(
16+
topojson.feature(world, world.objects.land)
17+
);
18+
19+
const link = [-122.4194, 37.7749, 2.3522, 48.8566];
20+
</script>
21+
22+
<Plot projection="equal-earth">
23+
<Geo data={[land]} fillOpacity={0.3} />
24+
<Link
25+
data={[link]}
26+
text="curve"
27+
x1="2"
28+
y1="3"
29+
x2="0"
30+
y2="1"
31+
curve="bump-x"
32+
stroke="red" />
33+
<Link
34+
data={[link]}
35+
text="Foo"
36+
x1="2"
37+
y1="3"
38+
x2="0"
39+
y2="1"
40+
textFill="currentColor"
41+
textStroke="var(--svelteplot-bg)"
42+
textStrokeWidth={3}
43+
fontSize={15}
44+
textAnchor="start"
45+
textStartOffset="5"
46+
markerStart="dot"
47+
markerEnd="arrow" />
48+
<Sphere stroke="currentColor" />
49+
</Plot>

‎src/routes/marks/link/+page.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@ For connecting two points with a line.
2424
scheme: 'BuRd',
2525
pivot: 1.5,
2626
label: 'Change in inequality from 1980 to 2015',
27-
legend: true,
28-
tickFormat: '+f'
27+
legend: true
2928
}}>
3029
<Link
3130
data={metros}
@@ -38,7 +37,8 @@ For connecting two points with a line.
3837
style="transition: opacity 0.2s ease-in"
3938
opacity={{
4039
scale: null,
41-
value: (d) => (!hl || hl === d ? 1 : 0.1)
40+
value: (d) =>
41+
!hl || hl.Metro === d.Metro ? 1 : 0.1
4242
}}
4343
onmouseenter={(event, d) => (hl = d)}
4444
onmouseleave={() => (hl = null)}
@@ -47,7 +47,8 @@ For connecting two points with a line.
4747
data={metros}
4848
x="POP_2015"
4949
y="R90_10_2015"
50-
filter={(d) => (hl ? d === hl : d.highlight)}
50+
filter={(d) =>
51+
hl ? d.Metro === hl.Metro : d.highlight}
5152
text="nyt_display"
5253
fill="currentColor"
5354
stroke="var(--svelteplot-bg)"

‎static/examples/link/metros.dark.png

321 KB
Loading

‎static/examples/link/metros.png

345 KB
Loading

‎static/examples/link/spherical-link.dark.png

46.5 KB
Loading

‎static/examples/link/spherical-link.png

44.1 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