Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Don’t round the corners #72

Open
mbostock opened this issue Apr 20, 2023 · 16 comments · May be fixed by #79
Open

Don’t round the corners #72

mbostock opened this issue Apr 20, 2023 · 16 comments · May be fixed by #79

Comments

@mbostock
Copy link
Member

There are some rounded corner artifacts on the edge of the grid:

Screenshot 2023-04-19 at 5 05 25 PM

It’s much more visible with a coarser grid:

Screenshot 2023-04-19 at 5 06 06 PM

I think it’s because we assume that outside the grid, the value is effectively -Infinity (or NaN). It would be nicer if we simply repeated the edge value infinitely (like WebGL CLAMP_TO_EDGE) so that we got square corners.

/cc @Fil
@mbostock mbostock changed the title Don’t round off the corners Don’t round the corners Apr 20, 2023
@Fil
Copy link
Member

Fil commented Apr 30, 2023

Some progress in https://observablehq.com/@d3/contours-fix-edges-72, but there are still a few unpleasant bumps as in the top-left and bottom-right of the grid0 model.
untitled (21)

@MattiasJa
Copy link

Some update on this topic?

@Fil
Copy link
Member

Fil commented Apr 9, 2024

I've revised the notebook above, by fixing only the corners (and not the edges anymore) I think it's much better?

@MattiasJa
Copy link

Yes, a merge with a fix for the corners would be very welcome!
Though we have very small datasets and the bumps that appear at edges are a bit unexpected/annoying for our data scientist, being used to some older plotly implementation.
Right now, in this plain d3 version, we "hide this" by zooming in a bit so the edges (and corners) does not show :) To remove this hack a fix for the edges would be much appreciated. Could it be a configurable option?
image

@Fil
Copy link
Member

Fil commented Apr 9, 2024

please share some data underlying the screenshots, otherwise I don't know what I'm seeing

@MattiasJa
Copy link

MattiasJa commented Apr 9, 2024 •
edited
Loading 

       const data = {
            z: [
                [
                    3.931884, 3.949764, 3.967644, 3.985524, 4.003405, 4.021285, 4.039165, 4.057045, 4.074925, 4.092805,
                    4.110685, 4.128565, 4.146446, 4.164326, 4.182206, 4.200086,
                ],
                [
                    3.890766, 3.910306, 3.929845, 3.949385, 3.968925, 3.988464, 4.008004, 4.027544, 4.047084, 4.066623,
                    4.086163, 4.105703, 4.125243, 4.144782, 4.164322, 4.183862,
                ],
                [
                    3.849648, 3.870847, 3.892046, 3.913245, 3.934445, 3.955644, 3.976844, 3.998043, 4.019242, 4.040442,
                    4.061641, 4.08284, 4.10404, 4.125239, 4.146438, 4.167637,
                ],
                [
                    3.808529, 3.831388, 3.854247, 3.877106, 3.899965, 3.922824, 3.945683, 3.968542, 3.991401, 4.014259,
                    4.037118, 4.059978, 4.082836, 4.105695, 4.128554, 4.151413,
                ],
                [
                    3.767411, 3.791929, 3.816448, 3.840966, 3.865485, 3.890004, 3.914522, 3.939041, 3.963559, 3.988078,
                    4.012596, 4.037115, 4.061633, 4.086152, 4.11067, 4.135189,
                ],
                [
                    3.726293, 3.752471, 3.778649, 3.804827, 3.831005, 3.857183, 3.883361, 3.909539, 3.935718, 3.961896,
                    3.988074, 4.014252, 4.04043, 4.066608, 4.092786, 4.118965,
                ],
                [
                    3.685174, 3.713012, 3.74085, 3.768687, 3.796525, 3.824363, 3.852201, 3.880038, 3.907876, 3.935714,
                    3.963552, 3.991389, 4.019227, 4.047065, 4.074903, 4.10274,
                ],
                [
                    3.644056, 3.673553, 3.703051, 3.732548, 3.762045, 3.791543, 3.82104, 3.850537, 3.880035, 3.909532,
                    3.939029, 3.968527, 3.998024, 4.027521, 4.057019, 4.086516,
                ],
                [
                    3.602938, 3.634095, 3.665252, 3.696409, 3.727566, 3.758723, 3.789879, 3.821036, 3.852193, 3.88335,
                    3.914507, 3.945664, 3.976821, 4.007978, 4.039135, 4.070292,
                ],
                [
                    3.56182, 3.594636, 3.627453, 3.660269, 3.693086, 3.725902, 3.758719, 3.791535, 3.824352, 3.857168,
                    3.889985, 3.922801, 3.955618, 3.988434, 4.021251, 4.054067,
                ],
                [
                    3.520701, 3.555177, 3.589653, 3.62413, 3.658606, 3.693082, 3.727558, 3.762034, 3.79651, 3.830986,
                    3.865462, 3.899939, 3.934415, 3.968891, 4.003367, 4.037843,
                ],
                [
                    3.479583, 3.515719, 3.551854, 3.58799, 3.624126, 3.660262, 3.696397, 3.732533, 3.768669, 3.804804,
                    3.84094, 3.877076, 3.913212, 3.949347, 3.985483, 4.021619,
                ],
                [
                    3.438465, 3.47626, 3.514055, 3.551851, 3.589646, 3.627441, 3.665237, 3.703032, 3.740827, 3.778623,
                    3.816418, 3.854213, 3.892009, 3.929804, 3.967599, 4.005394,
                ],
                [
                    3.397346, 3.436801, 3.476256, 3.515711, 3.555166, 3.594621, 3.634076, 3.673531, 3.712986, 3.752441,
                    3.791896, 3.83135, 3.870805, 3.91026, 3.949715, 3.98917,
                ],
                [
                    3.356228, 3.397343, 3.438457, 3.479572, 3.520686, 3.561801, 3.602915, 3.64403, 3.685144, 3.726259,
                    3.767373, 3.808488, 3.849602, 3.890717, 3.931831, 3.972946,
                ],
                [
                    3.31511, 3.357884, 3.400658, 3.443432, 3.486206, 3.52898, 3.571754, 3.614529, 3.657303, 3.700077,
                    3.742851, 3.785625, 3.828399, 3.871173, 3.913947, 3.956722,
                ],
            ],
            x: [60, 68, 76, 84, 92, 100, 108, 116, 124, 132, 140, 148, 156, 164, 172, 180],
            y: [
                15, 14.33333, 13.66667, 13, 12.33333, 11.66667, 11, 10.33333, 9.666667, 9, 8.333333, 7.666667, 7,
                6.333333, 5.666667, 5,
            ],
        };

