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/defaults/+page.md b/src/routes/features/defaults/+page.md
index 8673f015..b661d810 100644
--- a/src/routes/features/defaults/+page.md
+++ b/src/routes/features/defaults/+page.md
@@ -13,40 +13,78 @@ If you're using SveltePlot in a SvelteKit project, you can even set the defaults
import { setContext } from 'svelte';
setContext('svelteplot/defaults', {
- tickSize: 0,
- colorScheme: 'plasma'
+ height: 400,
+ colorScheme: 'plasma',
+ axis: {
+ tickSize: 0,
+ tickPadding: 5
+ }
});
```
-## Options
-
-| Name | Description | Unit | Default |
-| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------- |
-| _height_ | Plot height | px | `350` |
-| _inset_ | Plot inset | px | `0` |
-| _colorScheme_ | Default scheme for color scale | string | `'turbo'` |
-| _categoricalColorScheme_ | Default scheme for [categorical color scales](/features/color-scales#Categorical-colors) | string | `'observable10'` |
-| _unknown_ | Fallback color to be used when mapping NAs to colors s | string | `'#cccccc'` |
-| _tickSize_ | Axis tick line length | px | `6` |
-| _tickPadding_ | Distance between tick line and label | px | `3` |
-| _tickFontSize_ | Tick label font size | px | `11` |
-| _axisXAnchor_ | Alignment of AxisX | | `'bottom'` |
-| _axisYAnchor_ | Alignment of AxisY | | `'left'` |
-| _xTickSpacing_ | Horizontal space between ticks in AxisX and GridX | px | `80` |
-| _yTickSpacing_ | Vertical space between ticks in AxisY and GridY | px | `50` |
-| _graticuleStep_ | Default step size in graticules | degrees | `10` |
-| _locale_ | Default locale used in axis ticks etc. | string | `'en-US'` |
-| _numberFormat_ | Default [number format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) in axis ticks | object | |
-| _css_ | For passing an `@emotion/css` instance to your plots | | |
-
-
+## Global defaults
+
+The defaults context accepts the following options:
+
+| Name | Description | Unit | Default |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ----------------------------------------------- |
+| _height_ | Plot height | px | `350` |
+| _inset_ | Plot inset | px | `0` |
+| _colorScheme_ | Default scheme for color scale | string | `'turbo'` |
+| _categoricalColorScheme_ | Default scheme for [categorical color scales](/features/color-scales#Categorical-colors) | string | `'observable10'` |
+| _unknown_ | Fallback color to be used when mapping NAs to colors | string | `'#cccccc'` |
+| _locale_ | Default locale used in axis ticks etc. | string | `'en-US'` |
+| _numberFormat_ | Default [number format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) in axis ticks | object | `{ style: 'decimal', compactDisplay: 'short' }` |
+| _css_ | For passing an `@emotion/css` instance to your plots | | |
+
+## Mark-specific defaults
+
+Since version 0.3 you can set defaults for specific components using their respective keys:
+
+| Component | Key | Description |
+| --------- | ----------- | ------------------------------------------ |
+| Axis | `axis` | Default options for both X and Y axes |
+| AxisX | `axisX` | Default options for X axis |
+| AxisY | `axisY` | Default options for Y axis |
+| Grid | `grid` | Default options for both X and Y grids |
+| GridX | `gridX` | Default options for X grid |
+| GridY | `gridY` | Default options for Y grid |
+| Frame | `frame` | Default options for plot frame |
+| Area | `area` | Default options for area marks |
+| AreaX | `areaX` | Default options for horizontal area marks |
+| AreaY | `areaY` | Default options for vertical area marks |
+| Bar | `bar` | Default options for bar marks |
+| BarX | `barX` | Default options for horizontal bar marks |
+| BarY | `barY` | Default options for vertical bar marks |
+| Box | `box` | Default options for box marks |
+| BoxX | `boxX` | Default options for horizontal box marks |
+| BoxY | `boxY` | Default options for vertical box marks |
+| Brush | `brush` | Default options for brush marks |
+| BrushX | `brushX` | Default options for horizontal brush marks |
+| BrushY | `brushY` | Default options for vertical brush marks |
+| Cell | `cell` | Default options for cell marks |
+| Dot | `dot` | Default options for dot marks |
+| Geo | `geo` | Default options for geo marks |
+| Graticule | `graticule` | Default options for graticule marks |
+| Line | `line` | Default options for line marks |
+| Link | `link` | Default options for link marks |
+| Pointer | `pointer` | Default options for pointer marks |
+| Rect | `rect` | Default options for rect marks |
+| RectX | `rectX` | Default options for horizontal rect marks |
+| RectY | `rectY` | Default options for vertical rect marks |
+| Rule | `rule` | Default options for rule marks |
+| RuleX | `ruleX` | Default options for horizontal rule marks |
+| RuleY | `ruleY` | Default options for vertical rule marks |
+| Sphere | `sphere` | Default options for sphere marks |
+| Spike | `spike` | Default options for spike marks |
+| Text | `text` | Default options for text marks |
+| Tick | `tick` | Default options for tick marks |
+| TickX | `tickX` | Default options for horizontal tick marks |
+| TickY | `tickY` | Default options for vertical tick marks |
+| Vector | `vector` | Default options for vector marks |
## CSS Variables
@@ -56,7 +94,9 @@ SveltePlot is also relying on CSS variables.
| ----------------- | ----------------------------- | ----- | ------- |
| _--svelteplot-bg_ | Background color of your page | color | white |
-## Example plot
+## Examples
+
+Setting Global and Component Defaults
```svelte live
@@ -89,24 +136,72 @@ SveltePlot is also relying on CSS variables.
```
-```svelte
+```js
+setContext('svelteplot/defaults', {
+ // Global defaults
+ inset: 15,
+ categoricalColorScheme: [
+ 'var(--svp-red)',
+ 'var(--svp-blue)',
+ 'var(--svp-green)'
+ ],
+ // Mark-specific defaults
+ axis: {
+ tickSize: 0,
+ tickPadding: 5
+ },
+ frame: { implicit: true },
+ grid: { implicit: true },
+ dot: {
+ r: 5
+ }
+});
+```
+
+another one
+
+```svelte live
-