(
};
}
+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
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
{/if}
+