diff --git a/src/routes/examples/link/_index.svelte b/src/routes/examples/link/_index.svelte
new file mode 100644
index 00000000..3c03d894
--- /dev/null
+++ b/src/routes/examples/link/_index.svelte
@@ -0,0 +1,10 @@
+
+
+Link examples
+
+
+ Here are examples related to the Link mark.
+
diff --git a/src/routes/examples/link/metros.svelte b/src/routes/examples/link/metros.svelte
new file mode 100644
index 00000000..e7c9794e
--- /dev/null
+++ b/src/routes/examples/link/metros.svelte
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+ !hl || hl.Metro === d.Metro ? 1 : 0.1
+ }}
+ onmouseenter={(event, d) => (hl = d)}
+ onmouseleave={() => (hl = null)}
+ stroke={(d) => d.R90_10_2015 - d.R90_10_1980} />
+
+ hl ? d.Metro === hl.Metro : d.highlight}
+ text="nyt_display"
+ fill="currentColor"
+ stroke="var(--svelteplot-bg)"
+ strokeWidth={4}
+ lineAnchor="bottom"
+ dy={-6} />
+
diff --git a/src/routes/examples/link/spherical-link.svelte b/src/routes/examples/link/spherical-link.svelte
new file mode 100644
index 00000000..09572c79
--- /dev/null
+++ b/src/routes/examples/link/spherical-link.svelte
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/rect/_index.svelte b/src/routes/examples/rect/_index.svelte
new file mode 100644
index 00000000..cce5c319
--- /dev/null
+++ b/src/routes/examples/rect/_index.svelte
@@ -0,0 +1,5 @@
+
+
+Rect mark examples
diff --git a/src/routes/examples/rect/simple-rects.svelte b/src/routes/examples/rect/simple-rects.svelte
new file mode 100644
index 00000000..7c3768b1
--- /dev/null
+++ b/src/routes/examples/rect/simple-rects.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/rect/stacked-rectx.svelte b/src/routes/examples/rect/stacked-rectx.svelte
new file mode 100644
index 00000000..17fdfcbe
--- /dev/null
+++ b/src/routes/examples/rect/stacked-rectx.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/rect/stacked-recty.svelte b/src/routes/examples/rect/stacked-recty.svelte
new file mode 100644
index 00000000..9b4d5523
--- /dev/null
+++ b/src/routes/examples/rect/stacked-recty.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/rule/_index.svelte b/src/routes/examples/rule/_index.svelte
new file mode 100644
index 00000000..03598ff9
--- /dev/null
+++ b/src/routes/examples/rule/_index.svelte
@@ -0,0 +1,10 @@
+
+
+Rule examples
+
+
+ Here are examples related to the rule mark.
+
diff --git a/src/routes/examples/rule/data-rules.svelte b/src/routes/examples/rule/data-rules.svelte
new file mode 100644
index 00000000..baefac6b
--- /dev/null
+++ b/src/routes/examples/rule/data-rules.svelte
@@ -0,0 +1,34 @@
+
+
+
+
+
+ monthNames[d.Date.getMonth()]} />
+
diff --git a/src/routes/examples/rule/min-max.svelte b/src/routes/examples/rule/min-max.svelte
new file mode 100644
index 00000000..381448e0
--- /dev/null
+++ b/src/routes/examples/rule/min-max.svelte
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/rule/y-baseline.svelte b/src/routes/examples/rule/y-baseline.svelte
new file mode 100644
index 00000000..66fac509
--- /dev/null
+++ b/src/routes/examples/rule/y-baseline.svelte
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/text/_index.svelte b/src/routes/examples/text/_index.svelte
new file mode 100644
index 00000000..85708095
--- /dev/null
+++ b/src/routes/examples/text/_index.svelte
@@ -0,0 +1,5 @@
+
+
+Text examples
diff --git a/src/routes/examples/text/css-var.svelte b/src/routes/examples/text/css-var.svelte
new file mode 100644
index 00000000..5ce0131f
--- /dev/null
+++ b/src/routes/examples/text/css-var.svelte
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/text/frame-anchor.svelte b/src/routes/examples/text/frame-anchor.svelte
new file mode 100644
index 00000000..8c4430d0
--- /dev/null
+++ b/src/routes/examples/text/frame-anchor.svelte
@@ -0,0 +1,32 @@
+
+
+
+
+
+ {#each ['top', 'bottom', 'center', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'] as frameAnchor (frameAnchor)}
+
+ {/each}
+
diff --git a/src/routes/examples/types.ts b/src/routes/examples/types.ts
new file mode 100644
index 00000000..b71116f8
--- /dev/null
+++ b/src/routes/examples/types.ts
@@ -0,0 +1,158 @@
+type AaplRow = {
+ Date: Date;
+ Open: number;
+ High: number;
+ Low: number;
+ Close: number;
+ Volume: number;
+ [`Adj Close`]: number;
+};
+
+type SimpsonsRow = {
+ episode: string;
+ season: string;
+ /**
+ * the imdb rating of the episode
+ */
+ imdb_rating: number;
+ title: string;
+};
+
+type PenguinsRow = {
+ species: string;
+ island: string;
+ bill_length_mm: number;
+ bill_depth_mm: number;
+ flipper_length_mm: number;
+ body_mass_g: number;
+};
+
+type LanguagesRow = {
+ Language: string;
+ Remarks: string;
+ Family: string;
+ Branch: string;
+ [`First-language`]: string;
+ [`Second-language`]: string;
+ [`Total speakers`]: number;
+};
+
+type EarthquakeFeature = {
+ type: 'Feature';
+ properties: {
+ mag: number;
+ place: string;
+ time: number;
+ updated: number;
+ url: string;
+ detail: string;
+ status: 'reviewed';
+ tsunami: number;
+ sig: number;
+ net: string;
+ code: string;
+ ids: string;
+ sources: string;
+ types: string;
+ nst: number;
+ dmin: number;
+ rms: number;
+ gap: number;
+ magType: string;
+ type: 'earthquake';
+ title: string;
+ };
+ geometry: {
+ type: 'Point';
+ coordinates: [number, number, number];
+ };
+ id: string;
+};
+
+type BeagleRow = {
+ lon: number;
+ lat: number;
+};
+
+type RiaaRow = {
+ year: Date;
+ format: string;
+ group: string;
+ revenue: number;
+};
+
+type MetrosRow = {
+ Metro: string;
+ POP_1980: number;
+ LPOP_1980: number;
+ R90_10_1980: number;
+ POP_2015: number;
+ LPOP_2015: number;
+ R90_10_2015: number;
+ nyt_display: string;
+ state_display: string;
+ highlight: number;
+};
+
+type WindRow = {
+ longitude: number;
+ latitude: number;
+ u: number;
+ v: number;
+};
+
+type ElectionRow = {
+ // state,fips,margin2020,margin2016,votes,votes2016
+ state: string;
+ fips: number;
+ margin2020: number;
+ margin2016: number;
+ votes: number;
+ votes2016: number;
+};
+
+interface WorldAtlas extends TopoJSON.Topology {
+ objects: {
+ countries: {
+ type: 'GeometryCollection';
+ geometries: Array;
+ };
+ land: TopoJSON.GeometryCollection;
+ };
+ bbox: [number, number, number, number];
+ transform: TopoJSON.Transform;
+}
+
+interface USAtlas extends TopoJSON.Topology {
+ objects: {
+ counties: {
+ type: 'GeometryCollection';
+ geometries: Array;
+ };
+ states: {
+ type: 'GeometryCollection';
+ geometries: Array;
+ };
+ nation: TopoJSON.GeometryCollection;
+ };
+ bbox: [number, number, number, number];
+ transform: TopoJSON.Transform;
+}
+
+export type ExamplesData = {
+ aapl: AaplRow[];
+ simpsons: SimpsonsRow[];
+ penguins: PenguinsRow[];
+ languages: LanguagesRow[];
+ earthquakes: {
+ type: 'FeatureCollection';
+ features: EarthquakeFeature[];
+ };
+ world: WorldAtlas;
+ us: USAtlas;
+ beagle: BeagleRow[];
+ riaa: RiaaRow[];
+ metros: MetrosRow[];
+ wind: WindRow[];
+ election: ElectionRow[];
+};
diff --git a/src/routes/examples/vector/_index.svelte b/src/routes/examples/vector/_index.svelte
new file mode 100644
index 00000000..06bbc2b6
--- /dev/null
+++ b/src/routes/examples/vector/_index.svelte
@@ -0,0 +1,5 @@
+
+
+Vector examples
diff --git a/src/routes/examples/vector/spike-map.svelte b/src/routes/examples/vector/spike-map.svelte
new file mode 100644
index 00000000..413411af
--- /dev/null
+++ b/src/routes/examples/vector/spike-map.svelte
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+ d.properties?.votes ?? 0} />
+
diff --git a/src/routes/examples/vector/wind.svelte b/src/routes/examples/vector/wind.svelte
new file mode 100644
index 00000000..225cc331
--- /dev/null
+++ b/src/routes/examples/vector/wind.svelte
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ (Math.atan2(u, v) * 180) / Math.PI}
+ length={({ u, v }) => Math.hypot(u, v)}
+ stroke={({ u, v }) => Math.hypot(u, v)} />
+
diff --git a/src/routes/features/markers/+page.md b/src/routes/features/markers/+page.md
index 87f690a3..a4c724fa 100644
--- a/src/routes/features/markers/+page.md
+++ b/src/routes/features/markers/+page.md
@@ -88,7 +88,7 @@ Note that for the interpolation methods `basis`, `bundle`, and `step`, the marke
import { Plot, LineY, Dot } from 'svelteplot';
import Slider from '$lib/ui/Slider.svelte';
import Select from '$lib/ui/Select.svelte';
- import type { CurveName } from '$lib/types.js';
+ import type { CurveName } from '$lib/types/index.js';
// curve demo
const numbers = [
@@ -134,7 +134,7 @@ You can also specify a custom marker icon using the `marker` snippet:
```svelte live
diff --git a/src/routes/marks/line/CurveDemo.svelte b/src/routes/marks/line/CurveDemo.svelte
index d7c02569..5f01f467 100644
--- a/src/routes/marks/line/CurveDemo.svelte
+++ b/src/routes/marks/line/CurveDemo.svelte
@@ -2,7 +2,7 @@
import { Plot, LineY, Dot } from '$lib/index.js';
import Slider from '$lib/ui/Slider.svelte';
import Select from '$lib/ui/Select.svelte';
- import type { CurveName } from '$lib/types.js';
+ import type { CurveName } from 'svelteplot/types/index.js';
// curve demo
const numbers = [
diff --git a/src/routes/marks/link/+page.md b/src/routes/marks/link/+page.md
index d36ea9dc..a83526a5 100644
--- a/src/routes/marks/link/+page.md
+++ b/src/routes/marks/link/+page.md
@@ -24,8 +24,7 @@ For connecting two points with a line.
scheme: 'BuRd',
pivot: 1.5,
label: 'Change in inequality from 1980 to 2015',
- legend: true,
- tickFormat: '+f'
+ legend: true
}}>
(!hl || hl === d ? 1 : 0.1)
+ value: (d) =>
+ !hl || hl.Metro === d.Metro ? 1 : 0.1
}}
onmouseenter={(event, d) => (hl = d)}
onmouseleave={() => (hl = null)}
@@ -47,7 +47,8 @@ For connecting two points with a line.
data={metros}
x="POP_2015"
y="R90_10_2015"
- filter={(d) => (hl ? d === hl : d.highlight)}
+ filter={(d) =>
+ hl ? d.Metro === hl.Metro : d.highlight}
text="nyt_display"
fill="currentColor"
stroke="var(--svelteplot-bg)"
diff --git a/src/routes/marks/rule/+page.md b/src/routes/marks/rule/+page.md
index be0ee46e..3facc9e7 100644
--- a/src/routes/marks/rule/+page.md
+++ b/src/routes/marks/rule/+page.md
@@ -39,7 +39,7 @@ Like most other marks, rules also accept data for displaying multiple lines at o
```svelte live
diff --git a/src/tests/dot.test.svelte b/src/tests/dot.test.svelte
index 07762711..a892a88d 100644
--- a/src/tests/dot.test.svelte
+++ b/src/tests/dot.test.svelte
@@ -1,5 +1,5 @@