feat: raster mark by gka · Pull Request #520 · svelteplot/svelteplot

gka · 2026-03-10T22:30:07Z

resolves #88

Summary

Adds a new Raster mark that renders data as an SVG <image> element, mapping values through the color scale onto a pixel grid
Supports three modes: dense grid (flat array + width/height), scatter interpolation (x/y channel data spatially interpolated via none/nearest/barycentric/random-walk), and function sampling (fill as an (x, y) => value function)
Adds rasterInterpolate.ts helper with four interpolation strategies (none, nearest, Delaunay barycentric, random-walk / walk-on-spheres)
Fixes Line mark: when both z and stroke channels are set, lines are now segmented by changes in either channel (multi-colored lines), with sub-segments sharing endpoints to avoid gaps
Adds docs page at /marks/raster with live examples for all three modes, blur, and pixelSize
Adds four raster examples to the examples gallery

Test plan

pnpm test passes (729 tests including new line segmentation test)
/marks/raster doc page renders correctly with live examples
/examples/raster gallery shows all four examples
Dense grid (volcano), scatter interpolation (CA55), and function sampling (Mandelbrot) examples all render correctly
Line mark: z + stroke channels produce multi-colored segmented lines

🤖 Generated with Claude Code

When both z and stroke channels are specified, group lines by changes in either channel. Sub-segments share an endpoint with the next sub-segment so multi-colored lines render without gaps. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

netlify · 2026-03-10T22:30:12Z

✅ Deploy Preview for svelteplot ready!

Name	Link
🔨 Latest commit	`edf1db9`
🔍 Latest deploy log	https://app.netlify.com/projects/svelteplot/deploys/69b4368ecaf197000895974f
😎 Deploy Preview	https://deploy-preview-520--svelteplot.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions · 2026-03-10T22:32:36Z

📦 Preview package for this PR is published!

Version: 0.11.1-pr-520.0

Install it with:

npm install svelteplot@pr-520
# or install the specific version
npm install svelteplot@0.11.1-pr-520.0

github-actions · 2026-03-10T22:34:23Z

📦 Preview package for this PR is published!

Version: 0.11.1-pr-520.1

Install it with:

npm install svelteplot@pr-520
# or install the specific version
npm install svelteplot@0.11.1-pr-520.1

github-actions · 2026-03-10T22:34:59Z

📦 Preview package for this PR is published!

Version: 0.11.1-pr-520.2

Install it with:

npm install svelteplot@pr-520
# or install the specific version
npm install svelteplot@0.11.1-pr-520.2

github-actions · 2026-03-10T22:36:59Z

📦 Preview package for this PR is published!

Version: 0.11.1-pr-520.3

Install it with:

npm install svelteplot@pr-520
# or install the specific version
npm install svelteplot@0.11.1-pr-520.3

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6c0450c678

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-03-10T22:38:19Z

