diff --git a/package.json b/package.json index 18312dbd..950065e5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelteplot", - "version": "0.3.3", + "version": "0.3.2", "license": "ISC", "author": { "name": "Gregor Aisch", @@ -68,10 +68,14 @@ "@types/d3-geo": "^3.1.0", "@types/d3-interpolate": "^3.0.4", "@types/d3-path": "^3.1.1", + "@types/d3-quadtree": "^3.0.6", "@types/d3-random": "^3.0.3", "@types/d3-scale": "^4.0.9", "@types/d3-scale-chromatic": "^3.1.0", "@types/d3-shape": "^3.1.7", + "@types/geojson": "^7946.0.16", + "@types/topojson": "^3.2.6", + "@types/topojson-client": "^3.1.5", "@typescript-eslint/eslint-plugin": "^8.34.0", "@typescript-eslint/parser": "^8.34.0", "csstype": "^3.1.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c123328d..5f2b991e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -117,6 +117,9 @@ importers: '@types/d3-path': specifier: ^3.1.1 version: 3.1.1 + '@types/d3-quadtree': + specifier: ^3.0.6 + version: 3.0.6 '@types/d3-random': specifier: ^3.0.3 version: 3.0.3 @@ -129,6 +132,15 @@ importers: '@types/d3-shape': specifier: ^3.1.7 version: 3.1.7 + '@types/geojson': + specifier: ^7946.0.16 + version: 7946.0.16 + '@types/topojson': + specifier: ^3.2.6 + version: 3.2.6 + '@types/topojson-client': + specifier: ^3.1.5 + version: 3.1.5 '@typescript-eslint/eslint-plugin': specifier: ^8.34.0 version: 8.34.0(@typescript-eslint/parser@8.34.0(eslint@9.28.0(jiti@1.21.0))(typescript@5.8.3))(eslint@9.28.0(jiti@1.21.0))(typescript@5.8.3) @@ -1801,6 +1813,9 @@ packages: '@types/d3-path@3.1.1': resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==} + '@types/d3-quadtree@3.0.6': + resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==} + '@types/d3-random@3.0.3': resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==} @@ -1831,8 +1846,8 @@ packages: '@types/estree@1.0.7': resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==} - '@types/geojson@7946.0.14': - resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==} + '@types/geojson@7946.0.16': + resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==} '@types/hast@3.0.4': resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} @@ -1858,6 +1873,21 @@ packages: '@types/semver@7.5.8': resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==} + '@types/topojson-client@3.1.5': + resolution: {integrity: sha512-C79rySTyPxnQNNguTZNI1Ct4D7IXgvyAs3p9HPecnl6mNrJ5+UhvGNYcZfpROYV2lMHI48kJPxwR+F9C6c7nmw==} + + '@types/topojson-server@3.0.4': + resolution: {integrity: sha512-5+ieK8ePfP+K2VH6Vgs1VCt+fO1U8XZHj0UsF+NktaF0DavAo1q3IvCBXgokk/xmtvoPltSUs6vxuR/zMdOE1g==} + + '@types/topojson-simplify@3.0.3': + resolution: {integrity: sha512-sBO5UZ0O2dB0bNwo0vut2yLHhj3neUGi9uL7/ROdm8Gs6dtt4jcB9OGDKr+M2isZwQM2RuzVmifnMZpxj4IGNw==} + + '@types/topojson-specification@1.0.5': + resolution: {integrity: sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==} + + '@types/topojson@3.2.6': + resolution: {integrity: sha512-ppfdlxjxofWJ66XdLgIlER/85RvpGyfOf8jrWf+3kVIjEatFxEZYD/Ea83jO672Xu1HRzd/ghwlbcZIUNHTskw==} + '@types/trusted-types@2.0.7': resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} @@ -6690,7 +6720,7 @@ snapshots: '@types/d3-geo@3.1.0': dependencies: - '@types/geojson': 7946.0.14 + '@types/geojson': 7946.0.16 '@types/d3-interpolate@3.0.4': dependencies: @@ -6698,6 +6728,8 @@ snapshots: '@types/d3-path@3.1.1': {} + '@types/d3-quadtree@3.0.6': {} + '@types/d3-random@3.0.3': {} '@types/d3-scale-chromatic@3.1.0': {} @@ -6727,7 +6759,7 @@ snapshots: '@types/estree@1.0.7': {} - '@types/geojson@7946.0.14': {} + '@types/geojson@7946.0.16': {} '@types/hast@3.0.4': dependencies: @@ -6753,6 +6785,33 @@ snapshots: '@types/semver@7.5.8': {} + '@types/topojson-client@3.1.5': + dependencies: + '@types/geojson': 7946.0.16 + '@types/topojson-specification': 1.0.5 + + '@types/topojson-server@3.0.4': + dependencies: + '@types/geojson': 7946.0.16 + '@types/topojson-specification': 1.0.5 + + '@types/topojson-simplify@3.0.3': + dependencies: + '@types/geojson': 7946.0.16 + '@types/topojson-specification': 1.0.5 + + '@types/topojson-specification@1.0.5': + dependencies: + '@types/geojson': 7946.0.16 + + '@types/topojson@3.2.6': + dependencies: + '@types/geojson': 7946.0.16 + '@types/topojson-client': 3.1.5 + '@types/topojson-server': 3.0.4 + '@types/topojson-simplify': 3.0.3 + '@types/topojson-specification': 1.0.5 + '@types/trusted-types@2.0.7': {} '@types/unist@2.0.10': {} diff --git a/screenshot-examples.js b/screenshot-examples.js index 593ec016..dbaad310 100644 --- a/screenshot-examples.js +++ b/screenshot-examples.js @@ -12,6 +12,9 @@ const OUTPUT_DIR = path.join(__dirname, 'static', 'examples'); const SCREENSHOT_WIDTH = 600; const DEVICE_PIXEL_RATIO = 2; +// Only take missing screenshots if ENV variable is set +const ONLY_MISSING = process.env.ONLY_MISSING == 1; + // Start the development server and return server instance and local URL const startServer = () => { console.log('Starting development server...'); @@ -70,6 +73,26 @@ const getSvelteFiles = async (dir) => { return files.flat(); }; +const getExistingScreenshots = async (dir) => { + const entries = await fs.readdir(dir, { withFileTypes: true }); + + const files = await Promise.all( + entries.map(async (entry) => { + const fullPath = path.join(dir, entry.name); + + if (entry.isDirectory()) { + return getExistingScreenshots(fullPath); + } else if (entry.isFile() && entry.name.endsWith('.png')) { + return [fullPath]; + } + + return []; + }) + ); + + return files.flat(); +}; + // Convert file path to URL path const filePathToUrlPath = (filePath) => { const relativePath = path.relative(EXAMPLES_DIR, filePath); @@ -161,9 +184,35 @@ const screenshotExamples = async () => { }); // Get all example Svelte files - const svelteFiles = await getSvelteFiles(EXAMPLES_DIR); + let svelteFiles = await getSvelteFiles(EXAMPLES_DIR); console.log(`Found ${svelteFiles.length} example files to screenshot`); + if (ONLY_MISSING) { + // Filter to only include files that don't have screenshots () + const existingScreenshots = (await getExistingScreenshots(OUTPUT_DIR)).map((file) => + path.relative(OUTPUT_DIR, file) + ); + + console.log(`Found ${existingScreenshots.length} existing screenshots`); + + // Filter out files that already have screenshots + svelteFiles = svelteFiles.filter((filePath) => { + return ( + !existingScreenshots.find((screenshot) => + filePath.endsWith(screenshot.replace('.png', '.svelte')) + ) || + !existingScreenshots.find((screenshot) => + filePath.endsWith(screenshot.replace('.dark.png', '.svelte')) + ) + ); + }); + + console.log( + `Filtered down to ${svelteFiles.length} files needing screenshots`, + svelteFiles + ); + } + // Process each file for (const filePath of svelteFiles) { const urlPath = filePathToUrlPath(filePath); diff --git a/src/lib/Mark.svelte b/src/lib/Mark.svelte index f5bcb7d4..11a19870 100644 --- a/src/lib/Mark.svelte +++ b/src/lib/Mark.svelte @@ -1,6 +1,24 @@ - + } - - - - - - - + + - - @@ -46,7 +51,7 @@ y1: '__x', x1: '__lo', x2: '__hi', - fillOpacity: 0.2, - ...pick(args, ['data', 'fill', 'fillOpacity', 'opacity']) + ...pick(args, ['data', 'fill', 'fillOpacity', 'opacity']), + fillOpacity: 0.2 }} /> diff --git a/src/lib/marks/BollingerY.svelte b/src/lib/marks/BollingerY.svelte index c5a5ca49..627d0a40 100644 --- a/src/lib/marks/BollingerY.svelte +++ b/src/lib/marks/BollingerY.svelte @@ -2,30 +2,35 @@ @component line representing a moving average and an area representing volatility as a band --> - - - @@ -35,7 +40,7 @@ x1: '__x', y1: '__lo', y2: '__hi', - fillOpacity: 0.2, - ...pick(args, ['data', 'fill', 'fillOpacity', 'opacity']) + ...pick(args, ['data', 'fill', 'fillOpacity', 'opacity']), + fillOpacity: 0.2 }} /> diff --git a/src/lib/marks/BoxX.svelte b/src/lib/marks/BoxX.svelte index 15462f8f..d31cca63 100644 --- a/src/lib/marks/BoxX.svelte +++ b/src/lib/marks/BoxX.svelte @@ -1,17 +1,15 @@ - - - - - - + - + - - - export type CellXMarkProps = Omit; - - + diff --git a/src/lib/marks/CellY.svelte b/src/lib/marks/CellY.svelte index d3c65a1e..df134732 100644 --- a/src/lib/marks/CellY.svelte +++ b/src/lib/marks/CellY.svelte @@ -1,18 +1,22 @@ - - + diff --git a/src/lib/marks/ColorLegend.svelte b/src/lib/marks/ColorLegend.svelte index 47c3c257..2d8d8e62 100644 --- a/src/lib/marks/ColorLegend.svelte +++ b/src/lib/marks/ColorLegend.svelte @@ -1,17 +1,14 @@ - - + {#each data as datum, i (i)} - {@const x_ = resolveChannel('x', datum, { x, y })} - {@const y_ = resolveChannel('y', datum, { x, y })} + {@const x_ = resolveChannel('x', datum, { x, y })} + {@const y_ = resolveChannel('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..8a12ea81 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 05bf7d01..e2d2a392 100644 --- a/src/lib/marks/Frame.svelte +++ b/src/lib/marks/Frame.svelte @@ -2,39 +2,32 @@ @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 0a8a7b93..f58c13ec 100644 --- a/src/lib/marks/GridX.svelte +++ b/src/lib/marks/GridX.svelte @@ -1,17 +1,14 @@ - - - - - - - - - diff --git a/src/lib/marks/LineY.svelte b/src/lib/marks/LineY.svelte index 14ba10da..c96ad934 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 3897778d..b758f528 100644 --- a/src/lib/marks/Link.svelte +++ b/src/lib/marks/Link.svelte @@ -1,24 +1,40 @@ - - + onupdate?: (data: Datum[]) => void; + } - - - - - - - - - - - - - + } - - - - - - export type VectorMarkProps = BaseMarkProps & { - data: DataRecord[]; - x: ChannelAccessor; - y: ChannelAccessor; + + } + import type { + PlotContext, + DataRecord, + BaseMarkProps, + ChannelAccessor, + FacetContext, + PlotDefaults + } from '../types/index.js'; - diff --git a/src/routes/examples/[group]/[page]/+page.svelte b/src/routes/examples/[group]/[page]/+page.svelte index 98d3e308..dff09e66 100644 --- a/src/routes/examples/[group]/[page]/+page.svelte +++ b/src/routes/examples/[group]/[page]/+page.svelte @@ -65,13 +65,17 @@
' - : '' + ) + : pagesSrc[plotKey].lastIndexOf( + '' + ) + 9 ) - )} /> + .trim()} />
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/metro.svelte b/src/routes/examples/arrow/metro.svelte index 8f9ac0a0..7a1a8ea7 100644 --- a/src/routes/examples/arrow/metro.svelte +++ b/src/routes/examples/arrow/metro.svelte @@ -3,11 +3,14 @@ - + d} /> diff --git a/src/routes/examples/cell/_index.svelte b/src/routes/examples/cell/_index.svelte new file mode 100644 index 00000000..af156639 --- /dev/null +++ b/src/routes/examples/cell/_index.svelte @@ -0,0 +1,10 @@ + + +

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} /> + +
diff --git a/src/routes/examples/custom/_index.svelte b/src/routes/examples/custom/_index.svelte new file mode 100644 index 00000000..932a5784 --- /dev/null +++ b/src/routes/examples/custom/_index.svelte @@ -0,0 +1,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 })} + {datum.species} + {/snippet} + + diff --git a/src/routes/examples/dot/0-scatterplot.svelte b/src/routes/examples/dot/0-scatterplot.svelte index 7e90469b..cd4ef19b 100644 --- a/src/routes/examples/dot/0-scatterplot.svelte +++ b/src/routes/examples/dot/0-scatterplot.svelte @@ -2,10 +2,14 @@ export let title = 'Scatterplot'; - diff --git a/src/routes/examples/dot/1-colored-scatterplot.svelte b/src/routes/examples/dot/1-colored-scatterplot.svelte index e2e37dfc..215adddf 100644 --- a/src/routes/examples/dot/1-colored-scatterplot.svelte +++ b/src/routes/examples/dot/1-colored-scatterplot.svelte @@ -2,10 +2,13 @@ export let title = 'Color scatterplot'; - diff --git a/src/routes/examples/dot/2-symbol-channel.svelte b/src/routes/examples/dot/2-symbol-channel.svelte index cbffdf88..87ba2157 100644 --- a/src/routes/examples/dot/2-symbol-channel.svelte +++ b/src/routes/examples/dot/2-symbol-channel.svelte @@ -2,10 +2,13 @@ export let title = 'Symbol channel'; - - - - diff --git a/src/routes/examples/line/geo-line.svelte b/src/routes/examples/line/geo-line.svelte index 9be323ed..24b98876 100644 --- a/src/routes/examples/line/geo-line.svelte +++ b/src/routes/examples/line/geo-line.svelte @@ -10,7 +10,10 @@ import { Plot, Geo, Dot, Line } from 'svelteplot'; import { page } from '$app/state'; import * as topojson from 'topojson-client'; - const { world, beagle } = $derived(page.data.data); + import type { ExamplesData } from '../types'; + const { world, beagle } = $derived( + page.data.data + ) as ExamplesData; const land = $derived( topojson.feature(world, world.objects.land) ); diff --git a/src/routes/examples/line/gradient-line.svelte b/src/routes/examples/line/gradient-line.svelte index 2958a9bb..75d9e66f 100644 --- a/src/routes/examples/line/gradient-line.svelte +++ b/src/routes/examples/line/gradient-line.svelte @@ -9,7 +9,8 @@ LinearGradientX } from 'svelteplot'; import { page } from '$app/state'; - let { aapl } = $derived(page.data.data); + import type { ExamplesData } from '../types'; + let { aapl } = $derived(page.data.data) as ExamplesData; 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/frame-anchor.svelte b/src/routes/examples/text/frame-anchor.svelte index cd7a0913..8c4430d0 100644 --- a/src/routes/examples/text/frame-anchor.svelte +++ b/src/routes/examples/text/frame-anchor.svelte @@ -6,7 +6,7 @@ import { setContext } from 'svelte'; import { Plot, Text } from 'svelteplot'; - import type { PlotDefaults } from 'svelteplot/types'; + import type { PlotDefaults } from 'svelteplot'; setContext>( 'svelteplot/defaults', { 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/marks/cell/+page.md b/src/routes/marks/cell/+page.md index 5d16be49..269cf027 100644 --- a/src/routes/marks/cell/+page.md +++ b/src/routes/marks/cell/+page.md @@ -95,6 +95,26 @@ Seattle temperatures ``` +```svelte + + d.date.getUTCFullYear() === 2015} + x={(d) => d.date.getUTCDate()} + y={(d) => d.date.getUTCMonth()} + fill="temp_max" + inset={0.5} /> + +``` + +[fork](https://svelte.dev/playground/6e1188793b71467e94308d57503c15b4?version=5.33.14) + ```svelte live diff --git a/src/tests/axisX.test.ts b/src/tests/axisX.test.ts index ec7a2d36..fb5ff28f 100644 --- a/src/tests/axisX.test.ts +++ b/src/tests/axisX.test.ts @@ -122,7 +122,7 @@ describe('AxisX mark', () => { 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']); + expect(tickValues).toStrictEqual(['0', '30', '60', '90']); }); it('tick interval via axis options', () => { @@ -135,7 +135,7 @@ describe('AxisX mark', () => { 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']); + expect(tickValues).toStrictEqual(['0', '30', '60', '90']); }); it('tick interval via axis.ticks', () => { diff --git a/src/tests/axisY.test.ts b/src/tests/axisY.test.ts index f2b2e8fe..3e7e0bd0 100644 --- a/src/tests/axisY.test.ts +++ b/src/tests/axisY.test.ts @@ -121,7 +121,7 @@ describe('AxisY mark', () => { 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']); + expect(tickValues).toStrictEqual(['0', '30', '60', '90']); }); it('tick interval via axis options', () => { @@ -134,6 +134,6 @@ describe('AxisY mark', () => { 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']); + expect(tickValues).toStrictEqual(['0', '30', '60', '90']); }); }); diff --git a/static/examples/area/area-x.dark.png b/static/examples/area/area-x.dark.png new file mode 100644 index 00000000..6e7a7bd1 Binary files /dev/null and b/static/examples/area/area-x.dark.png differ diff --git a/static/examples/area/area-x.png b/static/examples/area/area-x.png new file mode 100644 index 00000000..88f10625 Binary files /dev/null and b/static/examples/area/area-x.png differ diff --git a/static/examples/area/area-y.dark.png b/static/examples/area/area-y.dark.png new file mode 100644 index 00000000..c908f9b7 Binary files /dev/null and b/static/examples/area/area-y.dark.png differ diff --git a/static/examples/area/area-y.png b/static/examples/area/area-y.png new file mode 100644 index 00000000..cad14297 Binary files /dev/null and b/static/examples/area/area-y.png differ diff --git a/static/examples/area/area.dark.png b/static/examples/area/area.dark.png new file mode 100644 index 00000000..c1c6c880 Binary files /dev/null and b/static/examples/area/area.dark.png differ diff --git a/static/examples/area/area.png b/static/examples/area/area.png new file mode 100644 index 00000000..ed996fcc Binary files /dev/null and b/static/examples/area/area.png differ diff --git a/static/examples/area/streamgraph.dark.png b/static/examples/area/streamgraph.dark.png new file mode 100644 index 00000000..f6923513 Binary files /dev/null and b/static/examples/area/streamgraph.dark.png differ diff --git a/static/examples/area/streamgraph.png b/static/examples/area/streamgraph.png new file mode 100644 index 00000000..5a92cbcc Binary files /dev/null and b/static/examples/area/streamgraph.png differ diff --git a/static/examples/cell/simpsons.dark.png b/static/examples/cell/simpsons.dark.png new file mode 100644 index 00000000..2347292c Binary files /dev/null and b/static/examples/cell/simpsons.dark.png differ diff --git a/static/examples/cell/simpsons.png b/static/examples/cell/simpsons.png new file mode 100644 index 00000000..3c2e1e82 Binary files /dev/null and b/static/examples/cell/simpsons.png differ diff --git a/static/examples/cell/temperatures.dark.png b/static/examples/cell/temperatures.dark.png new file mode 100644 index 00000000..e76116f2 Binary files /dev/null and b/static/examples/cell/temperatures.dark.png differ diff --git a/static/examples/cell/temperatures.png b/static/examples/cell/temperatures.png new file mode 100644 index 00000000..1ba2d759 Binary files /dev/null and b/static/examples/cell/temperatures.png differ diff --git a/static/examples/custom/custom-svg.dark.png b/static/examples/custom/custom-svg.dark.png new file mode 100644 index 00000000..532ce75f Binary files /dev/null and b/static/examples/custom/custom-svg.dark.png differ diff --git a/static/examples/custom/custom-svg.png b/static/examples/custom/custom-svg.png new file mode 100644 index 00000000..3fa60b3a Binary files /dev/null and b/static/examples/custom/custom-svg.png differ diff --git a/static/examples/geo/inset-aspect.dark.png b/static/examples/geo/inset-aspect.dark.png index d24cd5fe..6311faee 100644 Binary files a/static/examples/geo/inset-aspect.dark.png and b/static/examples/geo/inset-aspect.dark.png differ diff --git a/static/examples/geo/inset-aspect.png b/static/examples/geo/inset-aspect.png index f0ddb5ca..b7e2ca82 100644 Binary files a/static/examples/geo/inset-aspect.png and b/static/examples/geo/inset-aspect.png differ diff --git a/static/examples/geo/us-choropleth-canvas.png b/static/examples/geo/us-choropleth-canvas.png index 6e613106..d94028c7 100644 Binary files a/static/examples/geo/us-choropleth-canvas.png and b/static/examples/geo/us-choropleth-canvas.png differ diff --git a/static/examples/link/metros.dark.png b/static/examples/link/metros.dark.png new file mode 100644 index 00000000..21f16612 Binary files /dev/null and b/static/examples/link/metros.dark.png differ diff --git a/static/examples/link/metros.png b/static/examples/link/metros.png new file mode 100644 index 00000000..e3ca48d6 Binary files /dev/null and b/static/examples/link/metros.png differ diff --git a/static/examples/link/spherical-link.dark.png b/static/examples/link/spherical-link.dark.png new file mode 100644 index 00000000..26dc3cb2 Binary files /dev/null and b/static/examples/link/spherical-link.dark.png differ diff --git a/static/examples/link/spherical-link.png b/static/examples/link/spherical-link.png new file mode 100644 index 00000000..9a936633 Binary files /dev/null and b/static/examples/link/spherical-link.png differ diff --git a/static/examples/rect/simple-rects.dark.png b/static/examples/rect/simple-rects.dark.png new file mode 100644 index 00000000..7be66b87 Binary files /dev/null and b/static/examples/rect/simple-rects.dark.png differ diff --git a/static/examples/rect/simple-rects.png b/static/examples/rect/simple-rects.png new file mode 100644 index 00000000..3e5cd7a2 Binary files /dev/null and b/static/examples/rect/simple-rects.png differ diff --git a/static/examples/rect/stacked-rectx.dark.png b/static/examples/rect/stacked-rectx.dark.png new file mode 100644 index 00000000..e1755eea Binary files /dev/null and b/static/examples/rect/stacked-rectx.dark.png differ diff --git a/static/examples/rect/stacked-rectx.png b/static/examples/rect/stacked-rectx.png new file mode 100644 index 00000000..8fc989e2 Binary files /dev/null and b/static/examples/rect/stacked-rectx.png differ diff --git a/static/examples/rect/stacked-recty.dark.png b/static/examples/rect/stacked-recty.dark.png new file mode 100644 index 00000000..502035b2 Binary files /dev/null and b/static/examples/rect/stacked-recty.dark.png differ diff --git a/static/examples/rect/stacked-recty.png b/static/examples/rect/stacked-recty.png new file mode 100644 index 00000000..ae6c2579 Binary files /dev/null and b/static/examples/rect/stacked-recty.png differ diff --git a/static/examples/regression/faceted.dark.png b/static/examples/regression/faceted.dark.png index 19ba3a54..85286163 100644 Binary files a/static/examples/regression/faceted.dark.png and b/static/examples/regression/faceted.dark.png differ diff --git a/static/examples/regression/log.dark.png b/static/examples/regression/log.dark.png index 34bf0e9f..6ecea135 100644 Binary files a/static/examples/regression/log.dark.png and b/static/examples/regression/log.dark.png differ diff --git a/static/examples/rule/data-rules.dark.png b/static/examples/rule/data-rules.dark.png new file mode 100644 index 00000000..2be84e05 Binary files /dev/null and b/static/examples/rule/data-rules.dark.png differ diff --git a/static/examples/rule/data-rules.png b/static/examples/rule/data-rules.png new file mode 100644 index 00000000..59332091 Binary files /dev/null and b/static/examples/rule/data-rules.png differ diff --git a/static/examples/rule/min-max.dark.png b/static/examples/rule/min-max.dark.png new file mode 100644 index 00000000..d4dde1ed Binary files /dev/null and b/static/examples/rule/min-max.dark.png differ diff --git a/static/examples/rule/min-max.png b/static/examples/rule/min-max.png new file mode 100644 index 00000000..00b23562 Binary files /dev/null and b/static/examples/rule/min-max.png differ diff --git a/static/examples/rule/y-baseline.dark.png b/static/examples/rule/y-baseline.dark.png new file mode 100644 index 00000000..81cf7d5e Binary files /dev/null and b/static/examples/rule/y-baseline.dark.png differ diff --git a/static/examples/rule/y-baseline.png b/static/examples/rule/y-baseline.png new file mode 100644 index 00000000..9c6830d7 Binary files /dev/null and b/static/examples/rule/y-baseline.png differ diff --git a/static/examples/vector/spike-map.dark.png b/static/examples/vector/spike-map.dark.png new file mode 100644 index 00000000..2428f70e Binary files /dev/null and b/static/examples/vector/spike-map.dark.png differ diff --git a/static/examples/vector/spike-map.png b/static/examples/vector/spike-map.png new file mode 100644 index 00000000..5e5b6722 Binary files /dev/null and b/static/examples/vector/spike-map.png differ diff --git a/static/examples/vector/wind.dark.png b/static/examples/vector/wind.dark.png new file mode 100644 index 00000000..6b2dcc9d Binary files /dev/null and b/static/examples/vector/wind.dark.png differ diff --git a/static/examples/vector/wind.png b/static/examples/vector/wind.png new file mode 100644 index 00000000..24fbe1ed Binary files /dev/null and b/static/examples/vector/wind.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