z is flatmapped (like data.z.reverse()).flatMap((a) => a.flatMap((b) => b)) and passed to d3.contours func created as :
contours().size([data.x.length, data.y.length]).thresholds(9);

But the result is the same as what can been seen in your notebook by changing t :

image

@Fil
Copy link
Member

Fil commented Apr 9, 2024 •
edited
Loading

Thanks; added your data in the notebook as "grid2", multiply it by 5 to make it more similar to the others.

I don't know exactly what plotly does, but it seems to me, looking at this basic example, that their contours are clipped at the location of the data points (whereas the d3 contours expand outward by 0.5 pixel). If you clip d3’s contours at the data points, the edge artifacts are in effect hidden and (I think) this would result in the same image.

If the green lines are an indication of what you'd want the system to do, I agree that it is what looks best. I'm still not there, but I'm pretty sure there is a solution to be found.

@MattiasJa
Copy link

MattiasJa commented Apr 9, 2024 •
edited
Loading

Ill look into clipping then. Might be better than zoom :)
Yes the green lines are what we expect from the contour i think. It might not even have to be a perfect curved end. A straight line interpolation to the edge could be enough!?
Thanks for support. Looking forward to new versions with some fixes.

*) Update, inset(3%) clipping path around the polygon renderer seems to remove the artifacts in most of our cases with dataset size 16x16 (0.5 / 16 = 3%)

@DanielCordell
Copy link

DanielCordell commented Aug 8, 2024 •
edited
Loading

Is there any update on this? I'm seeing the same issue as well.

@Fil
Copy link
Member

Fil commented Aug 9, 2024

I've made some progress but haven't nailed it yet, sorry.

@DanielCordell
Copy link

I've made some progress but haven't nailed it yet, sorry.

That's cool, thanks for the update! Can you think of anything I can do to "resolve" this semi-automatically? I'm creating a wrapper around the d3 contour for internal use so I can add some "magical" code so it just "works". Currently am masking the edges but it's a bit ugly.

@Fil
Copy link
Member

Fil commented Aug 9, 2024

Sure, see the referenced notebook.

@DanielCordell
Copy link

DanielCordell commented Aug 12, 2024 •
edited
Loading

Ah my bad, thanks!

@MattiasJa
Copy link

Fyi, our stakeholders did not like the workaround by clipping the distorted edges. As a result we had to swap lib to https://github.com/RaumZeit/MarchingSquares.js as a temporary solution, until issue is fixed in d3-contours. Our solution now calculate isoBands using MarchingSquares.js and wraps them in the same MultiPolygon-object as produced by d3-contours so it will be easy to change lib later.

@Fil
Copy link
Member

Fil commented Aug 14, 2024

@MattiasJa thanks for the reference; just like Plotly, RaumZeit/MarchingSquares.js clips the contours at the location of the data points.

@mbostock
Copy link
Member Author

What if we just repeated the edge pixels, like TEXTURE_WRAP CLAMP_TO_EDGE? It seems to work well.

untitled - 2024-11-25T214244 204

We could also blur the repeated pixels slightly.

Fil added a commit that referenced this issue Nov 26, 2024
@Fil
expand the matrix on the edges (with blurred values), then contract t…
11ae1ab 
…he contour back to the frame

closes #72
@Fil Fil linked a pull request Nov 26, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

clamp to the edge d3/d3-contour
4 participants
@Fil @mbostock @DanielCordell @MattiasJa