+            let Fraw: any[];
+            if (typeof fill === 'function') {
+                Fraw = (data as any[]).map(fill as (d: any) => any);
+            } else if (fill != null && typeof fill !== 'string') {


Handle string fill accessors in dense raster mode

The dense-grid fill extraction excludes string accessors (fill != null && typeof fill !== 'string'), so fill="value" skips accessor resolution and leaves Fraw as the original objects; later color mapping then receives objects instead of scalar values and renders incorrect/transparent pixels. This breaks the documented dense-grid object-data usage (and also misbehaves for constant string fills).

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-03-10T22:38:19Z

+                        const xData = xScale(bx1 + xi * kx);
+                        const yData = yScale(by1 + yi * ky);


Sample function over raster indices without extra scaling

In sampler mode, pixel centers are multiplied by kx/ky before being passed to scales whose domains are already [0,w] and [0,h]. When pixelSize differs from 1 (or explicit width/height changes canvas resolution), this evaluates fill(x,y) outside the requested [x1,x2] × [y1,y2] bounds and distorts sampled outputs.

Useful? React with 👍 / 👎.

github-actions · 2026-03-10T22:42:48Z

📦 Preview package for this PR is published!

Version: 0.11.1-pr-520.4

Install it with:

npm install svelteplot@pr-520
# or install the specific version
npm install svelteplot@0.11.1-pr-520.4

github-actions · 2026-03-10T22:47:27Z

📦 Preview package for this PR is published!

Version: 0.11.1-pr-520.5

Install it with:

npm install svelteplot@pr-520
# or install the specific version
npm install svelteplot@0.11.1-pr-520.5

… Raster Two bugs caused `effect_update_depth_exceeded` and NaN pixel coordinates when combining the Raster mark's function-sampling mode with `aspectRatio`: 1. Reactive oscillation: `height` (from aspectRatio) depended on `plotWidth` which depended on `autoMarginLeft` (AxisY label widths) which depended on y-tick count which depended on `plotHeight` → circular. Fixed by introducing `plotWidthForAspectRatio` that uses only user-specified margins (zero when set to 'auto'), breaking the feedback cycle. 2. NaN initialization: before any marks mount, x/y domains are empty so `heightFromAspect` computed `Math.abs(undefined - undefined) = NaN`. Since NaN is not nullish, this propagated through scale range computation giving every datum NaN pixel coordinates. Fixed by guarding `heightFromAspect` to return `DEFAULTS.height` when domains are degenerate or non-finite. Also adds a test case covering aspectRatio + sampler mode, and updates the sampled raster example to use aspectRatio={1}. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

github-actions · 2026-03-11T06:50:32Z

📦 Preview package for this PR is published!

Version: 0.11.1-pr-520.6

Install it with:

npm install svelteplot@pr-520
# or install the specific version
npm install svelteplot@0.11.1-pr-520.6

github-actions · 2026-03-11T06:55:10Z

📦 Preview package for this PR is published!

Version: 0.11.1-pr-520.7

Install it with:

npm install svelteplot@pr-520
# or install the specific version
npm install svelteplot@0.11.1-pr-520.7

github-actions · 2026-03-13T16:02:13Z

📦 Preview package for this PR is published!

Version: 0.11.1-pr-520.8

Install it with:

npm install svelteplot@pr-520
# or install the specific version
npm install svelteplot@0.11.1-pr-520.8

github-actions · 2026-03-13T16:10:58Z

📦 Preview package for this PR is published!

Version: 0.11.1-pr-520.9

Install it with:

npm install svelteplot@pr-520
# or install the specific version
npm install svelteplot@0.11.1-pr-520.9

gka and others added 5 commits March 10, 2026 19:37

gitignore

0038ea1

feat: raster mark

23e9f3a

docs: add examples

ab0538a

raster docs

45ed772

docs: add description to simple raster example

6c0450c

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

gka added this to the 1.0 milestone Mar 10, 2026

gka temporarily deployed to npm March 10, 2026 22:32 — with GitHub Actions Inactive

prettier

fc6b6d4

remove console.log

b2fc84c

gka temporarily deployed to npm March 10, 2026 22:34 — with GitHub Actions Inactive

..

5cb7dd0

gka temporarily deployed to npm March 10, 2026 22:36 — with GitHub Actions Inactive

chatgpt-codex-connector bot reviewed Mar 10, 2026

View reviewed changes

test: add unit tests for raster mark

39b3b84

gka temporarily deployed to npm March 10, 2026 22:42 — with GitHub Actions Inactive

fix svelte-check issues

24b551e

gka temporarily deployed to npm March 10, 2026 22:46 — with GitHub Actions Inactive

gka temporarily deployed to npm March 11, 2026 06:49 — with GitHub Actions Inactive

docs

1ee7144

gka temporarily deployed to npm March 11, 2026 06:54 — with GitHub Actions Inactive

gka added 10 commits March 12, 2026 00:15

fix raster mark implementation

326271a

add raster mark tests

3f10601

fix: only add <g> in Geo mark if more than 1 path

ad416fd

feat: support clipPath in Raster

944a3eb

ts: accept center and parallels for plot.projection type

a396904

add examples

7205e5c

formatting

5e0ab75

chore: formatting

78e05e6

fix svelte-check issues

c38047d

fix more issues

fc641e2

gka temporarily deployed to npm March 13, 2026 16:01 — with GitHub Actions Inactive

gka added 2 commits March 13, 2026 17:08

fix sphere and graticule tests

10b3d0a

fix geo tests, too

edf1db9

gka temporarily deployed to npm March 13, 2026 16:10 — with GitHub Actions Inactive

gka merged commit 7da5a35 into main Mar 13, 2026
8 checks passed

		const xData = xScale(bx1 + xi * kx);
		const yData = yScale(by1 + yi * ky);

Uh oh!

Conversation

gka commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

netlify bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for svelteplot ready!

Uh oh!

github-actions bot commented Mar 10, 2026

Uh oh!

github-actions bot commented Mar 10, 2026

Uh oh!

github-actions bot commented Mar 10, 2026

Uh oh!

github-actions bot commented Mar 10, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chatgpt-codex-connector bot Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 10, 2026

Uh oh!

github-actions bot commented Mar 10, 2026

Uh oh!

github-actions bot commented Mar 11, 2026

Uh oh!

github-actions bot commented Mar 11, 2026

Uh oh!

github-actions bot commented Mar 13, 2026

Uh oh!

github-actions bot commented Mar 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

gka commented Mar 10, 2026 •

edited

Loading

netlify bot commented Mar 10, 2026 •

edited

Loading