('y', datum, { x, y })}
{#if isValid(x_) && isValid(y_)}
{@const [px, py] = projectXY(plot.scales, x_, y_)}
diff --git a/src/lib/marks/CustomMarkHTML.svelte b/src/lib/marks/CustomMarkHTML.svelte
index 77425267..dd23848c 100644
--- a/src/lib/marks/CustomMarkHTML.svelte
+++ b/src/lib/marks/CustomMarkHTML.svelte
@@ -2,14 +2,12 @@
@component
For showing custom HTML tooltips positioned at x/y coordinates
-->
-
-
-
-
-
+ dotClass?: ConstantAccessor;
+ }
-
-
-
diff --git a/src/lib/marks/DotY.svelte b/src/lib/marks/DotY.svelte
index 81099b5e..95f89844 100644
--- a/src/lib/marks/DotY.svelte
+++ b/src/lib/marks/DotY.svelte
@@ -1,15 +1,16 @@
-
-
-
diff --git a/src/lib/marks/Frame.svelte b/src/lib/marks/Frame.svelte
index c0153ee1..e2d2a392 100644
--- a/src/lib/marks/Frame.svelte
+++ b/src/lib/marks/Frame.svelte
@@ -2,44 +2,57 @@
@component
Renders a simple frame around the entire plot domain
-->
-
-
-
-
-
-
-
-
+
diff --git a/src/lib/marks/GridX.svelte b/src/lib/marks/GridX.svelte
index 30940f9c..f58c13ec 100644
--- a/src/lib/marks/GridX.svelte
+++ b/src/lib/marks/GridX.svelte
@@ -1,23 +1,34 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/lib/marks/LineY.svelte b/src/lib/marks/LineY.svelte
index 14ba10da..c5def698 100644
--- a/src/lib/marks/LineY.svelte
+++ b/src/lib/marks/LineY.svelte
@@ -1,11 +1,17 @@
-
diff --git a/src/lib/marks/Link.svelte b/src/lib/marks/Link.svelte
index 00d50f32..b758f528 100644
--- a/src/lib/marks/Link.svelte
+++ b/src/lib/marks/Link.svelte
@@ -1,24 +1,40 @@
-
-
+ onupdate?: (data: Datum[]) => void;
+ }
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/src/lib/marks/Spike.svelte b/src/lib/marks/Spike.svelte
index 35218f9f..cefe62d7 100644
--- a/src/lib/marks/Spike.svelte
+++ b/src/lib/marks/Spike.svelte
@@ -2,22 +2,40 @@
@component
Wrapper around the vector mark with presets suitable for spike maps
-->
-
+
-
+
diff --git a/src/lib/marks/SymbolLegend.svelte b/src/lib/marks/SymbolLegend.svelte
index 43480d4d..16d2f05c 100644
--- a/src/lib/marks/SymbolLegend.svelte
+++ b/src/lib/marks/SymbolLegend.svelte
@@ -2,7 +2,7 @@
import { getContext } from 'svelte';
import { symbol as d3Symbol } from 'd3-shape';
import { maybeSymbol } from '$lib/helpers/symbols.js';
- import type { PlotContext } from '../types.js';
+ import type { PlotContext } from '../types/index.js';
const { getPlotState } = getContext('svelteplot');
let plot = $derived(getPlotState());
diff --git a/src/lib/marks/Text.svelte b/src/lib/marks/Text.svelte
index 7f84e330..d0140ac5 100644
--- a/src/lib/marks/Text.svelte
+++ b/src/lib/marks/Text.svelte
@@ -2,22 +2,32 @@
@component
Useful for adding SVG text labels to your plot.
-->
-
+ }
-
{#snippet children({ mark, scaledData, usedScales })}
-
+
{#each scaledData as d, i (i)}
{#if d.valid}
- {@const title = resolveProp(args.title, d.datum, '')}
- {@const frameAnchor = resolveProp(args.frameAnchor, d.datum)}
- {@const isLeft =
- frameAnchor === 'left' ||
- frameAnchor === 'top-left' ||
- frameAnchor === 'bottom-left'}
- {@const isRight =
- frameAnchor === 'right' ||
- frameAnchor === 'top-right' ||
- frameAnchor === 'bottom-right'}
- {@const isTop =
- frameAnchor === 'top' ||
- frameAnchor === 'top-left' ||
- frameAnchor === 'top-right'}
- {@const isBottom =
- frameAnchor === 'bottom' ||
- frameAnchor === 'bottom-left' ||
- frameAnchor === 'bottom-right'}
- {@const [x, y] =
- args.x != null && args.y != null
- ? [d.x, d.y]
- : [
- args.x != null
- ? d.x
- : isLeft
- ? plot.options.marginLeft
- : isRight
- ? plot.options.marginLeft + plot.facetWidth
- : plot.options.marginLeft + plot.facetWidth * 0.5,
- args.y != null
- ? d.y
- : isTop
- ? plot.options.marginTop
- : isBottom
- ? plot.options.marginTop + plot.facetHeight
- : plot.options.marginTop + plot.facetHeight * 0.5
- ]}
-
- {@const dx = +resolveProp(args.dx, d.datum, 0)}
- {@const dy = +resolveProp(args.dy, d.datum, 0)}
{@const textLines = String(resolveProp(args.text, d.datum, '')).split('\n')}
- {@const lineAnchor = resolveProp(
- args.lineAnchor,
- d.datum,
- args.y != null ? 'middle' : isTop ? 'top' : isBottom ? 'bottom' : 'middle'
- )}
- {@const textClassName = resolveProp(args.textClass, d.datum, null)}
- {@const [style, styleClass] = resolveStyles(
- plot,
- { ...d, __tspanIndex: 0 },
- {
- fontSize: 12,
- fontWeight: 500,
- strokeWidth: 1.6,
- textAnchor: isLeft ? 'start' : isRight ? 'end' : 'middle',
- ...args
- },
- 'fill',
- usedScales
- )}
-
- {#if textLines.length > 1}
-
- {@const fontSize = resolveProp(args.fontSize, d.datum) || 12}
- {#each textLines as line, l (l)}{line}{/each}{#if title}{title}{/if}
- {:else}
-
- {textLines[0]}{#if title}{title}{/if}
- {/if}
+
{/if}
{/each}
{/snippet}
-
-
diff --git a/src/lib/marks/TickX.svelte b/src/lib/marks/TickX.svelte
index 0ffdf902..2fa9eaf3 100644
--- a/src/lib/marks/TickX.svelte
+++ b/src/lib/marks/TickX.svelte
@@ -2,27 +2,25 @@
@component
The TickX mark is useful for showing one-dimensional distributions along the x axis. The y axis must be a band scale.
-->
-
-
-
-
-
- export type VectorMarkProps = BaseMarkProps & {
- data: DataRecord[];
- x: ChannelAccessor;
- y: ChannelAccessor;
+
+ }
+ import type {
+ PlotContext,
+ DataRecord,
+ BaseMarkProps,
+ ChannelAccessor,
+ FacetContext,
+ PlotDefaults
+ } from '../types/index.js';
-
+
+{#if href}
+
+
+ {@render children?.()}
+
+{:else}
+ {@render children?.()}
+{/if}
diff --git a/src/lib/marks/helpers/AreaCanvas.svelte b/src/lib/marks/helpers/AreaCanvas.svelte
index 74f1e562..a5d47943 100644
--- a/src/lib/marks/helpers/AreaCanvas.svelte
+++ b/src/lib/marks/helpers/AreaCanvas.svelte
@@ -5,14 +5,14 @@
PlotContext,
ScaledDataRecord,
UsedScales
- } from '$lib/types.js';
+ } from 'svelteplot/types/index.js';
import { resolveProp, resolveScaledStyleProps } from '$lib/helpers/resolve.js';
import { getContext } from 'svelte';
import { type Area } from 'd3-shape';
import CanvasLayer from './CanvasLayer.svelte';
import type { Attachment } from 'svelte/attachments';
import { devicePixelRatio } from 'svelte/reactivity/window';
- import { resolveColor } from './canvas';
+ import { resolveColor } from './canvas.js';
let {
mark,
diff --git a/src/lib/marks/helpers/BaseAxisX.svelte b/src/lib/marks/helpers/BaseAxisX.svelte
index daa2f33d..dc7ea6e8 100644
--- a/src/lib/marks/helpers/BaseAxisX.svelte
+++ b/src/lib/marks/helpers/BaseAxisX.svelte
@@ -10,7 +10,7 @@
PlotState,
RawValue,
ScaleType
- } from '$lib/types.js';
+ } from 'svelteplot/types/index.js';
import { resolveProp, resolveStyles } from '$lib/helpers/resolve.js';
import { max } from 'd3-array';
import { randomId, testFilter } from '$lib/helpers/index.js';
@@ -33,6 +33,7 @@
dy: ConstantAccessor;
filter: ChannelAccessor;
};
+ text: boolean;
plot: PlotState;
};
@@ -50,7 +51,8 @@
height,
options,
plot,
- title
+ title,
+ text = true
}: BaseAxisXProps = $props();
function splitTick(tick: string | string[]) {
@@ -86,15 +88,17 @@
})
);
const T = tickObjects.length;
- for (let i = 0; i < T; i++) {
- let j = i;
- // find the preceding tick that was not hidden
- do {
- j--;
- } while (j >= 0 && tickObjects[j].hidden);
- if (j >= 0) {
- const tickLabelSpace = Math.abs(tickObjects[i].x - tickObjects[j].x);
- tickObjects[i].hidden = tickLabelSpace < 15;
+ if (text) {
+ for (let i = 0; i < T; i++) {
+ let j = i;
+ // find the preceding tick that was not hidden
+ do {
+ j--;
+ } while (j >= 0 && tickObjects[j].hidden);
+ if (j >= 0) {
+ const tickLabelSpace = Math.abs(tickObjects[i].x - tickObjects[j].x);
+ tickObjects[i].hidden = tickLabelSpace < 15;
+ }
}
}
return tickObjects;
@@ -102,6 +106,7 @@
$effect(() => {
untrack(() => [$autoMarginTop, $autoMarginBottom]);
+ if (!text) return;
const outsideTextAnchor = anchor === 'top' ? 'end' : 'start';
// measure tick label heights
const maxLabelHeight =
@@ -144,26 +149,7 @@
{#each positionedTicks as tick, t (t)}
{#if testFilter(tick.value, options) && !tick.hidden}
- {@const textLines = tick.text}
- {@const prevTextLines = t && positionedTicks[t - 1].text}
- {@const fontSize = resolveProp(tickFontSize, tick)}
{@const tickClass_ = resolveProp(tickClass, tick.value)}
- {@const estLabelWidth = max(textLines.map((t) => t.length)) * fontSize * 0.2}
- {@const moveDown =
- (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
- (anchor === 'bottom' ? 1 : -1)}
- {@const [textStyle, textClass] = resolveStyles(
- plot,
- tick,
- {
- fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
- ...options,
- fontSize: tickFontSize,
- stroke: null
- },
- 'fill',
- { x: true }
- )}
{/if}
-
- {#if ticks.length > 0 || t === 0 || t === ticks.length - 1}
- {#if textLines.length === 1}
- {textLines[0]}
- {:else}
- {#each textLines as line, i (i)}
- {!prevTextLines || prevTextLines[i] !== line
- ? line
- : ''}
- {/each}
+ {#if text}
+ {@const textLines = tick.text}
+ {@const prevTextLines = t && positionedTicks[t - 1].text}
+
+ {@const moveDown =
+ (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
+ (anchor === 'bottom' ? 1 : -1)}
+ {@const [textStyle, textClass] = resolveStyles(
+ plot,
+ tick,
+ {
+ fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
+ ...options,
+ fontSize: tickFontSize,
+ stroke: null
+ },
+ 'fill',
+ { x: true },
+ true
+ )}
+
+ {#if ticks.length > 0 || t === 0 || t === ticks.length - 1}
+ {#if textLines.length === 1}
+ {textLines[0]}
+ {:else}
+ {#each textLines as line, i (i)}
+ {!prevTextLines || prevTextLines[i] !== line
+ ? line
+ : ''}
+ {/each}
+ {/if}
{/if}
- {/if}
-
+
+ {/if}
{/if}
{/each}
@@ -217,7 +225,6 @@
stroke: currentColor;
}
text {
- font-size: 11px;
opacity: 0.8;
fill: currentColor;
}
diff --git a/src/lib/marks/helpers/BaseAxisY.svelte b/src/lib/marks/helpers/BaseAxisY.svelte
index 119bef86..f029476b 100644
--- a/src/lib/marks/helpers/BaseAxisY.svelte
+++ b/src/lib/marks/helpers/BaseAxisY.svelte
@@ -9,7 +9,7 @@
PlotState,
RawValue,
ScaleType
- } from '$lib/types.js';
+ } from 'svelteplot/types/index.js';
type BaseAxisYProps = {
scaleFn: (d: RawValue) => number;
@@ -21,14 +21,17 @@
tickSize: number;
tickPadding: number;
tickFontSize: ConstantAccessor;
+ tickClass: ConstantAccessor;
marginLeft: number;
width: number;
title: string | null;
options: {
dx: ConstantAccessor;
dy: ConstantAccessor;
+ textAnchor: 'start' | 'middle' | 'end';
};
plot: PlotState;
+ text: boolean | null;
};
let {
@@ -46,7 +49,8 @@
width,
title,
plot,
- options
+ options,
+ text = true
}: BaseAxisYProps = $props();
const LINE_ANCHOR = {
@@ -67,16 +71,18 @@
element: null as SVGTextElement | null
};
});
- const T = tickObjects.length;
- for (let i = 0; i < T; i++) {
- let j = i;
- // find the preceding tick that was not hidden
- do {
- j--;
- } while (j >= 0 && tickObjects[j].hidden);
- if (j >= 0) {
- const tickLabelSpace = Math.abs(tickObjects[i].y - tickObjects[j].y);
- tickObjects[i].hidden = tickLabelSpace < 15;
+ if (text) {
+ const T = tickObjects.length;
+ for (let i = 0; i < T; i++) {
+ let j = i;
+ // find the preceding tick that was not hidden
+ do {
+ j--;
+ } while (j >= 0 && tickObjects[j].hidden);
+ if (j >= 0) {
+ const tickLabelSpace = Math.abs(tickObjects[i].y - tickObjects[j].y);
+ tickObjects[i].hidden = tickLabelSpace < 15;
+ }
}
}
return tickObjects;
@@ -125,7 +131,7 @@
untrack(() => [$autoMarginTop]);
if (title) {
// add margin top to make some space for title
- $autoMarginTop.set(id, 20);
+ $autoMarginTop.set(id, 27);
} else {
// no need for extra margin top
$autoMarginTop.delete(id);
@@ -156,7 +162,8 @@
stroke: null
},
'fill',
- { y: true }
+ { y: true },
+ true
)}
{/if}
- {Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}
+ {#if text}
+ {Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}
+ {/if}
{/if}
{/each}
@@ -193,11 +203,6 @@
stroke: currentColor;
}
text {
- font-size: 11px;
- opacity: 0.8;
fill: currentColor;
}
- text.is-left {
- text-anchor: end;
- }
diff --git a/src/lib/marks/helpers/CanvasLayer.svelte b/src/lib/marks/helpers/CanvasLayer.svelte
index 16431f13..ec1b707c 100644
--- a/src/lib/marks/helpers/CanvasLayer.svelte
+++ b/src/lib/marks/helpers/CanvasLayer.svelte
@@ -1,7 +1,28 @@
+
+{#if textLines.length > 1}
+
+ {#each textLines as line, l (l)}{line}{/each}{#if title}{title}{/if}
+{:else}
+
+ {textLines[0]}{#if title}{title}{/if}
+{/if}
+
+
diff --git a/src/lib/marks/helpers/RectPath.svelte b/src/lib/marks/helpers/RectPath.svelte
index 0b35cc65..e0a59509 100644
--- a/src/lib/marks/helpers/RectPath.svelte
+++ b/src/lib/marks/helpers/RectPath.svelte
@@ -1,7 +1,31 @@
-
-{#if hasBorderRadius}
-
-{:else}
-
-{/if}
+
+ {#if hasBorderRadius}
+
+ {:else}
+
+ {/if}
+
diff --git a/src/lib/marks/helpers/Regression.svelte b/src/lib/marks/helpers/Regression.svelte
index 19f6ae8a..bad79114 100644
--- a/src/lib/marks/helpers/Regression.svelte
+++ b/src/lib/marks/helpers/Regression.svelte
@@ -1,5 +1,10 @@
+
+
+
+
diff --git a/src/lib/ui/Slider.svelte b/src/lib/ui/Slider.svelte
index 4b041e1b..3573e14d 100644
--- a/src/lib/ui/Slider.svelte
+++ b/src/lib/ui/Slider.svelte
@@ -8,7 +8,7 @@
type = 'range'
}: {
label: string;
- type: 'range' | 'number';
+ type?: 'range' | 'number';
value: number;
min?: number;
max?: number;
diff --git a/src/routes/+page.md b/src/routes/+page.md
index 554d0ccc..f86c3a6e 100644
--- a/src/routes/+page.md
+++ b/src/routes/+page.md
@@ -5,11 +5,14 @@ heroImage: /logo.png
tagline: A Svelte-native visualization framework based on the layered grammar of graphics principles.
actions:
- label: Getting started
- type: flat
+ type: primary
to: /getting-started
- label: Why SveltePlot?
to: /why-svelteplot
- type: primary
+ type: flat
+ - label: Examples
+ to: /examples
+ type: flat
_features:
- title: Marks
description: SveltePlot comes with a powerful set of built-in marks for building for your visualizations
diff --git a/src/routes/examples/+layout.ts b/src/routes/examples/+layout.ts
new file mode 100644
index 00000000..2c635996
--- /dev/null
+++ b/src/routes/examples/+layout.ts
@@ -0,0 +1,41 @@
+import { loadDatasets, loadJSON } from '$lib/helpers/data.js';
+import type { PageServerLoad } from '../$types';
+
+export const ssr = true;
+
+export const load: PageServerLoad = async ({ fetch }) => {
+ return {
+ data: {
+ world: await loadJSON(fetch, 'countries-110m'),
+ us: await loadJSON(fetch, 'us-counties-10m'),
+ earthquakes: await loadJSON(fetch, 'earthquakes'),
+ ...(await loadDatasets(
+ [
+ 'aapl',
+ 'alphabet',
+ 'beagle',
+ 'bls',
+ 'cars',
+ 'co2',
+ 'crimea',
+ 'driving',
+ 'election',
+ 'metros',
+ 'languages',
+ 'penguins',
+ 'riaa',
+ 'seattle',
+ 'stateage',
+ 'tdf',
+ 'rightwing',
+ 'simpsons',
+ 'stocks',
+ 'unemployment',
+ 'sftemp',
+ 'wind'
+ ],
+ fetch
+ ))
+ }
+ };
+};
diff --git a/src/routes/examples/+page.svelte b/src/routes/examples/+page.svelte
new file mode 100644
index 00000000..1b761174
--- /dev/null
+++ b/src/routes/examples/+page.svelte
@@ -0,0 +1,137 @@
+
+
+
+
+
+ Sometimes it's easiest to learn a new framework by
+ digging into examples.
+
+
+
+
+
+ {#each Object.entries(paths) as [group, groupPages] (group)}
+
+
+
+ {#each groupPages
+ .sort(sortPages)
+ .filter((p) => !p.endsWith('/_index.svelte')) as page (page)}
+ -
+ {pages[page].title}
+
+ {/each}
+
+
+ {/each}
+
Not found
+{/if}
diff --git a/src/routes/examples/[group]/[page]/+page.svelte b/src/routes/examples/[group]/[page]/+page.svelte
new file mode 100644
index 00000000..dff09e66
--- /dev/null
+++ b/src/routes/examples/[group]/[page]/+page.svelte
@@ -0,0 +1,155 @@
+
+
+
+
+ {@html $isDark ? codeStyleDark : codeStyleLight}
+
+
+{#if plotKey}
+
+ {mod.title}
+
+ {#if mod.description}{@html mod.description}
{/if}
+
+
+
+
+
+
+
+ '
+ )
+ : pagesSrc[plotKey].lastIndexOf(
+ ''
+ ) + 9
+ )
+ .trim()} />
+
+
+ Open in Svelte playground
+
+ {/if}
+{:else}
+ Not found
+{/if}
+
+
diff --git a/src/routes/examples/area/_index.svelte b/src/routes/examples/area/_index.svelte
new file mode 100644
index 00000000..bcec0472
--- /dev/null
+++ b/src/routes/examples/area/_index.svelte
@@ -0,0 +1,5 @@
+
+
+Area examples
diff --git a/src/routes/examples/area/area-x.svelte b/src/routes/examples/area/area-x.svelte
new file mode 100644
index 00000000..9bc2372e
--- /dev/null
+++ b/src/routes/examples/area/area-x.svelte
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/area/area-y.svelte b/src/routes/examples/area/area-y.svelte
new file mode 100644
index 00000000..86e6e732
--- /dev/null
+++ b/src/routes/examples/area/area-y.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/area/area.svelte b/src/routes/examples/area/area.svelte
new file mode 100644
index 00000000..40661b06
--- /dev/null
+++ b/src/routes/examples/area/area.svelte
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/area/streamgraph.svelte b/src/routes/examples/area/streamgraph.svelte
new file mode 100644
index 00000000..7df9a263
--- /dev/null
+++ b/src/routes/examples/area/streamgraph.svelte
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/arrow/_index.svelte b/src/routes/examples/arrow/_index.svelte
new file mode 100644
index 00000000..3267aa84
--- /dev/null
+++ b/src/routes/examples/arrow/_index.svelte
@@ -0,0 +1,5 @@
+
+
+Arrow examples
diff --git a/src/routes/examples/arrow/metro.svelte b/src/routes/examples/arrow/metro.svelte
new file mode 100644
index 00000000..dcc02ebb
--- /dev/null
+++ b/src/routes/examples/arrow/metro.svelte
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ !hl || hl.Metro === d.Metro ? 1 : 0.1
+ }}
+ onmouseenter={(evt, d) => (hl = d)}
+ onmouseleave={() => (hl = null)}
+ stroke={(d) => d.R90_10_2015 - d.R90_10_1980} />
+
+ hl ? hl.Metro === d.Metro : d.highlight}
+ text="nyt_display"
+ fill="currentColor"
+ stroke="var(--svelteplot-bg)"
+ strokeWidth={4}
+ lineAnchor="bottom"
+ dy={-6} />
+
diff --git a/src/routes/examples/axis/_index.svelte b/src/routes/examples/axis/_index.svelte
new file mode 100644
index 00000000..d1adcc11
--- /dev/null
+++ b/src/routes/examples/axis/_index.svelte
@@ -0,0 +1,10 @@
+
+
+Axis examples
+
+
+ Here are examples related to the AxisX and AxisY marks
+ as well as axis options on the Plot component
+
diff --git a/src/routes/examples/axis/datawrapper-ticks.svelte b/src/routes/examples/axis/datawrapper-ticks.svelte
new file mode 100644
index 00000000..d9d3dd4f
--- /dev/null
+++ b/src/routes/examples/axis/datawrapper-ticks.svelte
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/axis/major-minor.svelte b/src/routes/examples/axis/major-minor.svelte
new file mode 100644
index 00000000..2c04a0bf
--- /dev/null
+++ b/src/routes/examples/axis/major-minor.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/axis/tick-classes.svelte b/src/routes/examples/axis/tick-classes.svelte
new file mode 100644
index 00000000..fe3b00d0
--- /dev/null
+++ b/src/routes/examples/axis/tick-classes.svelte
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ d < 0 ? 'negative' : 'positive'} />
+
+
+
diff --git a/src/routes/examples/axis/tick-count.svelte b/src/routes/examples/axis/tick-count.svelte
new file mode 100644
index 00000000..f317f353
--- /dev/null
+++ b/src/routes/examples/axis/tick-count.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/axis/tick-interval.svelte b/src/routes/examples/axis/tick-interval.svelte
new file mode 100644
index 00000000..25e50fa5
--- /dev/null
+++ b/src/routes/examples/axis/tick-interval.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/axis/tick-spacing.svelte b/src/routes/examples/axis/tick-spacing.svelte
new file mode 100644
index 00000000..594f0567
--- /dev/null
+++ b/src/routes/examples/axis/tick-spacing.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/axis/ticks-inside.svelte b/src/routes/examples/axis/ticks-inside.svelte
new file mode 100644
index 00000000..43faecac
--- /dev/null
+++ b/src/routes/examples/axis/ticks-inside.svelte
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/bar/_index.svelte b/src/routes/examples/bar/_index.svelte
new file mode 100644
index 00000000..51b5a7a8
--- /dev/null
+++ b/src/routes/examples/bar/_index.svelte
@@ -0,0 +1,5 @@
+
+
+Bar examples
diff --git a/src/routes/examples/bar/defaults.svelte b/src/routes/examples/bar/defaults.svelte
new file mode 100644
index 00000000..5a352a42
--- /dev/null
+++ b/src/routes/examples/bar/defaults.svelte
@@ -0,0 +1,22 @@
+
+
+
+
+
+ d} />
+
diff --git a/src/routes/examples/bar/linked-bars.svelte b/src/routes/examples/bar/linked-bars.svelte
new file mode 100644
index 00000000..327a2cfb
--- /dev/null
+++ b/src/routes/examples/bar/linked-bars.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/bar/shuffled-bars.svelte b/src/routes/examples/bar/shuffled-bars.svelte
new file mode 100644
index 00000000..a061ba8d
--- /dev/null
+++ b/src/routes/examples/bar/shuffled-bars.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/brush/_index.svelte b/src/routes/examples/brush/_index.svelte
new file mode 100644
index 00000000..fedffde8
--- /dev/null
+++ b/src/routes/examples/brush/_index.svelte
@@ -0,0 +1,5 @@
+
+
+Brush examples
diff --git a/src/routes/examples/brush/constrained.svelte b/src/routes/examples/brush/constrained.svelte
new file mode 100644
index 00000000..41bc4fda
--- /dev/null
+++ b/src/routes/examples/brush/constrained.svelte
@@ -0,0 +1,43 @@
+
+
+
+
+
+ (brush.enabled ? 'gray' : d.species)}
+ symbol="species" />
+ {#if brush.enabled}
+
+
+ d.culmen_length_mm >= brush.x1 &&
+ d.culmen_length_mm <= brush.x2 &&
+ d.culmen_depth_mm >= brush.y1 &&
+ d.culmen_depth_mm <= brush.y2}
+ x="culmen_length_mm"
+ y="culmen_depth_mm"
+ stroke="species"
+ symbol="species" />
+ {/if}
+
+
diff --git a/src/routes/examples/brush/filter.svelte b/src/routes/examples/brush/filter.svelte
new file mode 100644
index 00000000..69362363
--- /dev/null
+++ b/src/routes/examples/brush/filter.svelte
@@ -0,0 +1,43 @@
+
+
+
+
+
+ (brush.enabled ? 'gray' : d.species)}
+ symbol="species" />
+ {#if brush.enabled}
+
+
+ d.culmen_length_mm >= brush.x1 &&
+ d.culmen_length_mm <= brush.x2 &&
+ d.culmen_depth_mm >= brush.y1 &&
+ d.culmen_depth_mm <= brush.y2}
+ x="culmen_length_mm"
+ y="culmen_depth_mm"
+ stroke="species"
+ symbol="species" />
+ {/if}
+
+
diff --git a/src/routes/examples/brush/overview-detail.svelte b/src/routes/examples/brush/overview-detail.svelte
new file mode 100644
index 00000000..4e1564d3
--- /dev/null
+++ b/src/routes/examples/brush/overview-detail.svelte
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+
+
+ {#if brush.enabled}
+
+
+ {/if}
+
+
+
+
+
+ {#if !isZoomedIn}
+ {
+ if (e.brush.enabled) {
+ domainX = [e.brush.x1, e.brush.x2];
+ domainY = [e.brush.y1, e.brush.y2];
+ brush.enabled = false;
+ isZoomedIn = true;
+ }
+ }} />
+ {:else}
+
+ {/if}
+
+
Cell examples
+
+
+ Examples showcasing the Cell mark
+
diff --git a/src/routes/examples/cell/simpsons.svelte b/src/routes/examples/cell/simpsons.svelte
new file mode 100644
index 00000000..4f246988
--- /dev/null
+++ b/src/routes/examples/cell/simpsons.svelte
@@ -0,0 +1,39 @@
+
+
+
+
+
+ |
+
+ d.imdb_rating != null
+ ? d.imdb_rating.toFixed(1)
+ : null}
+ title={(d) => d.title} />
+
diff --git a/src/routes/examples/cell/temperatures.svelte b/src/routes/examples/cell/temperatures.svelte
new file mode 100644
index 00000000..5f0c332c
--- /dev/null
+++ b/src/routes/examples/cell/temperatures.svelte
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ d.date.getUTCFullYear() === 2015}
+ {...{
+ [x]: (d) => d.date.getUTCDate(),
+ [y]: (d) => d.date.getUTCMonth()
+ }}
+ fill="temp_max"
+ inset={0.5} />
+ |
+
Custom marks
diff --git a/src/routes/examples/custom/custom-svg.svelte b/src/routes/examples/custom/custom-svg.svelte
new file mode 100644
index 00000000..e317e0d2
--- /dev/null
+++ b/src/routes/examples/custom/custom-svg.svelte
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+ {#snippet children({ datum })}
+
+ {/snippet}
+
+
diff --git a/src/routes/examples/dot/0-scatterplot.svelte b/src/routes/examples/dot/0-scatterplot.svelte
new file mode 100644
index 00000000..cd4ef19b
--- /dev/null
+++ b/src/routes/examples/dot/0-scatterplot.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/dot/1-colored-scatterplot.svelte b/src/routes/examples/dot/1-colored-scatterplot.svelte
new file mode 100644
index 00000000..215adddf
--- /dev/null
+++ b/src/routes/examples/dot/1-colored-scatterplot.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/dot/2-symbol-channel.svelte b/src/routes/examples/dot/2-symbol-channel.svelte
new file mode 100644
index 00000000..87ba2157
--- /dev/null
+++ b/src/routes/examples/dot/2-symbol-channel.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/dot/3-dot-plot.svelte b/src/routes/examples/dot/3-dot-plot.svelte
new file mode 100644
index 00000000..d7865122
--- /dev/null
+++ b/src/routes/examples/dot/3-dot-plot.svelte
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ d['Total speakers'] >= 70e6
+ )}
+ fill="currentColor"
+ sort={{ channel: '-x' }}
+ y="Language"
+ x="Total speakers" />
+
diff --git a/src/routes/examples/dot/_index.svelte b/src/routes/examples/dot/_index.svelte
new file mode 100644
index 00000000..5ac0b223
--- /dev/null
+++ b/src/routes/examples/dot/_index.svelte
@@ -0,0 +1,5 @@
+
+
+Dot examples
diff --git a/src/routes/examples/dot/bubble-matrix.svelte b/src/routes/examples/dot/bubble-matrix.svelte
new file mode 100644
index 00000000..a9df9ce0
--- /dev/null
+++ b/src/routes/examples/dot/bubble-matrix.svelte
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/geo/_index.svelte b/src/routes/examples/geo/_index.svelte
new file mode 100644
index 00000000..a90cb520
--- /dev/null
+++ b/src/routes/examples/geo/_index.svelte
@@ -0,0 +1,10 @@
+
+
+Geo examples
+
+
+ You can use the Geo mark for creating
+ maps in SveltePlot.
+
diff --git a/src/routes/examples/geo/custom-proj.svelte b/src/routes/examples/geo/custom-proj.svelte
new file mode 100644
index 00000000..726d393d
--- /dev/null
+++ b/src/routes/examples/geo/custom-proj.svelte
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+ geoOrthographic()
+ .translate([width * 0.5, height * 0.5])
+ .scale(width * 0.5 * zoom)
+ .rotate([-lon, -lat])
+ }}
+ height={(w) => w}>
+
+
+
diff --git a/src/routes/examples/geo/earthquakes.svelte b/src/routes/examples/geo/earthquakes.svelte
new file mode 100644
index 00000000..a454f138
--- /dev/null
+++ b/src/routes/examples/geo/earthquakes.svelte
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+ d.properties.title}
+ href={(d) => d.properties.url}
+ r={(d) => Math.pow(10, d.properties.mag)} />
+
diff --git a/src/routes/examples/geo/inset-aspect.svelte b/src/routes/examples/geo/inset-aspect.svelte
new file mode 100644
index 00000000..f537c033
--- /dev/null
+++ b/src/routes/examples/geo/inset-aspect.svelte
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ w * aspect}>
+ (selected = e)} />
+
+
diff --git a/src/routes/examples/geo/us-choropleth-canvas.svelte b/src/routes/examples/geo/us-choropleth-canvas.svelte
new file mode 100644
index 00000000..4a619394
--- /dev/null
+++ b/src/routes/examples/geo/us-choropleth-canvas.svelte
@@ -0,0 +1,46 @@
+
+
+
+
+
+ d.properties.unemployment} />
+
diff --git a/src/routes/examples/geo/us-choropleth.svelte b/src/routes/examples/geo/us-choropleth.svelte
new file mode 100644
index 00000000..2f91da81
--- /dev/null
+++ b/src/routes/examples/geo/us-choropleth.svelte
@@ -0,0 +1,47 @@
+
+
+
+
+
+ d.properties.unemployment}
+ title={(d) =>
+ `${d.properties.name}\n${d.properties.unemployment}%`} />
+
diff --git a/src/routes/examples/grid/_index.svelte b/src/routes/examples/grid/_index.svelte
new file mode 100644
index 00000000..4653cdb7
--- /dev/null
+++ b/src/routes/examples/grid/_index.svelte
@@ -0,0 +1,10 @@
+
+
+Grid examples
+
+
+ Here are examples related to the grid marks.
+
diff --git a/src/routes/examples/grid/clipped-gridlines.svelte b/src/routes/examples/grid/clipped-gridlines.svelte
new file mode 100644
index 00000000..9b7bbbfe
--- /dev/null
+++ b/src/routes/examples/grid/clipped-gridlines.svelte
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/line/_index.svelte b/src/routes/examples/line/_index.svelte
new file mode 100644
index 00000000..eb0dcfa6
--- /dev/null
+++ b/src/routes/examples/line/_index.svelte
@@ -0,0 +1,10 @@
+
+
+Line examples
+
+
+ Here are examples related to the line mark.
+
diff --git a/src/routes/examples/line/apple-stock.svelte b/src/routes/examples/line/apple-stock.svelte
new file mode 100644
index 00000000..bd255cbf
--- /dev/null
+++ b/src/routes/examples/line/apple-stock.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/line/geo-line.svelte b/src/routes/examples/line/geo-line.svelte
new file mode 100644
index 00000000..24b98876
--- /dev/null
+++ b/src/routes/examples/line/geo-line.svelte
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/line/gradient-line.svelte b/src/routes/examples/line/gradient-line.svelte
new file mode 100644
index 00000000..75d9e66f
--- /dev/null
+++ b/src/routes/examples/line/gradient-line.svelte
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/examples/line/line-grouping.svelte b/src/routes/examples/line/line-grouping.svelte
new file mode 100644
index 00000000..36a14542
--- /dev/null
+++ b/src/routes/examples/line/line-grouping.svelte
@@ -0,0 +1,17 @@
+
+
+
+
+
+ d.Date.getFullYear()} />
+
diff --git a/src/routes/examples/line/tour-de-france.svelte b/src/routes/examples/line/tour-de-france.svelte
new file mode 100644
index 00000000..6f3bc448
--- /dev/null
+++ b/src/routes/examples/line/tour-de-france.svelte
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
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/regression/_index.svelte b/src/routes/examples/regression/_index.svelte
new file mode 100644
index 00000000..409a34f3
--- /dev/null
+++ b/src/routes/examples/regression/_index.svelte
@@ -0,0 +1,5 @@
+
+
+Regression examples
diff --git a/src/routes/examples/regression/cars.svelte b/src/routes/examples/regression/cars.svelte
new file mode 100644
index 00000000..72276325
--- /dev/null
+++ b/src/routes/examples/regression/cars.svelte
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+{#if type.startsWith('loess')}
+ {/if}
+
{/if}
+