(
};
}
+function domainFromInterval(domain: RawValue[], interval: string | number, name: ScaleName) {
+ const interval_ = maybeInterval(interval);
+ const [lo, hi] = extent(domain);
+ const out = interval_.range(lo, interval_.offset(hi));
+ return name === 'y' ? out.toReversed() : out;
+}
+
/**
* Infer a scale type based on the scale name, the data values mapped to it and
* the mark types that are bound to the scale
diff --git a/src/lib/marks/AxisX.svelte b/src/lib/marks/AxisX.svelte
index db799c94..df156afb 100644
--- a/src/lib/marks/AxisX.svelte
+++ b/src/lib/marks/AxisX.svelte
@@ -2,6 +2,7 @@
Renders a horizontal axis with labels and tick marks
-->
+
+
+
+
diff --git a/src/routes/examples/+layout.ts b/src/routes/examples/+layout.ts
new file mode 100644
index 00000000..976ef042
--- /dev/null
+++ b/src/routes/examples/+layout.ts
@@ -0,0 +1,32 @@
+import { loadDatasets, loadJSON } from '$lib/helpers/data.js';
+import type { PageLoad } from './$types.js';
+
+export const ssr = true;
+
+export const load: PageLoad = async ({ fetch }) => {
+ return {
+ data: {
+ world: await loadJSON(fetch, 'countries-110m'),
+ us: await loadJSON(fetch, 'us-counties-10m'),
+ ...(await loadDatasets(
+ [
+ 'aapl',
+ 'beagle',
+ 'bls',
+ 'co2',
+ 'crimea',
+ 'driving',
+ 'penguins',
+ 'riaa',
+ 'stateage',
+ 'tdf',
+ 'rightwing',
+ 'stocks',
+ 'unemployment',
+ 'sftemp'
+ ],
+ fetch
+ ))
+ }
+ };
+};
diff --git a/src/routes/examples/+page.svelte b/src/routes/examples/+page.svelte
new file mode 100644
index 00000000..48d0e854
--- /dev/null
+++ b/src/routes/examples/+page.svelte
@@ -0,0 +1,116 @@
+
+
+
+
+
+ Sometimes it's easiest to learn a new framework by
+ digging into examples.
+
+
+
+
+
+ {#each Object.entries(paths) as [group, groupPages] (group)}
+
+
+
+ {#each groupPages.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..c072337a
--- /dev/null
+++ b/src/routes/examples/[group]/[page]/+page.svelte
@@ -0,0 +1,137 @@
+
+
+
+
+ {@html $isDark ? codeStyleDark : codeStyleLight}
+
+
+{#if plotKey}
+
+ {mod.title}
+
+ {#if mod.description}{@html mod.description}
{/if}
+
+
+
+{:else}
+ Not found
+{/if}
+
+
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..97bb2136
--- /dev/null
+++ b/src/routes/examples/axis/datawrapper-ticks.svelte
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
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/dot/0-scatterplot.svelte b/src/routes/examples/dot/0-scatterplot.svelte
new file mode 100644
index 00000000..7e90469b
--- /dev/null
+++ b/src/routes/examples/dot/0-scatterplot.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
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..e2e37dfc
--- /dev/null
+++ b/src/routes/examples/dot/1-colored-scatterplot.svelte
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
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..cbffdf88
--- /dev/null
+++ b/src/routes/examples/dot/2-symbol-channel.svelte
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
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/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/us-choropleth-canvas.svelte b/src/routes/examples/geo/us-choropleth-canvas.svelte
new file mode 100644
index 00000000..ba3381c3
--- /dev/null
+++ b/src/routes/examples/geo/us-choropleth-canvas.svelte
@@ -0,0 +1,45 @@
+
+
+
+
+
+ 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..328bc44d
--- /dev/null
+++ b/src/routes/examples/geo/us-choropleth.svelte
@@ -0,0 +1,46 @@
+
+
+
+
+
+ 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..8a504894
--- /dev/null
+++ b/src/routes/examples/line/apple-stock.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
diff --git a/src/routes/examples/line/gradient-line.svelte b/src/routes/examples/line/gradient-line.svelte
new file mode 100644
index 00000000..2958a9bb
--- /dev/null
+++ b/src/routes/examples/line/gradient-line.svelte
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
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/marks/axis/+page.md b/src/routes/marks/axis/+page.md
index 48b7c2f8..a2efd740 100644
--- a/src/routes/marks/axis/+page.md
+++ b/src/routes/marks/axis/+page.md
@@ -260,10 +260,14 @@ You can explicitly add an x axis using the `AxisX` mark component. The `AxisX` c
- `tickSize` - size of the tick marks in pixels (default: 6)
- `tickFontSize` - font size for tick labels (default: 11)
- `tickPadding` - padding between tick lines and labels (default: 3)
+- `tickSpacing` - approximate pixel space between generated ticks
+- `tickCount` - approximate number of ticks to generate
- `tickFormat` - custom formatter for tick labels (can be 'auto', Intl.DateTimeFormatOptions, Intl.NumberFormatOptions, or custom function)
- `tickClass` - function to assign custom classes to ticks based on their values
- `automatic` - internal flag, set to true for implicit axes
+For compatibility reasons AxisX also supports the "magic" **ticks** option which can be an alias for **data** (array), **interval** (string) or **tickCount** (number) depending on the type of value you're passing.
+
The `AxisX` component also inherits all styling properties from the base mark component (fill, stroke, strokeWidth, opacity, etc.).
## AxisY
@@ -280,10 +284,14 @@ The `AxisY` component provides extensive customization options for y-axis presen
- `tickSize` - size of the tick marks in pixels (default: 6)
- `tickFontSize` - font size for tick labels (default: 11)
- `tickPadding` - padding between tick lines and labels (default: 3)
+- `tickSpacing` - approximate pixel space between generated ticks
+- `tickCount` - approximate number of ticks to generate
- `tickFormat` - custom formatter for tick labels (can be 'auto', Intl.DateTimeFormatOptions, Intl.NumberFormatOptions, or custom function)
- `tickClass` - function to assign custom classes to ticks based on their values
- `automatic` - internal flag, set to true for implicit axes
+For compatibility reasons AxisY also supports the "magic" **ticks** option which can be an alias for **data** (array), **interval** (string) or **tickCount** (number) depending on the type of value you're passing.
+
The `AxisY` component also inherits all styling properties from the base mark component (fill, stroke, strokeWidth, opacity, etc.).
## Advanced use
diff --git a/src/routes/marks/bar/+page.md b/src/routes/marks/bar/+page.md
index 5b9f2333..ab85e244 100644
--- a/src/routes/marks/bar/+page.md
+++ b/src/routes/marks/bar/+page.md
@@ -7,33 +7,63 @@ title: Bar mark
import StackedBarPlot from './StackedBarPlot.svelte';
-Bars are cool. They come in two flavors: [BarY](#BarY) for vertical bars (columns) and [BarX](#BarX) for horizontal bars.
-
-Here's a very simple bar chart:
+Bars are useful to show quantitative data for different categories. They come in two flavors: [BarX](#BarX) for horizontal bars (y axis requires band scale) and [BarY](#BarY) for vertical bars aka. columns (x axis requires band scale).
```svelte live
-
-
+
+
```
```svelte
-
-
+
+
+
+
+```
+
+[fork](https://svelte.dev/playground/7a0d38cf74be4a9985feb7bef0456008?version=5)
+
+SveltePlot automatically infers a band scale for the y axis in the above example. but since our data is missing a value for 2023, the value `"2023"` is entirely missing from the band scale domain. We could fix this by passing the domain value manually, or by using the `interval` option of the y axis:
+
+```svelte live
+
+
+
+
+
+
+```
+
+```
+
+
```
-You can create stacked bar charts by defining a fill channel which will be used for grouping the series by the implicit [stack transform](/transforms/stack):
+You can create stacked bar charts by defining a fill channel which will be used for grouping the series by the implicit [stack transform](/transforms/stack). In the following example we're first grouping the penguins dataset by island to then stack them by species:
```svelte live
-
- v ** 2)}
- fill="steelblue" />
-
+
+
+
```
```svelte
- v ** 2)}
- fill="steelblue" />
-
+
+
```
[fork](https://svelte.dev/playground/8b9fb6c1946d4579a3dc9da32f6c983c?version=5)
-For stacked bar charts, provide a `fill` channel that will be used for grouping the series:
-
-```svelte
-
-
-
-```
-
## Insets
You can create bullet bars using the `inset` option and two `BarX` layers:
diff --git a/src/routes/marks/line/+page.md b/src/routes/marks/line/+page.md
index c55720ce..75c6587d 100644
--- a/src/routes/marks/line/+page.md
+++ b/src/routes/marks/line/+page.md
@@ -278,6 +278,8 @@ BLS Demo:
```
+[fork](https://svelte.dev/playground/31a8033153784f33848a7c388a67a82e?version=5)
+
## Line
The following channels are supported:
diff --git a/src/routes/marks/rect/+page.md b/src/routes/marks/rect/+page.md
index cae4503e..03b9610d 100644
--- a/src/routes/marks/rect/+page.md
+++ b/src/routes/marks/rect/+page.md
@@ -2,7 +2,85 @@
title: Rect mark
---
-The Rect mark can be used to add rectangles to the plot, defined by x1, y1, x2, and y2 coordinates:
+The Rect mark can be used to add rectangles to the plot, defined by x1, y1, x2, and y2 coordinates. It is useful in cases where both the x and y axis are using quantitative scales.
+
+:::tip
+**Tip:** If one of your axes is a band scale, you may want to use the [Bar](/marks/bar) marks instead, and if both axes are band scales you probably need the [Cell](/marks/cell) mark.
+:::
+
+In it's purest form, the `` mark will just add rectangles at the given coordinates:
+
+```svelte live
+
+
+
+
+
+```
+
+```svelte
+
+
+
+```
+
+[fork](https://svelte.dev/playground/7a6b0ae12c624ffeb52448adac644b5b?version=5)
+
+If your data does not come with x1/x2 and y1/y2 pairs but x/y coordinates, you can use the implicit interval transform:
+
+```svelte live
+
+
+
+
+
+```
+
+```svelte
+
+
+
+```
The interval transform may be used to convert a single value in x or y (or both) into an extent. For example, the chart below shows the observed daily maximum temperature in Seattle for the year 2015. The day-in-month and month-in-year numbers are expanded to unit intervals by setting the [interval option](/transforms/interval) to 1.
@@ -55,6 +133,8 @@ The interval transform may be used to convert a single value in x or y (or both)
```
+## Rect
+
## RectX
RectX can be used for range annotations:
diff --git a/src/routes/tests/rect/+page.md b/src/routes/tests/rect/+page.md
new file mode 100644
index 00000000..a4088f44
--- /dev/null
+++ b/src/routes/tests/rect/+page.md
@@ -0,0 +1,51 @@
+```svelte live
+
+
+
+
+
+
+```
+
+```svelte live
+
+
+
+
+
+
+```
diff --git a/src/tests/axisX.test.svelte b/src/tests/axisX.test.svelte
new file mode 100644
index 00000000..44a0e8c0
--- /dev/null
+++ b/src/tests/axisX.test.svelte
@@ -0,0 +1,14 @@
+
+
+
+
+
diff --git a/src/tests/axisX.test.ts b/src/tests/axisX.test.ts
new file mode 100644
index 00000000..ab174fed
--- /dev/null
+++ b/src/tests/axisX.test.ts
@@ -0,0 +1,156 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import AxisXTest from './axisX.test.svelte';
+
+describe('AxisX mark', () => {
+ it('default axis', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: { width: 400, x: { domain: [0, 100] } }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBeGreaterThan(2);
+ expect(tickValues).toStrictEqual(['0', '20', '40', '60', '80', '100']);
+ });
+
+ it('custom tick values via axis.data', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: { width: 400, x: { domain: [0, 100] } },
+ axisArgs: { data: [0, 20, 80] }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '20', '80']);
+ });
+
+ it('custom tick values via x scale ticks options', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: { width: 400, x: { domain: [0, 100], ticks: [0, 20, 80] } }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '20', '80']);
+ });
+
+ it('custom tick values via axis.ticks', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: { width: 400, x: { domain: [0, 100] } },
+ axisArgs: { ticks: [0, 20, 80] }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '20', '80']);
+ });
+
+ it('tick count via axis tickCount option', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: { width: 400, x: { domain: [0, 100] } },
+ axisArgs: { tickCount: 3 }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '50', '100']);
+ });
+
+ it('tick count via axis.ticks', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: { width: 400, x: { domain: [0, 100] } },
+ axisArgs: { ticks: 3 }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '50', '100']);
+ });
+
+ it('tick spacing via axis options', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: { width: 400, x: { domain: [0, 100] } },
+ axisArgs: { tickSpacing: 200 }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '50', '100']);
+ });
+
+ it('tick spacing via scale options', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: { width: 400, x: { domain: [0, 100], tickSpacing: 200 } }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '50', '100']);
+ });
+
+ it('tick interval via scale options', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: { width: 400, x: { domain: [0, 100], interval: 30 } }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(tickValues).toStrictEqual(['0', '30', '60', '90', '120']);
+ });
+
+ it('tick interval via axis options', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: { width: 400, x: { domain: [0, 100] } },
+ axisArgs: { interval: 30 }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(tickValues).toStrictEqual(['0', '30', '60', '90', '120']);
+ });
+
+ it('tick interval via axis.ticks', () => {
+ const { container } = render(AxisXTest, {
+ props: {
+ plotArgs: {
+ width: 400,
+ x: { domain: [new Date(2000, 0, 1), new Date(2002, 0, 1)] }
+ },
+ axisArgs: { ticks: '6 months' }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-x > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(5);
+ expect(tickValues).toStrictEqual(['Jan2000', 'Jul', 'Jan2001', 'Jul', 'Jan2002']);
+ });
+});
diff --git a/src/tests/axisY.test.svelte b/src/tests/axisY.test.svelte
new file mode 100644
index 00000000..9fa595a7
--- /dev/null
+++ b/src/tests/axisY.test.svelte
@@ -0,0 +1,14 @@
+
+
+
+
+
diff --git a/src/tests/axisY.test.ts b/src/tests/axisY.test.ts
new file mode 100644
index 00000000..f2b2e8fe
--- /dev/null
+++ b/src/tests/axisY.test.ts
@@ -0,0 +1,139 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import AxisYTest from './axisY.test.svelte';
+
+describe('AxisY mark', () => {
+ it('default axis', () => {
+ const { container } = render(AxisYTest, {
+ props: {
+ plotArgs: { height: 300, y: { domain: [0, 100] } }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBeGreaterThan(2);
+ expect(tickValues).toStrictEqual(['0', '20', '40', '60', '80', '100']);
+ });
+
+ it('custom tick values via axis.data', () => {
+ const { container } = render(AxisYTest, {
+ props: {
+ plotArgs: { height: 300, y: { domain: [0, 100] } },
+ axisArgs: { data: [0, 20, 80] }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '20', '80']);
+ });
+
+ it('custom tick values via axis.ticks', () => {
+ const { container } = render(AxisYTest, {
+ props: {
+ plotArgs: { height: 300, y: { domain: [0, 100] } },
+ axisArgs: { ticks: [0, 20, 80] }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '20', '80']);
+ });
+
+ it('custom tick values via x scale ticks options', () => {
+ const { container } = render(AxisYTest, {
+ props: {
+ plotArgs: { height: 300, y: { domain: [0, 100], ticks: [0, 20, 80] } }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '20', '80']);
+ });
+
+ it('tick count via axis.tickCount', () => {
+ const { container } = render(AxisYTest, {
+ props: {
+ plotArgs: { height: 300, y: { domain: [0, 100] } },
+ axisArgs: { tickCount: 3 }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '50', '100']);
+ });
+
+ it('tick count via axis.ticks', () => {
+ const { container } = render(AxisYTest, {
+ props: {
+ plotArgs: { height: 300, y: { domain: [0, 100] } },
+ axisArgs: { ticks: 3 }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '50', '100']);
+ });
+
+ it('tickSpacing', () => {
+ const { container } = render(AxisYTest, {
+ props: {
+ plotArgs: { height: 300, y: { domain: [0, 100] } },
+ axisArgs: { tickSpacing: 200 }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '50', '100']);
+ });
+
+ it('tickSpacing', () => {
+ const { container } = render(AxisYTest, {
+ props: {
+ plotArgs: { height: 300, y: { domain: [0, 100], tickSpacing: 200 } }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(ticks.length).toBe(3);
+ expect(tickValues).toStrictEqual(['0', '50', '100']);
+ });
+
+ it('tick interval via scale options', () => {
+ const { container } = render(AxisYTest, {
+ props: {
+ plotArgs: { height: 300, y: { domain: [0, 100], interval: 30 } }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(tickValues).toStrictEqual(['0', '30', '60', '90', '120']);
+ });
+
+ it('tick interval via axis options', () => {
+ const { container } = render(AxisYTest, {
+ props: {
+ plotArgs: { height: 300, y: { domain: [0, 100] } },
+ axisArgs: { interval: 30 }
+ }
+ });
+
+ const ticks = container.querySelectorAll('g.axis-y > g.tick') as NodeListOf;
+ const tickValues = Array.from(ticks).map((t) => t.querySelector('text')?.textContent);
+ expect(tickValues).toStrictEqual(['0', '30', '60', '90', '120']);
+ });
+});
diff --git a/src/tests/barX.test.ts b/src/tests/barX.test.ts
index 5b186d83..19e74f70 100644
--- a/src/tests/barX.test.ts
+++ b/src/tests/barX.test.ts
@@ -84,6 +84,67 @@ describe('BarX mark', () => {
// // check that bar length match data
expect(barDims.map((d) => d.w)).toStrictEqual([1, 2, 3, 4, 5].map((m) => barDims[0].w * m));
});
+
+ const timeseries = [
+ { year: 2019, value: 1 },
+ { year: 2020, value: 2 },
+ { year: 2021, value: 3 },
+ { year: 2022, value: 4 },
+ { year: 2024, value: 5 }
+ ];
+
+ it('skips missing years in band scale domain', () => {
+ const { container } = render(BarXTest, {
+ props: {
+ plotArgs: {
+ height: 200,
+ axes: true
+ },
+ barArgs: {
+ data: timeseries,
+ x: 'value',
+ y: 'year'
+ }
+ }
+ });
+
+ const bars = container.querySelectorAll('g.bar-x > rect') as NodeListOf;
+ expect(bars.length).toBe(5);
+
+ const yAxisLabels = container.querySelectorAll(
+ 'g.axis-y .tick text'
+ ) as NodeListOf;
+ expect(yAxisLabels.length).toBe(5);
+ const labels = Array.from(yAxisLabels).map((d) => d.textContent);
+ expect(labels.sort()).toStrictEqual(['2019', '2020', '2021', '2022', '2024']);
+ });
+
+ it('includes missing years in band scale domain if interval is set', () => {
+ const { container } = render(BarXTest, {
+ props: {
+ plotArgs: {
+ height: 200,
+ axes: true,
+ y: { interval: 1 }
+ },
+ barArgs: {
+ data: timeseries,
+ x: 'value',
+ y: 'year'
+ }
+ }
+ });
+
+ const bars = container.querySelectorAll('g.bar-x > rect') as NodeListOf;
+ expect(bars.length).toBe(5);
+
+ const yAxisLabels = container.querySelectorAll(
+ 'g.axis-y .tick text'
+ ) as NodeListOf;
+ expect(yAxisLabels.length).toBe(6);
+ const labels = Array.from(yAxisLabels).map((d) => d.textContent);
+ expect(labels.sort()).toEqual(['2019', '2020', '2021', '2022', '2023', '2024']);
+ });
});
function getRectDims(rect: SVGRectElement) {
diff --git a/src/tests/barY.test.ts b/src/tests/barY.test.ts
index 118b2725..9a10b9fc 100644
--- a/src/tests/barY.test.ts
+++ b/src/tests/barY.test.ts
@@ -110,6 +110,69 @@ describe('BarY mark', () => {
expect(barDims[3].h).toBe(barDims[0].h * 4);
expect(barDims[4].h).toBe(barDims[0].h * 5);
});
+
+ const timeseries = [
+ { year: 2019, value: 1 },
+ { year: 2020, value: 2 },
+ { year: 2021, value: 3 },
+ { year: 2022, value: 4 },
+ { year: 2024, value: 5 }
+ ];
+
+ it('skips missing years in band scale domain', () => {
+ const { container } = render(BarYTest, {
+ props: {
+ plotArgs: {
+ width: 400,
+ height: 400,
+ axes: true
+ },
+ barArgs: {
+ data: timeseries,
+ y: 'value',
+ x: 'year'
+ }
+ }
+ });
+
+ const bars = container.querySelectorAll('g.bar-y > rect') as NodeListOf;
+ expect(bars.length).toBe(5);
+
+ const xAxisLabels = container.querySelectorAll(
+ 'g.axis-x .tick text'
+ ) as NodeListOf;
+ expect(xAxisLabels.length).toBe(5);
+ const labels = Array.from(xAxisLabels).map((d) => d.textContent);
+ expect(labels.sort()).toStrictEqual(['2019', '2020', '2021', '2022', '2024']);
+ });
+
+ it('includes missing years in band scale domain if interval is set', () => {
+ const { container } = render(BarYTest, {
+ props: {
+ plotArgs: {
+ width: 500,
+ height: 400,
+ axes: true,
+ x: { interval: 1 }
+ },
+ barArgs: {
+ data: timeseries,
+ y: 'value',
+ x: 'year'
+ }
+ }
+ });
+
+ const bars = container.querySelectorAll('g.bar-y > rect') as NodeListOf;
+ expect(bars.length).toBe(5);
+
+ const xAxisLabels = container.querySelectorAll(
+ 'g.axis-x .tick text'
+ ) as NodeListOf;
+ expect(xAxisLabels.length).toBe(6);
+ const labels = Array.from(xAxisLabels).map((d) => d.textContent);
+ expect(labels.sort()).toEqual(['2019', '2020', '2021', '2022', '2023', '2024']);
+ });
});
function getRectDims(rect: SVGRectElement) {
diff --git a/static/examples/axis/datawrapper-ticks.dark.png b/static/examples/axis/datawrapper-ticks.dark.png
new file mode 100644
index 00000000..739788e8
Binary files /dev/null and b/static/examples/axis/datawrapper-ticks.dark.png differ
diff --git a/static/examples/axis/datawrapper-ticks.png b/static/examples/axis/datawrapper-ticks.png
new file mode 100644
index 00000000..850c1630
Binary files /dev/null and b/static/examples/axis/datawrapper-ticks.png differ
diff --git a/static/examples/axis/tick-count.dark.png b/static/examples/axis/tick-count.dark.png
new file mode 100644
index 00000000..57dd89b0
Binary files /dev/null and b/static/examples/axis/tick-count.dark.png differ
diff --git a/static/examples/axis/tick-count.png b/static/examples/axis/tick-count.png
new file mode 100644
index 00000000..a2801e9e
Binary files /dev/null and b/static/examples/axis/tick-count.png differ
diff --git a/static/examples/axis/tick-interval.dark.png b/static/examples/axis/tick-interval.dark.png
new file mode 100644
index 00000000..c85ed1a5
Binary files /dev/null and b/static/examples/axis/tick-interval.dark.png differ
diff --git a/static/examples/axis/tick-interval.png b/static/examples/axis/tick-interval.png
new file mode 100644
index 00000000..a9a23c25
Binary files /dev/null and b/static/examples/axis/tick-interval.png differ
diff --git a/static/examples/axis/tick-spacing.dark.png b/static/examples/axis/tick-spacing.dark.png
new file mode 100644
index 00000000..e451e2de
Binary files /dev/null and b/static/examples/axis/tick-spacing.dark.png differ
diff --git a/static/examples/axis/tick-spacing.png b/static/examples/axis/tick-spacing.png
new file mode 100644
index 00000000..bea52550
Binary files /dev/null and b/static/examples/axis/tick-spacing.png differ
diff --git a/static/examples/dot/0-scatterplot.dark.png b/static/examples/dot/0-scatterplot.dark.png
new file mode 100644
index 00000000..3dfc2250
Binary files /dev/null and b/static/examples/dot/0-scatterplot.dark.png differ
diff --git a/static/examples/dot/0-scatterplot.png b/static/examples/dot/0-scatterplot.png
new file mode 100644
index 00000000..898d2190
Binary files /dev/null and b/static/examples/dot/0-scatterplot.png differ
diff --git a/static/examples/dot/1-colored-scatterplot.dark.png b/static/examples/dot/1-colored-scatterplot.dark.png
new file mode 100644
index 00000000..d5ac2e6d
Binary files /dev/null and b/static/examples/dot/1-colored-scatterplot.dark.png differ
diff --git a/static/examples/dot/1-colored-scatterplot.png b/static/examples/dot/1-colored-scatterplot.png
new file mode 100644
index 00000000..a0cee5f4
Binary files /dev/null and b/static/examples/dot/1-colored-scatterplot.png differ
diff --git a/static/examples/geo/us-choropleth-canvas.dark.png b/static/examples/geo/us-choropleth-canvas.dark.png
new file mode 100644
index 00000000..dceedfb8
Binary files /dev/null and b/static/examples/geo/us-choropleth-canvas.dark.png differ
diff --git a/static/examples/geo/us-choropleth-canvas.png b/static/examples/geo/us-choropleth-canvas.png
new file mode 100644
index 00000000..6c9934b1
Binary files /dev/null and b/static/examples/geo/us-choropleth-canvas.png differ
diff --git a/static/examples/geo/us-choropleth.dark.png b/static/examples/geo/us-choropleth.dark.png
new file mode 100644
index 00000000..0973d26e
Binary files /dev/null and b/static/examples/geo/us-choropleth.dark.png differ
diff --git a/static/examples/geo/us-choropleth.png b/static/examples/geo/us-choropleth.png
new file mode 100644
index 00000000..55891957
Binary files /dev/null and b/static/examples/geo/us-choropleth.png differ
diff --git a/static/examples/grid/clipped-gridlines.dark.png b/static/examples/grid/clipped-gridlines.dark.png
new file mode 100644
index 00000000..5ec16f3b
Binary files /dev/null and b/static/examples/grid/clipped-gridlines.dark.png differ
diff --git a/static/examples/grid/clipped-gridlines.png b/static/examples/grid/clipped-gridlines.png
new file mode 100644
index 00000000..21fc17b9
Binary files /dev/null and b/static/examples/grid/clipped-gridlines.png differ
diff --git a/static/examples/line/apple-stock.dark.png b/static/examples/line/apple-stock.dark.png
new file mode 100644
index 00000000..44ca5ce3
Binary files /dev/null and b/static/examples/line/apple-stock.dark.png differ
diff --git a/static/examples/line/apple-stock.png b/static/examples/line/apple-stock.png
new file mode 100644
index 00000000..c490a2ba
Binary files /dev/null and b/static/examples/line/apple-stock.png differ
diff --git a/static/examples/line/gradient-line.dark.png b/static/examples/line/gradient-line.dark.png
new file mode 100644
index 00000000..d013adc0
Binary files /dev/null and b/static/examples/line/gradient-line.dark.png differ
diff --git a/static/examples/line/gradient-line.png b/static/examples/line/gradient-line.png
new file mode 100644
index 00000000..0e8901ca
Binary files /dev/null and b/static/examples/line/gradient-line.png differ
diff --git a/static/examples/line/line-grouping.dark.png b/static/examples/line/line-grouping.dark.png
new file mode 100644
index 00000000..a66722f5
Binary files /dev/null and b/static/examples/line/line-grouping.dark.png differ
diff --git a/static/examples/line/line-grouping.png b/static/examples/line/line-grouping.png
new file mode 100644
index 00000000..5a2b8c1b
Binary files /dev/null and b/static/examples/line/line-grouping.png differ
diff --git a/static/examples/line/tour-de-france.dark.png b/static/examples/line/tour-de-france.dark.png
new file mode 100644
index 00000000..568293ff
Binary files /dev/null and b/static/examples/line/tour-de-france.dark.png differ
diff --git a/static/examples/line/tour-de-france.png b/static/examples/line/tour-de-france.png
new file mode 100644
index 00000000..8bdd40fb
Binary files /dev/null and b/static/examples/line/tour-de-france.png differ
{/if}
+