Don’t round the corners

[mbostock]

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

It’s much more visible with a coarser grid:

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

[Fil]

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.

[MattiasJa]

Some update on this topic?

[Fil]

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

[MattiasJa]

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?

[Fil]

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

[MattiasJa]

       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 :

[Fil]

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]

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]

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

[Fil]

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

[DanielCordell]

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]

Sure, see the referenced notebook.

[DanielCordell]

Ah my bad, thanks!

[MattiasJa]

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]

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