Don’t round the corners

[d3]

Don’t round the corners

[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.

[Fil]

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

[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]

Some update on this topic?

[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 :

[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%)